Vue 在同一元素上实现单击、双击事件 （将其自定义指令）

前景：在同一元素上绑定单双击事件，当双击时，单击事件也会随之触发，那么如何实现双击、单击不互相影响呢？如下

1. 定义directives.js

import Vue from 'vue'

const clickDown = Vue.directive('clickDown', {

    inserted(el, binding, vnode) {
        let clickTimer = null
          
        // 单击
        el.addEventListener('click', () => {
          if (clickTimer) {
            window.clearTimeout(clickTimer);
            clickTimer = null;
          }
          clickTimer = setTimeout(() => {
    
            vnode.context[binding.value.clickFun](binding.value.clickFunType);
          }, 300);
        })
    
        // 双击
        el.addEventListener('dblclick', () => {
          if (clickTimer) {
            window.clearTimeout(clickTimer);
            clickTimer = null;
          }

          vnode.context[binding.value.dblclickFu](binding.value.dblclickFuType);
        })
      },
});

export default { clickDown }

2.  在main.js中，引入上面的文件

import directive from './utils/directives'

Vue.use(directive)

3. 在元素上使用自定义指令

 <div v-clickDown="{ clickFun: '需要调用单击的方法', clickFunType: '单击方法的入参数' }"></div>