vue自定義指令(Directive中的clickoutside.js)的理解

龍恩0707發表於2017-06-04
VueIDEJS

閱讀目錄

vue自定義指令clickoutside.js的理解

vue自定義指令請看如下部落格：

vue自定義指令

一般在需要 DOM 操作時我們都需要使用自定義指令的方式去實現，當然一些特殊的事件監聽也可以使用指令，例如監聽外部點選事件：

我們可以看下 clickoutside.js 如何實現的，如下程式碼：

const clickoutsideContext = '@@clickoutsideContext';

export default {
  /*
   @param el 指令所繫結的元素
   @param binding {Object} 
   @param vnode vue編譯生成的虛擬節點
   */
  bind (el, binding, vnode) {
    const documentHandler = function(e) {
      console.log(el)
      console.log(e.target);
      console.log(vnode);
      console.log(binding);
      
      if(!vnode.context || el.contains(e.target)) {
        return false;
      }
      if (binding.expression) {
        vnode.context[el[clickoutsideContext].methodName](e)
      } else {
        el[clickoutsideContext].bindingFn(e);
      }
    }
    el[clickoutsideContext] = {
      documentHandler,
      methodName: binding.expression,
      bindingFn: binding.value
    }
    setTimeout(() => {
      document.addEventListener('click', documentHandler);
    }, 0)
  },
  update (el, binding) {
    el[clickoutsideContext].methodName = binding.expression;
    el[clickoutsideContext].bindingFn = binding.value;
  },
  unbind(el) {
    document.removeEventListener('click', el[clickoutsideContext].documentHandler);
  }
}

在外部呼叫 clickoutside.vue 程式碼如下：

<template>
  <div v-clickoutside="handleClickOutSide">1111111</div>
</template>

<script>
  import clickoutside from '../../directive/clickoutside';
  export default {
    methods: {
      handleClickOutSide(e) {
        // 當外部被點選時呼叫
        console.log(e);
        console.log(111)
      }
    },
    directives: {
      clickoutside
    }
  }
</script>

具體效果可以 檢視git上的demo

把程式碼克隆下來，在本地執行專案 npm run dev 就可以啟動本地專案預覽~ 

下面我們來分下下 如上列印的欄位含義：

當我隨便在document點選一下，會列印console.log() 如下資訊的含義：

1. console.log(el);  指被繫結的元素，列印資訊如下：

<div>1111111</div>;

2. console.log(e.target); 列印資訊如下：

3. console.log(vnode); 列印資訊如下：

4. console.log(binding); 列印資訊如下：

當我點選一下，會呼叫外部的方法：

methods: {
      handleClickOutSide(e) {
        // 當外部被點選時呼叫
        console.log(e);
        console.log(111)
      }
 },

相關文章