directives.js

36 阅读1分钟
import Vue from 'vue'
 
const clickDown = Vue.directive('clickDown', {
  // 添加bind设置

    bind: function (el, binding, vnode) {
      // bind中的vnode里面的key可以给设置一个随机数,这样每次都会更新虚拟节点。
      let num = parseInt(Math.random() * 10)
      vnode.key = num
    },

    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.clickFunParam);
          }, 300);
        })
    
        // 双击
        el.addEventListener('dblclick', () => {
          if (clickTimer) {
            window.clearTimeout(clickTimer);
            clickTimer = null;
          }
 
          vnode.context[binding.value.dblclickFu](binding.value.dblclickFuParam);
        })
      },
});
 
export default { clickDown }