vue 手写点击 div盒子 外面空白区域控制隐藏

需求：需要写一个类似于elment-ui中 el-dialog的弹出框，点击弹出框外部任意一个位置，都能关闭弹出框的效果。

右下角的 圆形按钮，控制左边的全部功能盒子的显示隐藏，要求：点击全部功能盒子以外的任意地方，都能实现隐藏该盒子。

 结构部分：

 代码部分：

监听事件：

  watch: {
    showFlag(newVal, oldVal) {
      if (newVal) {
        // 若显示，则监听失去焦点事件。
        document.addEventListener("click", this.click_allFunction_side, true);
      } else {
        // 不显示，销毁监听事件。
        document.removeEventListener("click", this.click_allFunction_side, true);
      }
    }
  },

方法部分：

 methods: {
    imgClick() {
      this.showFlag = true;
    },
    close() {
      this.showFlag = false;
    },
    click_allFunction_side(e) {
      // console.log(this.$el.contains(e.target),118);
      if (!this.$el.contains(e.target)) {
        this.showFlag = false;
      }
    }
  }

处理思路部分借鉴下面网址的中的内容，另有其他的处理方法，也可查看：

https://www.jb51.net/article/175671.htmhttps://www.jb51.net/article/175671.htm