实现弹框遮罩, 点击其他区域弹框关闭

就是实现一个弹窗,在点击内容的时候不关闭,在点击其他区域的时候关闭弹窗
可以根据事件冒泡来解决这个问题
//html
<template>
<div title=”我是外层容器” v-show=”show” @click=”cancel”>
<div title=”我是内容” @click.stop>dome</div> //停止冒泡 stopPropagation()
</div>
</template>

//js
export default {
data(){
return {
show: true
}
},
methods: {
cancel(){
this.show = false
}
}
}
另一种方法
//html
<template>
<div title=”我是外层容器” v-show=”show”>
<div class=”content” title=”我是内容” @click=”cancel”>dome</div> //停止冒泡 stopPropagation()
</div>
</template>

//js
export default {
data(){
return {
show: true
}
},
methods: {
cancel(event) {
let content= document.getElementsByClassName(“content”)[0];
if (content) {
if (!content.contains(event.target)) {
//如果点击到了class为content以外的区域
this.show= false;
}
}
}
}
}

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理