vue自定义指令的用法

上周有一个长按某一块文本弹出一个弹窗的需求，关于这个长按的姿势想到了使用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>

上面就是整个自定义指令的使用流程。