Vue定义指令使用指南

前言

最近工作开发中频繁用到Vue的自定义指令，所以有时间总结记录一下Vue自定义指令的用法及能用到的场景。最后分享一下常用到的指令库。

介绍

什么叫指令？

百度百科解释指令是指：告诉计算机从事某一特殊运算的代码。那同样是代码，特殊是什么意思呢？特殊是指能够将某一复杂的操作包装起来，用一段特定的指令来完成。那这段指令就具有普适性和可迁移性。当然，Vue的自定义指令不会涉及到很深。

Vue 中的自定义指令

除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外，Vue 还允许你注册自定义的指令 (Custom Directives)。

我们知道两种在 Vue 中重用代码的方式无非是两种：组件和组合式函数。组件是Vue中主要的构建模块，而组合式函数则侧重于有状态的逻辑。自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。

创建自定义指令

创建一个最简单的自动聚焦输入框的自定义指令。

script setup 模式

在 <script setup> 中，任何以 v 开头的驼峰式命名的变量都可以被用作一个自定义指令。在下面的例子中，vFocus 即可以在模板中以 v-focus 的形式使用。

<script setup>
// 定义 vFocus 指令
const vFocus = {
  mounted: (el) => el.focus()
}
</script>

// 使用
<template>
  <input v-focus />
</template>

非 script setup 模式

在没有使用 <script setup> 的情况下，自定义指令需要通过 directives 选项注册。

export default {
  setup() {
    /*...*/
  },
  directives: {
    // 在模板中启用 v-focus
    focus: {
      /* ... */
    }
  }
}

全局注册

将一个自定义指令全局注册到应用层级，这样在所有的组件中都能使用这个自定义指令完成某项功能：

const app = createApp({})

// 使 v-focus 在所有组件中都可用
app.directive('focus', {
  /* ... */
})

自定义指令钩子

自定义指令钩子分别有 7 个钩子函数，分别对应Vue 示例渲染的不同生命周期，代表在相应的生命周期内执行相关的钩子代码。

钩子生命周期：

const myDirective = {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {
    // 下面会介绍各个参数的细节
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode, prevVnode) {}
}

钩子参数

以下分别是对 el、binding对象、vnode、prevNode的参数解释

参数	参数解释
el	指令绑定到的元素。这可以用于直接操作 DOM。
binding	一个对象，包含以下属性。
binding.value	传递给指令的值。例如在 v-my-directive="1 + 1" 中，值是 2，可以是任何js变量或表达式。
binding.oldValue	之前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否更改，它都可用。
binding.arg	传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中，参数是 "foo"。
binding.modifiers	一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中，修饰符对象是 { foo: true, bar: true }。
binding.instance	传使用该指令的组件实例
binding.dir	指令的定义对象。
vnode	代表绑定元素的底层 VNode。
prevNode	之前的渲染中代表指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。

ps：自定义指令与透传具有相似的特性，会应用到组件的根元素上，但是不能用在多跟组件上，如果使用会忽略指令并抛出异常。

常用指令库

1. V-Click-Outside

• 功能：点击组件外触发钩子指令。
• 仓库：https://github.com/ndelvalle/v-click-outside
• 使用：npm install --save v-click-outside

<template>
    <div v-click-outside="outsideHandle"></div>
</template>
<script lang="ts" setup>
const outsideHandle = () => {
    // ...
}
</script>

2. V-Clipboard

• 功能：点击元素时复制传入指令的值。
• 仓库：https://github.com/euvl/v-clipboard
• 使用：npm install --save v-clipboard

<template>
    <button v-clipboard="value">
      Copy to clipboard
    </button>
</template>

3. Vue-ScrollTo

• 功能：这个指令监听元素的点击事件，然后滚动到指定位置。
• 仓库：https://github.com/rigor789/vue-scrollTo
• 使用：npm install --save vue-scrollto

<span v-scroll-to="{
  el: '#element',          // 滚动的目标位置元素
  container: '#container', // 可滚动的容器元素
  duration: 500,           // 滚动动效持续时长（毫秒）
  easing: 'linear'         // 动画曲线
  }"
>
  Scroll to #element by clicking here
</span>