Vue自定义指令， 自定义指令封装全局防抖函数

Vue自定义指令

除了核心功能默认内置的指令 (v-model 和 v-show等)，Vue允许我们注册自定义指令用于元素上

当我们需要对普通 DOM 元素进行底层操作时，就可以用到用到自定义指令。

如何注册

我们可以全局注册自定义指令， 也可以局部注册

全局注册：

全局注册自定义指令是将我们的自定义指令挂载到vue实例上的，在项目中都可以使用

全局指令注册方法为：Vue.directive(dName, options) 传入两个参数

分别是 指令名 和 配置对象

创建完之后，我们就可以使用 v-指令名 的方式加在元素上，以使自定义指令生效

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

new Vue( options )

局部注册：

用法与 全局 注册是一样的， 只是写法稍有不同

进行局部注册时， 我们的组件中可以接收一个directives选项，

其中，键为指令名 值为配置对象

export default{
  data(){
    return { ... }
  },
  directives:{
    	focus:{
        inserted: function (el) {
          //element-ui中 el-input外层是div, 里面包裹的才是input, 因此用在 el-input上的话，要让el-input里的子元素聚焦
          //增加判断可以使我们的v-focus通用性更强
          el.tagName == 'INPUT' ? el.focus() : el.children[0].focus
        }
      }
  }
}

使用自定义指令

在模板的任意元素上都可以使用我们的自定义指令

<input v-focus></input>

钩子函数：

配置对象中包含一下几个钩子函数(均为可选值):

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

钩子函数参数：

指令钩子函数会被传入以下参数：

• el：指令所绑定的元素，可以用来直接操作 DOM。

• binding
  

  ：一个对象，包含以下 property：

  • name：指令名，不包括 v- 前缀。
  • value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
  • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  • expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
  • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
  • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

• vnode：Vue 编译生成的虚拟节点(这个参数本人没有用过，有用过的大佬请指点一下)

• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

Vue 官方提示： 除了`el`之外，其他参数都应该是只读的，不建议修改

项目中用到的自定义指令：

一、

​ 点击按钮过快可能多次请求接口，用自定义指令做全局的函数防抖

​ 在main.js中 全局注册一个自定义指令：

Vue.directive('debounce' , {
  inserted(el , binding , vnode){
    let timer = null
    el.addEventListener('click' , () => {
      if(timer){
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        binding.value()
      }, 1200)
    })
  }
})

使用时：

<el-button type="primary" v-debounce="onSubmit">提交</el-button>

注意:

​ 这里有一个小问题， v-debounce=“onSubmit” 我们绑定的是组件中methods里的onSubmit方法， 那么bidding.value 得到的就是onSubmit函数，是可以直接执行的

​ 而如果函数会有参数的话， 我们会这样写：

v-debounce=“onSubmit(par)”

​ 此时bidding.value onSubmit函数的执行结果，而return内容的函数， 返回值就是undefined.我们之后再binding.value()的话，就会报错的。

​ 因此，如果传参的话，需要在onSubmit函数中 return 一个匿名函数, 在返回的匿名函数中 执行onSubmit中的代码