关于庐山的诗句,渔具大全,毛超峰岳父
1. 绑定元素
2. mounted生命周期
3. 实现思路
4. 最终效果
接着看下vue实现点击目标元素外页面的其他地方隐藏弹窗
方法:
步骤1:给页面最外出的元素div加点击事件:@click=“popshow = false”
。
步骤2:给点击目标元素加点击事件:@click=“popshow = true”
。
备注:popshow 为控制弹窗显示与隐藏的标志。
ps:下面看下vue实现点击其他地方隐藏div
方法一:
通过监听事件
document.addeventlistener('click',function(e){ if(e.target.classname!='usermessage'){ that.userclick=false; } })
方法二(比较好):
给最外层的div加个点击事件 @click="userclick=false"
给点击的元素上面加上:@click.stop="userclick=!userclick"
方法三:
<template> <!--向页面添加关闭div的事件监听--> <div class="page" @click="hide"> <!--添加.stop防止page的点击事件触发,导致无法显示div--> <button @click.stop="show">点击显示div</button> <!--指定的div。添加.stop防止点击div内的元素时,整个div被关闭--> <div @click.stop> ... </div> </div> <template> <script> export default { methods:{ show(){}, hide(){} } } </script>
小结:
通过vue.js 事件的.stop修饰符可以阻止事件继续冒泡传播,也可以使用原生js事件的event.stoppropagation()方法。
通过向指定的div添加.stop,可以实现只有点击非该div内的元素时,才会往上冒泡至page,从而实现点击其他地方隐藏div。
要向触发显示div的按钮添加.stop,否则一点击按钮,触发show()之后传播到page,立马就会触发hide(),div就无法显示。
总结
以上所述是小编给大家介绍的vue实现点击当前元素以外的地方隐藏当前元素,希望对大家有所帮助
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论