写在前面

最近在做系统的页面按钮级权限时，发现用自定义指令可以很优雅的解决这个问题。

我们知道，在 Vue 框架里，除了核心功能默认内置的指令 (例如 v-model 和 v-show)，Vue 也允许注册自定义指令。

而且自定义指令还大有用处！

在 Vue 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

自定义指令

注册是一个自定义指令是简单的，可以注册局部指令，也可以注册全局指令。

// 在vue2注册一个全局自定义指令`v-focus`（假设项目入口文件是main.js）
Vue.directive('focus', {
    
    
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    
    
    // 聚焦元素
    el.focus()
  }
})

// 在vue3注册一个全局自定义指令`v-focus`（假设项目入口文件是main.js）
const app = Vue.createApp({
    
    })
// 注册一个全局自定义指令 `v-focus`
app.directive('focus', {
    
    
  // 当被绑定的元素挂载到 DOM 中时……
  mounted(el) {
    
    
    // 聚焦元素
    el.focus()
  }
})

深入学习自定义指令

我们先了解指令中的两个概念：参数、修饰符，举例如下：

<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>

foo 是参数；a b 是修饰符。

钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

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

// 在【vue3】中
- created：在绑定元素的 attribute 或事件监听器被应用之前调用。在指令需要附加在普通的 v-on 事件监听器调用前的事件监听器中时，这很有用。
- beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用。
- mounted：在绑定元素的父组件被挂载前调用。
- beforeUpdate：在更新包含组件的 VNode 之前调用。
- updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用。
- beforeUnmount：在卸载绑定元素的父组件之前调用。
- unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。

可以看到 Vue3 中，自定义指令的生命周期更全面、细腻一些；可操作的功能选择也更多。

钩子函数的参数

即：el、 binding、 vnode 和 prevVnode。

除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

一个完整的例子

<!-- 【Vue2】 -->
<template>
  <div>
    <p v-highlight:color.delay ="'green'">我是自定义p</p>
  </div>
</template>
...
Vue.directive('highlight', {
  bind(el, binding) {
    var delay = 0
    if (binding.modifiers['delay']) { 看修饰符delay在不在，在就延迟3s执行
      delay = 3000
    }
    setTimeout(() => {
      if (binding.arg == 'color') {
        el.style.color = binding.value // 有color就使用传过来的值作为颜色
      } else {
        el.style.backgroundColor = binding.value // 没有就把传过来的值作为背景颜色
      }
    }, delay)
  }
})

<!-- 【Vue3】 -->
<template>
  <div>
    <p v-highlight:color.delay ="'green'">我是自定义p</p>
  </div>
</template>
...
Vue.directive('highlight', {
  bind(el, binding) {
    var delay = 0
    if (binding.modifiers['delay']) { 看修饰符delay在不在，在就延迟3s执行
      delay = 3000
    }
    setTimeout(() => {
      if (binding.arg == 'color') {
        el.style.color = binding.value // 有color就使用传过来的值作为颜色
      } else {
        el.style.backgroundColor = binding.value // 没有就把传过来的值作为背景颜色
      }
    }, delay)
  }
})

动态指令参数

指令的参数可以是动态的。例如，在 v-mydirective:[argument]="value" 中，argument 参数可以根据组件实例数据进行更新！这使得自定义指令可以在应用中被灵活使用。

<div id="dynamicexample">
  <h3>Scroll down inside this section ↓</h3>
  <p v-pin:[direction]="200">I am pinned onto the page at 200px to the left.</p>
</div>

Vue.directive('pin', {
  bind: function (el, binding, vnode) {
    el.style.position = 'fixed'
    var s = (binding.arg == 'left' ? 'left' : 'top')
    el.style[s] = binding.value + 'px'
  }
})

new Vue({
  el: '#dynamicexample',
  data: function () {
    return {
      direction: 'left'
    }
  }
})

也就是说这个 direction 是动态的，可以传值。

—————————— 【正文完】——————————

前端学习交流群，想进来面基的，可以加群： 685486827，832485817；

写在最后：约定优于配置 —— 软件开发的简约原则

——————————【完】——————————

我的：
个人网站： https://neveryu.github.io/neveryu/
Github： https://github.com/Neveryu
新浪微博： https://weibo.com/Neveryu
微信： miracle421354532

更多学习资源请关注我的新浪微博…好吗

【新】Vue2/3 自定义指令的实现