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

覺得可以嘗試用 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>

我實現的效果

然後關於這個點選元素外觸發某個事件，如果還有啥其他優雅的方式的話，下面留言分享一下哈。