1.使用ref绑定到要隐藏的元素身上,使用document.addEventListener给全局添加监听事件.
2.使用contains方法判断绑定的元素是否存在于页面的DOM中(包含关系),只会返回布尔值,咱们默认返回false.
3.button按钮记得阻止冒泡,否则点击事件将失效.
<template>
<div id="box">
<div>
<span v-show="flag" ref="shows">过重重关卡看盛世的烟花,赢尽了天下输了她。</span>
<button @click.stop="btn">按钮</button>
</div>
</div>
</template>
<script>
export default {
data(){
return {
flag: false
}
},
created() {
this.text()
},
methods:{
text() {
document.addEventListener("click", e => {
if (this.$refs.shows) {
let self = this.$refs.shows.contains(e.target);
if (!self) {
this.flag = false;
}
}
})
},
btn() {
this.flag = !this.flag
}
},
}
</script>
