全局自定义指令
假设我们要创建一个全局指令v-highlight，用于高亮显示元素。这个指令将接受一个颜色参数，并有一个可选的修饰符bold来决定是否加粗文本。
首先，在创建Vue应用时定义这个指令：（这里可以将指令抽离成单独的方法，在app.js中调用）
<template>
<div>
<p v-flash="'This is a flash message!'" duration="3000"></p>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
// 定义局部指令
const vFlash = {
mounted(el, binding) {
let timeoutId;
// 获取持续时间，默认为2000毫秒
const duration = binding.value.duration || 2000;
// 显示元素
el.style.opacity = 1;
// 设置定时器，用于在指定时间后隐藏元素
timeoutId = setTimeout(() => {
el.style.opacity = 0;
setTimeout(() => {
el.style.display = 'none';
}, 300); // 添加一点过渡时间
}, duration);
// 清除定时器的函数
const cleanup = () => clearTimeout(timeoutId);
// 组件卸载时清除定时器
onUnmounted(cleanup);
}
};
// 在当前组件中注册局部指令
defineOptions({
directives: {
flash: vFlash
}
});
</script>接下来，在你的组件中使用这个自定义指令：
<template>
<button v-tooltip="'这是一个提示信息！'">悬停我查看提示</button>
</template>在这个例子中，我们定义了一个v-highlight指令，它接受一个颜色参数（如'lightblue'或'green'），并且通过检查bold修饰符来决定是否加粗文本。在组件模板中，我们通过v-highlight="'color'"来指定颜色，并通过添加:bold修饰符来应用加粗效果。
这样，你就能够更灵活地控制和定制组件的样式和行为，充分利用Vue 3自定义指令的强大功能。
局部自定义指令
假设我们要在一个组件内部创建一个指令v-warn，该指令将文本颜色设置为橙色，并根据提供的修饰符改变文本的装饰（如加下划线）。
<template>
<div>
<p v-flash="'This is a flash message!'" duration="3000"></p>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
// 定义局部指令
const vFlash = {
mounted(el, binding) {
let timeoutId;
// 获取持续时间，默认为2000毫秒
const duration = binding.value.duration || 2000;
// 显示元素
el.style.opacity = 1;
// 设置定时器，用于在指定时间后隐藏元素
timeoutId = setTimeout(() => {
el.style.opacity = 0;
setTimeout(() => {
el.style.display = 'none';
}, 300); // 添加一点过渡时间
}, duration);
// 清除定时器的函数
const cleanup = () => clearTimeout(timeoutId);
// 组件卸载时清除定时器
onUnmounted(cleanup);
}
};
// 在当前组件中注册局部指令
defineOptions({
directives: {
flash: vFlash
}
});
</script>在这个组件中，我们定义了一个名为warn的局部指令。该指令在元素被挂载时执行，将文本颜色设置为橙色。如果使用了.underline修饰符，则还会给文本添加下划线。
使用局部指令
在组件的模板中，我们通过v-warn来应用这个指令，并且通过添加.modifierName的方式来使用修饰符。例如，v-warn.underline就表示应用warn指令并启用underline修饰符。
总结
局部自定义指令为组件提供了一种方式，使其能够拥有自己的特定逻辑来处理元素，而不影响其他组件。通过这种方式，你可以针对组件内部的特定需求定制行为，保持代码的模块化和组件的独立性。在Vue 3中，局部指令通过组件的directives选项进行定义，使得它们的管理更加集中和清晰。