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è)容易的事情，肯定得寫(xiě)方法。所以，如果能用一個(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 中，也可以這樣寫(xiě)：

　　這里我自定義了一個(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 全局指令

　　全局指令我們一般寫(xiě)在 main.js 中，或者寫(xiě)一個(gè)單獨(dú)的 js 文件然后在 main.js 中引入，下面的例子是直接寫(xiě)在 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ù)。

　　更多關(guān)于“Java培訓(xùn)”的問(wèn)題，歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓(xùn)經(jīng)驗(yàn)，課程大綱更科學(xué)更專業(yè)，有針對(duì)零基礎(chǔ)的就業(yè)班，有針對(duì)想提升技術(shù)的好程序員班，高品質(zhì)課程助力你實(shí)現(xiàn)java程序員夢(mèng)想。