今天遇到一个需求是给一些定制的图片上加上弹窗，类似elementUI的弹窗那样：
思路是这样的，先返回点击事件中的target，然后判断这个target包含在指定的的元素中没有，若没有的话就清除弹窗，若有则显示弹窗。
代码如下：
<template>
<div class="hello" v-on:click="hidePanel">
<div id="myPanel" v-if="panelShow"></div>
</div>
</template>
js:
data () {
return {
panelShow: true
}
}
关键的代码：
methods: {
hidePanel: function(event){
var sp = document.getElementById("myPanel");
if(sp){
if(!sp.contains(event.target)){ //这句是说如果我们点击到了id为myPanel以外的区域
this.panelShow = false;
}
}
}
}
网友评论