动手在Vue中自己撸个弹窗？

作者: 都江堰古巨基 | 来源:发表于2020-04-26 23:32 被阅读0次

今天遇到一个需求是给一些定制的图片上加上弹窗，类似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;
      }
    }
   }
}