vue下拉框点击空白区域关闭弹框
程序员文章站
2022-06-19 16:20:00
组件当前点击 如果采取冒泡阻止 .stop（页面只引用单个组件的时候） Document 事件绑......
组件当前点击 如果采取冒泡阻止 .stop（页面只引用单个组件的时候）
<template>
<div class="comtainer">
<div
@click.stop="handleInput"
class="select-selection"
ref="selectSelection">
</div>
</div>
<template>Document 事件绑定点击区域body，然后将组件设置为不显示
mounted() {
var that =this
document.addEventListener("click",()=>{
获取组件that
设置为不显示即可
});
}当页面引用多个组件复用时候，为了不干扰其他组件（组件冒泡要去除）
当点击空白区域在判断，空白区域是否在当前组件dom内 （dom包含关系this.$el.contains、e.target）
mounted() {
let that=this
document.addEventListener('click', (e) => {
if (!that.$el.contains(e.target)) this.showMenuList = false
})
}
本文地址：https://blog.csdn.net/qq_32615575/article/details/109242867
上一篇： WPS演示课件中声音使用技巧怎么在幻灯片中添加声音
下一篇： 若依--实现--二级联动