vue 点击弹窗以外的其他区域可以关闭弹窗

image.png

代码实例

html

 <div class="dialog" ref="container" v-if="showDialog" >
</div>

js

mounted () {
    let _this = this;
    document.addEventListener('mouseup',(e) =>{
        let tree = this.$refs.container
        if (tree) {
          if (!tree.contains(e.target)) {
            this.showDialog=false
          }
        }
      })      
}

上面的还是不行的没关系，第二种方法 ===>

image.png
image.png

HTML部分

 <div
      class="select"
      @click.stop="showDialog=!showDialog"
    >
</div>

<div class="dialog" ref="container" v-if="showDialog" :style="{width:dwidth}"></div>

js部分

mounted() {
    //判断点击的是否是类型下拉区域
    document.addEventListener("click", this.bodyCloseMenus);
}
//组件销毁时别忘记清除
  destroyed() {
    document.removeEventListener("click", this.bodyCloseMenus);
  },
  methods: {
    //页面其他区域点击关闭分类
    bodyCloseMenus(e) {
      let self = this;
      if (self.showDialog == true) {
        //排除本身
        let tree = self.$refs.container
        if(tree){
          if (!tree.contains(e.target)) {
            self.showDialog = false;
          }
        }
      }
    },
}

以上测试还不行的话在另寻方法吧~