Vue自定义指令

Vue 核心内置的指令（v-model和v-show）在需要频繁对普通DOM元素进行底层操作，这时候就需要用到自定义指令

1. 钩子函数

vue.derective 有五个钩子函数

• bind:只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

• inserted:被绑定元素插入父节点时调用(仅保证父节点存在，但不一定已被插入文档中)。

• update:所在组件的vNode更新时调用，但是可能发生在其子vNode更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。

• componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。

• unbind:只调用一次，指令与元素解绑时调用

// 注册
Vue.directive('my-directive',{
    bind:  function () {},         
    inserted: function () {},
    update: function () {},
    componentUpdated: function () {},
    unbind: function() {}
})

2. 钩子函数参数

3. 使用实例

• 此实例为操作表单提交按钮是进行防抖处理 封装（v-preventReClick）

Vue.directive('preventReClick', {
    inserted(el, binding) {
    el.addEventListener('click', () => {
        if (!el.disabled) {
          el.disabled = true
          setTimeout(() => {
                el.disabled = false
              }, binding.value || 2000)
        }
      })
    }
});

• 在页面中引入使用（v-preventReClick）

• 旨在表单提交后俩秒无法进行操作

<i-button type="primary" size="large" v-preventReClick @click="new_diagram_c('newform_c')">确定</i-button>