vue3 ts 自定义指令 app.directive

在 Vue 3 中，app.directive 是一个全局 API，用于注册或获取全局自定义指令。以下是关于 app.directive 的详细说明和使用方法

app.directive 用于定义全局指令，这些指令可以用于直接操作 DOM 元素。自定义指令在 Vue 3 中非常强大，可以用来封装复杂的 DOM 操作、复用常见的交互行为

1.定义全局指令

app.directive('highlight', {created(el, binding, vnode) {// 在元素的属性或事件监听器应用前调用},beforeMount(el, binding, vnode) {// 在元素插入到 DOM 前调用el.style.backgroundColor = binding.value || 'yellow';},mounted(el, binding, vnode) {// 在元素插入到 DOM 后调用},beforeUpdate(el, binding, vnode, prevVnode) {// 在元素更新前调用},updated(el, binding, vnode, prevVnode) {// 在元素更新后调用},beforeUnmount(el, binding, vnode) {// 在元素卸载前调用},unmounted(el, binding, vnode) {// 在元素卸载后调用}
});

钩子参数​

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

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 钩子中可用。

举例来说，像下面这样使用指令：

<div v-example:foo.bar="baz">

2.使用指令在组件中使用自定义指令时，只需在模板中绑定指令即可：

<template><p v-highlight="'aqua'">This paragraph will be aqua-colored.</p>
</template>

3.Vue3的自定义指令提供了以下生命周期钩子：

• created：在元素的属性或事件监听器应用前调用。
• beforeMount：在元素插入到 DOM 前调用。
• mounted：在元素插入到 DOM 后调用。
• beforeUpdate：在元素更新前调用。
• updated：在元素更新后调用。
• beforeUnmount：在元素卸载前调用。
• unmounted：在元素卸载后调用。

自定义指令

• v-copy

directive/copy/index.tsimport type { Directive, DirectiveBinding, App } from 'vue'
import { ElMessage } from 'element-plus'
import {EventType} from '../types'function addEventListener(el: Element, binding: DirectiveBinding) {const { value, arg,modifiers } = bindingconsole.log(value,modifiers,arg,'ssss');// 确定事件类型和提示消息const eventType: EventType = modifiers.dblclick ? 'dblclick' : 'click'const message = arg || '复制成功' as stringel.setAttribute('copyValue', String(value))const copyHandler = async ():Promise<void> => {try {if (navigator.clipboard) {await navigator.clipboard.writeText(el.getAttribute('copyValue') || '')} else {legacyCopy(el.getAttribute('copyValue') || '')}// 非静默模式显示提示if (!modifiers.quiet) {ElMessage({message: message,type: 'success',})} } catch (err) {ElMessage.error('复制失败！')}}   el.addEventListener(eventType, copyHandler)
}function legacyCopy(textToCopy: string) {const textarea = document.createElement('textarea')textarea.value = textToCopytextarea.style.position = 'fixed'document.body.appendChild(textarea)textarea.select()if (!document.execCommand('copy')) {throw new Error('execCommand 执行失败')} document.body.removeChild(textarea)
}
const vCopy: Directive = {mounted(el: HTMLElement, binding:DirectiveBinding) {addEventListener(el, binding)},updated(el: HTMLElement, binding:DirectiveBinding) {const { value } = bindingel.setAttribute('copyValue', String(value))},
}
export const setupCopyDirective = (app: App<Element>) => {app.directive('copy', vCopy)
}
export default vCopy

2.v-focus

import type { Directive ,App} from 'vue'const vFocus: Directive = {mounted(el: HTMLElement) {console.log(el,'el');el.focus && el.focus()},updated(el: HTMLElement) {el.focus && el.focus()},
}
export const setupFocusDirective = (app: App<Element>) => {app.directive('focus', vFocus)
}
export default vFocus

组件中使用

<script setup lang="ts">import {ref} from "vue";import { BaseButton } from '@/components/Button'import { ElInput } from 'element-plus'const value = ref<string>('我是要复制的值')const change = ref<string>('我是要改变的值')
</script><template><button v-copy.dblclick="value">点击我复制</button><BaseButton type="primary" class="w-[20%]" v-copy:复制成功了.dblclick="value">点击我复制</BaseButton><el-input v-model="change" placeholder="Please input" /><BaseButton type="primary" class="w-[20%]" @click="() => value = change">改变将要复制的值</BaseButton><input v-model="value" placeholder="111" v-focus />
</template><style scoped></style>