Vue 自定義指令實現點擊元素外觸發事件

前言 最近搞了畢設，須要實現一個場景，點擊一塊區域，彈出一個編輯區域，點擊頁面的其餘地方的時候，這個編輯區域就隱藏，本想一想以前寫模態框同樣寫個方法的時候，忽然

以爲能夠嘗試用 vue 相關的東西優雅的解決這個事情，而後就學了下面的自定義指令了。

前置知識

既然要用 Vue 的自定義指令，那麼確定要了解一下 Vue 自定義指令的相關知識啦，關於這部分的內容，看我以前寫過的《Vue 自定義指令》或者直接看官方文檔就能夠啦，這裏我就再也不多講了。

解決思路

這個按照我以前寫模態框的經驗，個人作法是給 document 綁定一個點擊事件，而後判斷觸發點擊事件的那個元素是否是模態框所在的目標區域，若是不是，那麼就觸發隱藏事件。看一下代碼吧

$(document).mouseup(function(e){
  var _con = $(' 目標區域 ');   // 設置目標區域
  if(!_con.is(e.target)){ // 判斷是否是目標區域
    some code...   // 功能代碼
  }
});

實現

有了思路，實現起來就簡單了。就直接放定義的代碼啦

const clickOutside = {
  // 初始化指令
  bind(el, binding, vnode) {
    function clickHandler(e) {
      // 這裏判斷點擊的元素是不是自己，是自己，則返回
      if (el.contains(e.target)) {
        return false;
      }
      // 判斷指令中是否綁定了函數
      if (binding.expression) {
        // 若是綁定了函數 則調用那個函數，此處binding.value就是handleClose方法
        binding.value(e);
      }
    }
    // 給當前元素綁定個私有變量，方便在unbind中能夠解除事件監聽
    el.__vueClickOutside__ = clickHandler;
    document.addEventListener('click', clickHandler);
  },
  update() {},
  unbind(el, binding) {
    // 解除事件監聽
    document.removeEventListener('click', el.__vueClickOutside__);
    delete el.__vueClickOutside__;
  },
};


directives: {clickOutside},

接下來就能夠就能夠在組件內直接使用啦

<div v-click-outside="closeDialog"></div>

我實現的效果

而後關於這個點擊元素外觸發某個事件，若是還有啥其餘優雅的方式的話，下面留言分享一下哈。