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

Youngs 發布于2019-08-23 13:44 / 2956人閱讀

摘要：前置知識既然要用的自定義指令，那么肯定要了解一下自定義指令的相關知識啦，關于這部分的內容，看我之前寫過的自定義指令或者直接看官方文檔就可以啦，這里我就不再多講了。

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

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

接下來就可以就可以在組件內直接使用啦

我實現的效果

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

GPU云服務器云服務器 js 自定義觸發事件自定義指令自定義指令實例自定義事件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99483.html

Vue學習筆記（一）

摘要：一介紹也稱為，讀音類似，錯誤讀音，由華人尤雨溪開源并維護。隱藏四事件之前說了一些關于事件的指令，這里詳細學習一下事件的相關知識。還有一些其他鍵盤事件，具體參考官方文檔。模板就是，用來進行數據綁定，顯示在頁面中，也稱為語法。一、Vue.js介紹 Vue.js也稱為Vue，讀音類似view，錯誤讀音v-u-e，由華人尤雨溪開源并維護。 Vue有以下特點：是一個構建用戶界面的框架是一...

liukai90 2019-08-21 17:05 評論0 收藏0
Vue學習筆記（一）

摘要：一介紹也稱為，讀音類似，錯誤讀音，由華人尤雨溪開源并維護。隱藏四事件之前說了一些關于事件的指令，這里詳細學習一下事件的相關知識。還有一些其他鍵盤事件，具體參考官方文檔。模板就是，用來進行數據綁定，顯示在頁面中，也稱為語法。一、Vue.js介紹 Vue.js也稱為Vue，讀音類似view，錯誤讀音v-u-e，由華人尤雨溪開源并維護。 Vue有以下特點：是一個構建用戶界面的框架是一...

rollback 2019-08-01 17:49 評論0 收藏0
Vue學習筆記（一）

摘要：一介紹也稱為，讀音類似，錯誤讀音，由華人尤雨溪開源并維護。隱藏四事件之前說了一些關于事件的指令，這里詳細學習一下事件的相關知識。還有一些其他鍵盤事件，具體參考官方文檔。模板就是，用來進行數據綁定，顯示在頁面中，也稱為語法。一、Vue.js介紹 Vue.js也稱為Vue，讀音類似view，錯誤讀音v-u-e，由華人尤雨溪開源并維護。 Vue有以下特點：是一個構建用戶界面的框架是一...

baoxl 2019-08-30 13:47 評論0 收藏0
Vue 自定義指令

摘要：自定義指令定義直接看官網的介紹吧覺得官方文檔說的很清楚了，所以我基本都是抄他的了。除了核心功能默認內置的指令和，也允許注冊自定義指令。然而，有的情況下，你仍然需要對普通元素進行底層操作，這時候就會用到自定義指令。前言最近搞了畢設，需要實現一個場景，點擊一塊區域，彈出一個編輯區域，點擊頁面的其他地方的時候，這個編輯區域就隱藏，本想想之前寫模態框一樣寫個方法的時候，突然showImg(...

you_De 2019-08-23 13:42 評論0 收藏0
vue自定義指令clickoutside擴展--多個元素的并集作為inside

摘要：指令中自定義的指令之一，顧名思義，就是當鼠標點擊了指令所綁定元素的外部時，就會觸發綁定方法。在鼠標放開觸發事件處理時，通過獲取到他們的對象。使用示例原來的使用方式不受影響，只是添加了多個元素并集作為的功能。指令中的參數學習都是個人理解，如果發現錯誤，懇請大家批評指正，謝謝。還有我說的會比較啰嗦，因為是以自身菜雞水平的視角來記錄學習理解的過程，見諒。 1.前言產品使用vue+elem...

ivan_qhz 2019-08-22 16:04 評論0 收藏0