天天看點

vue元件中點選頁面的其它地方将自定的元件進行隐藏

需求:編寫一個自定義的元件需要完成點選頁面的其他非元件的地方的時候要把這個元件隐藏起來。

代碼:

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);
  },
           

繼續閱讀