在 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.ts
import 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 } = binding
console.log(value,modifiers,arg,'ssss');
// 确定事件类型和提示消息
const eventType: EventType = modifiers.dblclick ? 'dblclick' : 'click'
const message = arg || '复制成功' as string
el.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 = textToCopy
textarea.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 } = binding
el.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>
