写一个Vue2和vue3的自定义指令（以复制指定作为示例）

一、自定义指令是什么？

直接看官网的说明：带有v- 前缀的特殊 attribute（属性）。

二、自定义指令有啥用？

作用：一个指令的任务是在其表达式的值变化时响应式地更新 DOM

<p v-if="seen">现在你看到我了</p>

v-if 指令会基于表达式 seen 的值的真假来移除/插入该 < p> 元素。

三、自定义指令怎么用？

1.自定义指令的参数

/*
* {string} id 自定义指令的名称
* {Function | Object} [definition] 自定义指令的回调函数
*/
Vue.directive( id, [definition] )

2.自定义指令的钩子函数

（1）五个钩子函数的说明

// 注册一个全局自定义指令 `my-directive`(Vue.directive注册自定义指令)
Vue.directive('my-directive', {bind(el, binding, vnode) {}, // 当指令绑定到元素上时调用inserted(el) {}, // 当绑定元素插入到 DOM 中时调用update(el, binding, vnode, oldVnode) {} // 在包含组件的 VNode 更新时调用componentUpdated(el, binding, vnode, oldVnode) {} // 在包含组件的 VNode 及其子 VNode 全部更新后调用unbind(el, binding, vnode) {} // 当指令与元素解绑时调用
});

（2）钩子函数的参数(主要参数：el和value)

el：指令所绑定的元素，可以用来直接操作 DOM。binding：一个对象，包含以下 property： name：指令名，不包括 v- 前缀。value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

3.动态参数和修饰符

理论说完，直接看demo

（1）参数的使用

<div v-copy="value1的值"> 
// binding 参数会是一个这样的对象
{arg: 'copy',modifiers: {},value: /* `value1` 的值 */,oldValue: /* 上一次更新时 `value1` 的值 */
}

<div v-example:foo.bar="value2">
// 你将获得的binding 参数会是一个这样的对象
{arg: 'foo',modifiers: { bar: true },value: /* `value2` 的值 */,oldValue: /* 上一次更新时 `value2` 的值 */
}

（2）动态参数的使用

<div v-example:[arg]="value"></div>

（3）修饰符

同点击事件这种使用修饰符

// 提交事件使用

<form @submit.prevent="onSubmit">...</form>

// 自定义指令使用

<button v-copy.prevent="baz">...</button>
// v-copy 是定义的自定义名称
// prevent 是修饰符
// baz 是自定义的value

四、完整的vue2自定义指令使用

1. 在src下面创建directive文件夹（表示是自定义文件夹）

2. 新建文件copy.js（表示是个复制的自定义指令）

3. copy.js 的完整代码

import Vue from 'vue'
import { Message } from 'view-design' // 根据你使用的不同框架替换提示语句
// 注册一个全局自定义复制指令 `v-copy`
Vue.directive('copy', {// 参数1 ‘el’ 就是操作的dom，第二个参数就是binding，获取里面的属性value，也就是要复制的值bind (el, { value }) {el.$value = valueel.handler = () => {el.style.position = 'relative'if (!el.$value) {// 值为空的时候，给出提示alert('无复制内容')return}// 动态创建 textarea 标签const textarea = document.createElement('textarea')// 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域textarea.readOnly = 'readonly'textarea.style.position = 'absolute'textarea.style.top = '0px'textarea.style.left = '-9999px'textarea.style.zIndex = '-9999'// 将要 copy 的值赋给 textarea 标签的 value 属性textarea.value = el.$value// 将 textarea 插入到 el 中el.appendChild(textarea)// 兼容IOS 没有 select() 方法if (textarea.createTextRange) {textarea.select() // 选中值并复制} else {textarea.setSelectionRange(0, el.$value.length)textarea.focus()}const result = document.execCommand('Copy')if (result) Message.success('复制成功')el.removeChild(textarea)}el.addEventListener('click', el.handler) // 绑定点击事件},// 当传进来的值更新的时候触发componentUpdated (el, { value }) {el.$value = value},// 指令与元素解绑的时候，移除事件绑定unbind (el) {el.removeEventListener('click', el.handler)}
})

4 .main.js

因为在copy.js中

import './directive/copy'

五、局部指令（了解）

全局指令：通过 Vue.directive() 函数注册一个全局的指令。
局部指令：通过组件的 directives 属性，对该组件添加一个局部的指令
注意点：==directives 和 methods 确实是同级的配置项，别放在methods里面了。==其他使用同全局指令。

directives: {copy: {// 指令的定义inserted: function (el) {// 复制逻辑，不在重复了}}
}

六、完整的vue3自定义指令使用（全局和局部）

1. 指令钩子

const myDirective = {// 在绑定元素的 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) {}
}

2. 钩子参数

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

3. 全局自定义组件的使用

（1） 在src下面创建directive文件夹（表示是自定义文件夹）

（2）新建文件copy.js（表示是个复制的自定义指令）

（3）copy.ts 的完整代码

import { DirectiveBinding } from 'vue';
import { message } from 'ant-design-vue'
// 注册一个全局自定义复制指令 `v-copy`
const copy = {// 在绑定元素的父组件及他自己的所有子节点都挂载完成后调用mounted(el: HTMLElement, binding: DirectiveBinding) {el.addEventListener('click', () => {const textToCopy = binding.value;if (textToCopy) {// 如果支持Clipboard APIif (navigator.clipboard && navigator.clipboard.writeText) {navigator.clipboard.writeText(textToCopy).then(() => {message.success('复制成功！')}).catch(err => {message.error(err + '复制失败！')});} else {// 不支持创建一个临时的 textarea 元素来实现复制功能const textarea = document.createElement('textarea');textarea.value = textToCopy;textarea.style.position = 'fixed';document.body.appendChild(textarea);textarea.focus();textarea.select();try {document.execCommand('copy');message.success('复制成功！')} catch (err) {message.error(err + '复制失败！')}document.body.removeChild(textarea);}}});},// 绑定元素的父组件卸载后调用unmounted(el: HTMLElement) {el.removeEventListener('click', () => {});}
}
export default copy

（4）main.ts

import { createApp } from 'vue'
import App from './App.vue'
import copy from './directive/copy'
const app = createApp(App)
app.directive('copy', copy);
app.mount('#app')

4. setup函数的局部组件使用

<template><div><input v-model="text" placeholder="Enter text to copy" /><button v-copy="text">Copy Text</button></div>
</template><script>
import { ref } from 'vue';export default {setup() {const text = ref('');// 定义局部指令const copyDirective = {mounted(el, binding) {el.addEventListener('click', () => {});},unmounted(el) {el.removeEventListener('click', () => {});}};return {text,directives: {copy: copyDirective}};}
};
</script>

5. setup script的局部组件使用

<template><divvue
<template><div><input v-model="text" placeholder="Enter text to copy" /><button v-copy="text">Copy Text</button></div>
</template><script setup>
import { ref, directive } from 'vue';// 定义局部指令
const copyDirective = {mounted(el, binding) {el.addEventListener('click', () => {});},unmounted(el) {el.removeEventListener('click', () => {});}
};// 注册局部指令
const directives = {copy: copyDirective
};// 定义响应式数据
const text = ref('');
</script>

6. setup 函数和setup script的局部指令使用 代码图