全局自定義指令

假設我們要創建一個全局指令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選項進行定義，使得它們的管理更加集中和清晰。