就是完成一个弹窗,在点击内容的时刻不封闭,在点击其他地区的时刻封闭弹窗
能够依据事宜冒泡来处理这个题目
//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
}
}
}
另一种要领
js的contains要领用来检察dom元素的包括关联
//html
<template>
<div title="我是外层容器" v-show="show">
<div class="content" title="我是内容" @click="cancel">dome</div>
</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;
}
}
}
}
}