Vue项目中的自定义指令

关于自定义指令

• 在实际项目开发过程中，除了vue自身提供的一些固定指令，如v-if,v-show,v-model等除外，我们可能根据项目的需求来自己注册一些自定义的指令，更好的提高开发和工作效率。

如何实现

注册自定义指令有全局注册与局部注册

• 全局注册注册主要是用过Vue.directive(''指令string",{...})方法进行注册

Vue.directive第一个参数是指令的名字（不需要写上v-前缀），第二个参数可以是对象数据，也可以是一个指令函数

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
   ....
  }
})

• 局部注册通过在组件选项中设置directives对象,和watch/filters同级。

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
     ....
    }
  }
}

• 自定义指令也像组件那样存在钩子函数：

bind()：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
inserted(el,binding)：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
update()：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
componentUpdated()：指令所在组件的 VNode 及其子 VNode 全部更新后调用
unbind()：只调用一次，指令与元素解绑时调用

应用场景

使用自定义组件组件可以满足我们日常一些场景，这里给出几个自定义组件的案例：

• 拖拽
• 防抖
• 图片懒加载
• 一键 Copy的功能
• 自定义全局loading
• 页面水印
• 权限校验
  .......
• 自定义(全局)拖拽指令v-drag

export default {
  install: Vue => {
    Vue.directive("drag",{
 //只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作
      bind:function(){ },
      inserted: function(el,binding){
        const param = binding.value;
        console.log(param);
        el.onmousedown = function(e) {
          const dx = e.clientX - el.offsetLeft;
          const dy = e.clientY - el.offsetTop;
          el.onmousemove = function(e) {
            e.stopPropagation();
            const left = e.clientX - dx;
            const top = e.clientY - dy;
            el.style.left = left + 'px';
            el.style.top = top + 'px'
          }
          document.mouseup = function(e) {
            e.onmousemove = null;
            document.onmouseup = null;
          }
          return false
        }
      },
      update:function() {
  //被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新
      },
      componentUpdated: function() {
        //被绑定元素所在模板完成一次更新周期时调用
      },
      unbind: function() {
        //只调用一次， 指令与元素解绑时调用
      }
    })
  }
}