vue组件中点击页面的其它地方将自定的组件进行隐藏

官方哈哈

于 2020-10-12 14:29:31 发布

阅读量630

点赞数

分类专栏： # vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qwerewf/article/details/109026957

版权

vue 专栏收录该内容

3 篇文章

订阅专栏

需求:编写一个自定义的组件需要完成点击页面的其他非组件的地方的时候要把这个组件隐藏起来。

代码：

beforeMount() {//在DOM元素渲染之前开始监听mousedown事件
    this._close = (e) => {
      // 如果点击发生在当前组件内部，则不处理
      if (this.$refs.closeSelect.contains(e.target)) {
        return;
      }
      this.isShowSelectList = false;
    };
    document.body.addEventListener("mousedown", this._close);
  },
  beforeDestroy() {//在vue文件销毁的时候移除这个事件
    document.body.removeEventListener("mousedown", this._close);
  },