Vue 自定义指令

前言：自定义分为两种全局注册和局部注册

官方文档：Vue.js

一、输入框单例

以自定义个输入框完成自动对焦这个命令为例：

全局自定义：

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    //  el：指令所绑定的元素，可以用来直接操作 DOM 。
    el.focus()
  }
})

如果想注册局部指令，组件中也接受一个 directives 的选项：

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
   //el：指令所绑定的元素，可以用来直接操作 DOM 。
      el.focus()
    }
  }
}

然后你可以在模板中任何元素上使用新的 v-focus 属性，如下：

<input type="text" v-focus/>

刷新成功自动对焦

二、对象字面量自定义指令

如果指令需要多个值，可以传入一个 JavaScript 对象字面量。记住，指令函数能够接受所有合法的 JavaScript 表达式。

全局定义：

下面这种写法，只会在 bind（bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。） 和 update （所在组件的 VNode 更新时调用）时触发相同行为，而不关心其它的钩子函数。

Vue.directive('bgc', function (dom, binding) {
    // dom表示这个dom元素
    // binding返回绑定的方法,打印出来一目了然
    console.log(binding);
    if(binding.modifiers.isTrue){
        // 这个dom是可以操作的
        dom.style.fontSize = binding.value.fontSize;
        dom.style.backgroundColor = binding.value.bgc;
        dom.style.width = binding.value.w;
        dom.style.height = binding.value.h;
    }

})

上面的代码参数调用打点比较多，可以简化一下。优化如下：

Vue.directive('bgc', function (dom,{modifiers,value}) {
    // dom表示这个dom元素
    // binding被结构出来
    if(modifiers.isTrue){
        // 这个dom是可以操作的
        dom.style.fontSize = value.fontSize;
        dom.style.backgroundColor = value.bgc;
        dom.style.width = value.w;
        dom.style.height = value.h;
    }
})

概念补充：

1. 钩子函数：一个指令里面内置的函数。

比如：inserted 就表示当前元素上树使用时调用。bind 初始化调用一次。

2. 钩子函数的参数：

• dom：当前指令绑定的 DOM 节点。可直接使用原生操作 DOM 的方法来直接操作此元素。
• bnding：一个对象，包含以下属性：
  name：指令名，不包括 v- 前缀。
  value：指令的绑定值。
  expression：字符串形式的指令表达式。
  modifiers：一个包含修饰符的对象， modifiers：一个包含修饰符的对象。例如：v-dir.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

binding的状态

子组件使用：

<template>
    <div>
        <div v-bgc.isTrue="{'bgc':'#20f2f2','fontSize':'22px','w':'200px','h':'200px'}">我是啥</div>
        <div v-bgc="{'bgc':'#20f2f2','fontSize':'22px','w':'200px','h':'200px'}">我是啥</div>
    </div>
</template>
<script>

</script>

<style>
    
</style>

效果