手把手教你在 Vue3 中自定義指令
TienChin 項(xiàng)目前端是 Vue3，前端有這樣的一個(gè)需求：有一些前端頁(yè)面上的按鈕要根據(jù)用戶的權(quán)限來(lái)決定是否展示出來(lái)，如果用戶具備相應(yīng)的權(quán)限，那么就展示對(duì)應(yīng)的按鈕；如果用戶不具備對(duì)應(yīng)的權(quán)限，那么按鈕就隱藏起來(lái)。大致上就這樣一個(gè)需求。
看到這個(gè)需求，可能有小伙伴首先想到用 v-if 指令，這個(gè)指令確實(shí)也能做，但是，由于用戶具備的權(quán)限一般來(lái)說(shuō)可能是多個(gè)，甚至可能還有通配符，所以這個(gè)比對(duì)并不是一個(gè)容易的事情，肯定得寫方法。。。所以，如果能用一個(gè)指令來(lái)實(shí)現(xiàn)這個(gè)功能，那么就會(huì)顯得專業(yè)很多了。
說(shuō)干就干，我們來(lái)看看 Vue3 中如何自定義指令。
1. 成果展示
我們先來(lái)看看實(shí)現(xiàn)自定義指令最終的使用方式：
<button @click="btnClick" v-hasPermission="['user:delete']">刪除用戶</button>
小伙伴們看到，這個(gè) v-hasPermission? 就是我們的自定義指令，如果當(dāng)前用戶具備 user:delete 權(quán)限，這個(gè)按鈕就會(huì)展示出來(lái)，如果當(dāng)前用戶不具備這個(gè)權(quán)限，這個(gè)按鈕就不會(huì)展示出來(lái)。
2. 指令基礎(chǔ)
先要和小伙伴們說(shuō)一下，Vue2 和 Vue3 在自定義指令上有一些差異，并不完全一致，下面的介紹主要是針對(duì) Vue3 的介紹。
我先來(lái)和小伙伴們分享一下我們具體是怎么做的，然后在講解代碼的時(shí)候再來(lái)和大家說(shuō)說(shuō)各個(gè)參數(shù)的含義。
2.1 兩種作用域
自定義指令可以定義全局的，也可以定義局部的。
在正式開(kāi)搞之前，小伙伴們需要先明白，自定義指令有兩種作用域，一種是局部的自定義指令，還有一種是全局的自定義指令。局部的自定義指令就只能在當(dāng)前 .vue? 文件中使用，全局的則可以在所有的 .vue 文件中使用。
2.1.1 局部指令
直接在當(dāng)前 .vue 文件中定義即可，如下：
directives: {
focus: {
// 指令的定義
mounted(el) {
el.focus()
}
}
}
不過(guò)，在 Vue3 中，也可以這樣寫：
<template>
<div>
<button v-onceClick="10000" @click="btnClick">ClickMe</button>
</div>
</template>
<script>
import {ref} from 'vue';
export default {
name: "MyVue01",
setup() {
const a = ref(1);
const btnClick = () => {
a.value++;
}
return {a, btnClick}
},
directives: {
onceClick: {
mounted(el, binding, vnode) {
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled = true;
setTimeout(() => {
el.disabled = false;
}, binding.value || 1000);
}
});
}
}
}
}
</script>
這里我自定義了一個(gè)名叫 onceClick 的指令，給一個(gè) button 按鈕加上這個(gè)指令之后，可以設(shè)置這個(gè) button 按鈕在點(diǎn)擊多久之后，處于禁用狀態(tài)，防止用戶重復(fù)點(diǎn)擊。
小伙伴們看，這個(gè)指令的執(zhí)行邏輯其實(shí)很簡(jiǎn)單，el 相當(dāng)于添加了這個(gè)指令的元素，監(jiān)聽(tīng)該元素的點(diǎn)擊事件，如果點(diǎn)擊該元素時(shí)，該元素不是處于禁用狀態(tài)，那么就設(shè)置該元素為禁用，給一個(gè)定時(shí)任務(wù)，到期后使該元素變?yōu)榭捎?。這里邊具體的參數(shù)，松哥下面會(huì)跟大家詳細(xì)介紹。
不過(guò)這只是一個(gè)局部指令，只能在當(dāng)前 .vue 文件中使用，我們也可以定義全局指令，這樣就可以在所有的 .vue 文件中使用了。
2.1.2 全局指令
全局指令我們一般寫在 main.js 中，或者寫一個(gè)單獨(dú)的 js 文件然后在 main.js 中引入，下面的例子是直接寫在 main.js 中：
const app = createApp(App);
app.directive('onceClick',{
mounted(el, binding, vnode) {
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled = true;
setTimeout(() => {
el.disabled = false;
}, binding.value || 1000);
}
});
}
})
這樣，我們就可以隨時(shí)隨地去使用 v-onceClick 這個(gè)指令了。
可能小伙伴感覺(jué)比較疑惑，自定義指令時(shí)候的 mounted 以及這里的參數(shù)都是咋回事，那么接下來(lái)松哥就來(lái)和大家詳細(xì)介紹一下這些方法和參數(shù)。
2.2 七個(gè)鉤子函數(shù)
在 Vue3 中，自定義指令的鉤子函數(shù)主要有如下七種（這塊跟 Vue2 差異較大）：
- created：在綁定元素的 attribute 或事件監(jiān)聽(tīng)器被應(yīng)用之前調(diào)用。在指令需要附加在普通的 v-on 事件監(jiān)聽(tīng)器調(diào)用前的事件監(jiān)聽(tīng)器中時(shí)，這很有用。
- beforeMount：當(dāng)指令第一次綁定到元素并且在掛載父組件之前調(diào)用。
- mounted：在綁定元素的父組件被掛載后調(diào)用，大部分自定義指令都寫在這里。
- beforeUpdate：在更新包含組件的 VNode 之前調(diào)用。
- updated：在包含組件的 VNode 及其子組件的 VNode 更新后調(diào)用。
- beforeUnmount：在卸載綁定元素的父組件之前調(diào)用
- unmounted：當(dāng)指令與元素解除綁定且父組件已卸載時(shí)，只調(diào)用一次。
雖然鉤子函數(shù)比較多，看著有點(diǎn)唬人，不過(guò)我們?nèi)粘ｉ_(kāi)發(fā)中用的最多的其實(shí)是 mounted 函數(shù)。
2.3 四個(gè)參數(shù)
這里七個(gè)鉤子函數(shù)，鉤子函數(shù)中有回調(diào)參數(shù)，回調(diào)參數(shù)有四個(gè)，含義基本上和 Vue2 一致：
- el：指令所綁定的元素，可以用來(lái)直接操作 DOM，我們松哥說(shuō)想實(shí)現(xiàn)一個(gè)可以自動(dòng)判斷組件顯示還是隱藏的指令，那么就可以通過(guò) el 對(duì)象來(lái)操作 DOM 節(jié)點(diǎn)，進(jìn)而實(shí)現(xiàn)組件的隱藏。
- binding：我們通過(guò)自定義指令傳遞的各種參數(shù)，主要存在于這個(gè)對(duì)象中，該對(duì)象屬性較多，如下屬性是我們?nèi)粘ｉ_(kāi)發(fā)使用較多的幾個(gè)：
name：指令名，不包括 v- 前綴。
value：指令的綁定值，例如：v-hasPermission="['user:delete']"? 中，綁定值為'user:delete'，不過(guò)需要小伙伴們注意的是，這個(gè)綁定值可以是數(shù)組也可以是普通對(duì)象，關(guān)鍵是看你具體綁定的是什么，在 2.1 小節(jié)的案例中，我們的 value 就是一個(gè)數(shù)字。
expression：字符串形式的指令表達(dá)式。例如 v-my-directive="1 + 1" 中，表達(dá)式為 "1 + 1"。
arg：傳給指令的參數(shù)，可選。例如v-hasPermission:[name]="'zhangsan'" 中，參數(shù)為 "name"。
- vnode：Vue 編譯生成的虛擬節(jié)點(diǎn)。
- oldVnode：上一個(gè)虛擬節(jié)點(diǎn)，僅在 update 和 componentUpdated 鉤子中可用。
除了 el 之外，其它參數(shù)都應(yīng)該是只讀的，切勿進(jìn)行修改。如果需要在鉤子之間共享數(shù)據(jù)，建議通過(guò)元素的 dataset 來(lái)進(jìn)行。
2.4 動(dòng)態(tài)參數(shù)
有一種動(dòng)態(tài)參數(shù)，這里也和小伙伴們分享下。正常情況下，我們自定義指令時(shí)傳遞的參數(shù)都是通過(guò) binding.value 來(lái)獲取到的，不過(guò)在這之外還有一種方式就是通過(guò) binding.arg 獲取參數(shù)。
我舉一個(gè)簡(jiǎn)單例子，假設(shè)我們上面這個(gè) onceClick 指令，默認(rèn)的時(shí)間單位時(shí)毫秒，假設(shè)現(xiàn)在想給時(shí)間設(shè)置單位，那么我們就可以這樣寫：
const app = createApp(App);
app.directive('onceClick',{
mounted(el, binding, vnode) {
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled = true;
let time = binding.value;
if (binding.arg == "s") {
time = time * 1000;
}
setTimeout(() => {
el.disabled = false;
}, time);
}
});
}
})
在自定義指令的時(shí)候，獲取到 binding.arg 的值，這樣就可以知道時(shí)間單位了，在使用該指令的時(shí)候，方式如下：
<button v-onceClick:[timeUnit]="10" @click="btnClick">ClickMe</button>
<script>
import {ref} from 'vue';
export default {
name: "MyVue01",
setup() {
const timeUnit = ref('s');
return {timeUnit}
}
}
</script>
timeUnit 是一個(gè)提前定義好的變量。
3. 自定義權(quán)限指令
好啦，有了上面的基礎(chǔ)知識(shí)，接下來(lái)就來(lái)看我們本文的主題，自定義權(quán)限指令，我寫一個(gè)簡(jiǎn)單的例子大家來(lái)看下：
const usersPermissions = ['user'];
app.directive('hasPermission', {
mounted(el, binding, vnode) {
const {value} = binding;
let f = usersPermissions.some(p => {
return p.indexOf(value) !== -1;
});
if (!f) {
el.parentNode && el.parentNode.removeChild(el);
}
}
})
usersPermissions 表示當(dāng)前用戶所具備的權(quán)限，正常該數(shù)據(jù)應(yīng)該是從服務(wù)端加載而來(lái)，但是我這里簡(jiǎn)單起見(jiàn)，就直接定義好了。
具體的邏輯很簡(jiǎn)單，先從 binding 中提取出 value 的值，這就是當(dāng)前控件所需要的權(quán)限，然后遍歷 usersPermissions 用一個(gè) some 函數(shù)，去查看 usersPermissions 中是否有滿足條件的值，如果沒(méi)有，說(shuō)明當(dāng)前用戶不具備展示該組件所需要的權(quán)限，那么就要隱藏這個(gè)組件，隱藏的方式就是獲取到當(dāng)前組件的父組件，然后從父組件中移除當(dāng)前組件即可。
這是一個(gè)全局的指令，定義好之后，我們就可以在組件中直接使用了：
<button @click="btnClick" v-hasPermission="['user:delete']">刪除用戶</button>
