上週有一個長按某一塊文字彈出一個彈窗的需求，關於這個長按的姿勢想到了使用vue的自定義指令來進行開發這個需求，因為報告中很多頁面都要使用到這個長按的姿勢，所以自定義指令是最佳解決方法的首選。剛好藉此機會學習自定義指令。
官網提供的全域性自定義和元件自定義的例子，都很簡單明瞭了告訴我們怎麼使用：官網自定義例子連結

下面主要講解我全域性自定義指令的整個流程，整體思路與官網的一樣，但是一般實際專案開發中要規範化自己的開發風格，這裡主要是學習各種框架會使用一套方法來實現：
（1）longTap.js：這個檔案主要用來實現主要的業務邏輯，即長按（touchstart,touchmove,touchend）事件的處理

//核心程式碼
export default {
//使用鉤子函式inserted(被繫結元素插入父節點時呼叫 (僅保證父節點存在，但不一定已被插入文件中))；此外還有=>(1)bind：只調用一次，指令第一次繫結到元素時呼叫。在這裡可以進行一次性的初始化設定。(2)update：所在元件的 VNode 更新時呼叫，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前後的值來忽略不必要的模板更新 
(3)componentUpdated：指令所在元件的 VNode 及其子 VNode 全部更新後呼叫。(4)unbind：只調用一次，指令與元素解綁時呼叫。上面這些鉤子函式可以根據自己所需場景進行選擇。

  inserted (el, bind, vNode) {
    el.addEventListener('touchstart', event => {
    //按下去的邏輯程式碼
    }, false)
    
    el.addEventListener('touchmove', event => {
    //手指按下去移動的邏輯程式碼
    }, false)
    
    el.addEventListener('touchend', event => {
    //手指離開頁面時的邏輯程式碼
    }, false)
  }
}
 

（2）add.js：這個檔案主要用來實現新增longtap的指令

import LongTap from 'longTap'   //引入上面的longTap.js
Logntap.install = function (Vue, option) {
  Vue.directive('longtap', Longtap)
}
export default LongTap

（3）long-tap.js：這個檔案一般放在plugins資料夾下面，到時要引入nuxt.config.js中

import Vue from 'vue'
import LongTap from 'add'

Vue.use(LongTap)
 

(4)在test.vue檔案中使用指令v-longtap

<div v-longtap></div>

上面就是整個自定義指令的使用流程。