这篇文章主要介绍了Vue实现点击当前元素以外的地方隐藏当前元素,文中给大家扩展了vue实现点击其他地方隐藏div的三种方法,需要的朋友可以参考下

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 @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实现点击当前元素以外的地方隐藏当前元素,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对爱安网网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

最新资讯
阿里发爱心助农五条准则:以净重为准 品质差将拦截

阿里发爱心助农五条准

阿里巴巴集团向平台商家发布公告,强调平台会持续从商家
小米高管任命:王川任CSO 李肖爽任大家电部总经理

小米高管任命:王川任CS

小米集团刚刚宣布新的架构调整,任命小米集团联合创始人
北京网约车开装“安全舱”,3月2日前8000辆车配齐

北京网约车开装“安全

记者获悉,北京所有的滴滴网约车正陆续装上一层前后排塑
特斯拉德国超级工厂第一阶段将雇佣12000人

特斯拉德国超级工厂第

特斯拉在官网披露的信息显示,德国超级工厂的第一阶段,计
小鹏汽车发生工商变更 中金资本等退出其股东行列

小鹏汽车发生工商变更

广州橙行智动汽车科技有限公司发生工商变更,河南省战新
武汉大学校友企业家雷军等捐的2000多万元物资抵汉

武汉大学校友企业家雷

武汉大学校友企业家雷军、蒋锦志、毛振华、周旭洲、曾
最新文章
Vue实现图片与文字混输效果

Vue实现图片与文字混

用多了 JQuery ,习惯了使用JQuery的API操作 DOM ,几乎忘
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

Vue实现点击当前元素

这篇文章主要介绍了Vue实现点击当前元素以外的地方隐
Vue实现验证码功能

Vue实现验证码功能

这篇文章主要为大家详细介绍了Vue实现验证码功能,文中
JS实现的雪花飘落特效示例

JS实现的雪花飘落特效

这篇文章主要介绍了JS实现的雪花飘落特效,结合实例形
微信小程序实现图片压缩

微信小程序实现图片压

这篇文章主要为大家详细介绍了微信小程序实现图片压缩
JavaScript实现京东放大镜效果

JavaScript实现京东放

这篇文章主要为大家详细介绍了JavaScript实现京东放大