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

共计 640 个字符，预计需要花费 2 分钟才能阅读完成。

就是实现一个弹窗，在点击内容的时候不关闭，在点击其他区域的时候关闭弹窗
可以根据事件冒泡来解决这个问题
//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;
}
}
}
}
}