vue3 自定义指令

自定义指令

除了 vue 官方提供的一些指令（v-if、v-show…）外, vue 还允许我们注册自定义指令。为什么要自定义指令呢，当然是为了逻辑复用，并且是与dom紧密相关的。

//全局注册指令
app.directive('copy', {
  ...myHooks
})

其中 directive 方法接受两个参数，第一个是指令名称，后续使用就是v-copy了，第二个参数是指令对象。

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

钩子参数

指令的钩子会传递以下几种参数：

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

接下来我们写个简单的指令，用于复制文本。代码如下

import { useEventListener, useClipboard } from '@vueuse/core'
import { ElMessage } from 'element-plus'

export const copyDirectives = {
  mounted(el, binding, vnode) {    // 组件挂载时绑定
    const { copy, isSupported } = useClipboard()
    const { value, arg = 'dblclick' } = binding // 默认双击复制
    el.copyValue = value
    useEventListener(el, arg, async () => {
      if (!isSupported) {
        ElMessage({
          type: 'error',
          message: '浏览器不支持复制功能',
          duration: 1000
        })
      }
      try {
        await copy(el.copyValue)
        ElMessage({
          type: 'success',
          message: '已复制到剪贴板',
          duration: 1000
        })
      } catch (error) {
        ElMessage({
          type: 'error',
          message: '复制失败',
          duration: 1000
        })
      }
    })
  },
  updated(el, binding, vnode) {
    // 组件更新时重新绑定copy值，确保copy值是最新的
    el.copyValue = binding.value
  }
}

这里我们导出了 copyDirectives 对象，直接在main.js中导入注册即可

import { createApp } from 'vue'
import App from './App.vue'
import { copyDirectives } from './directives/copy'
const app = createApp(App)
app.directive('copy', copyDirectives)       // 全局注册
app.mount('#app')

然后就是在组件中使用， 这里的我们改为单击复制，当然事件也可以改为其他的。其中value为响应式属性，或者也可以传入表达，类似于{{}}里的用法。

<template>
  <div>
    <p v-copy:click="value" class="content">点我即可复制</p>
    <p v-copy:click="'这是一段文本'" class="content">点我即可复制</p>
    <p v-copy:click="formatValue()" class="content">点我即可复制</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const value = ref('这是value')
const formatValue = () => {
  return '这是一段格式化value'
}
</script>

<style lang="less" scoped></style>

注意：不推荐在组件上使用自定义指令，因为它会始终应用于组件的根节点，而 vue3 中的组件是可以含有多个根节点的。