vue中的自定义指令

1. 什么是自定义指令

vue 官方提供了 v-text、v-for、v-model、v-if 等常用的指令。除此之外 vue 还允许开发者自定义指令。

2. 自定义指令的分类

vue 中的自定义指令分为两类，分别是:
⚫ 私有自定义指令
⚫ 全局自定义指令

3. 私有自定义指令

在每个 vue 组件中，可以在 directives 节点下声明私有自定义指令。示例代码如下:

directives:{
color:{
//为绑定到HTMl元素设置红色的文字
bind(el){
//行参中的el是绑定了次指令的,原生的DOM对象
el.style.color=“red”
}

}

4. 使用自定义指令

在使用自定义指令时，需要加上 v- 前缀。示例代码如下:

//声明自定义指令时,指令的名字时color
//使用自定义指令时,需要加上v- 指令前缀
<h1 v-color>hehe</h1>

5. 为自定义指令动态绑定参数值

在 template 结构中使用自定义指令时，可以通过等号(=)的方式，为当前指令动态绑定参数值:

data(){
return {
color:'red'//定义color颜色值
}
}
//使用指令时,动态为当前指令绑带参数值color
<h1 v-color="color">hehe</h1>

6. 通过 binding 获取指令的参数值

在声明自定义指令时，可以通过形参中的第二个参数，来接收指令的参数值:

directives:{
color:{
bind(el,binding){
//行参中的el是绑定了次指令的,原生的DOM对象
el.style.color=binding.value
}

}

7. update 函数

bind 函数只调用 1 次:当指令第一次绑定到元素时调用，当 DOM 更新时 bind 函数不会被触发。 update 函 数会在每次 DOM 更新时被调用。示例代码如下:

directives:{
color:{
//当指令第一次被绑定到元素时调用
bind(el,binding){
//行参中的el是绑定了次指令的,原生的DOM对象
el.style.color=binding.value
}
//每次dom更新时被调用
updata(el,binding){
el.style.color=binding.value
}
}

8. 函数简写

如果 insert 和update 函数中的逻辑完全相同，则对象格式的自定义指令可以简写成函数格式:

directives:{
//在insert和update时,会触发相同的业务逻辑
color(el,binding){
el.style.color=binding.value
}

}

9. 全局自定义指令

全局共享的自定义指令需要通过“Vue.directive()”进行声明，示例代码如下:

Vue.directive('color',function(el,binding){
el.style.color=binding.value
})

最后分享一个移动端的自动获取焦点自定义指令

import Vue from 'vue'
// 插件对象(必须有install方法, 才可以注入到Vue.use中)
export default {
  install() {
    Vue.directive('fofo', {
      inserted(el) {
        fn(el)
      },
      update(el) {
        fn(el)
      }
    })
  }
}
function fn(el) {
  if (el.nodeName === 'INPUT' || el.nodeName === 'TEXTAREA') {
    // 如果直接是input标签/textarea标签
    el.focus()
  } else {
    // 指令在van-search组件身上, 获取的是组件根标签div, 而input在标签内
    const inp = el.querySelector('input')
    const textArea = el.querySelector('textarea')
    // 如果找到了
    if (inp || textArea) {
      inp && inp.focus()
      textArea && textArea.focus()
    } else {
      // 本身也不是, 子标签里也没有
      console.error('请把v-fofo用在输入框标签上')
    }
  }
}