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