Vue3中如何自定義指令？程式碼講解

TienChin 專案前端是 Vue3，前端有這樣的一個需求：有一些前端頁面上的按鈕要根據使用者的許可權來決定是否展示出來，如果使用者具備相應的許可權，那麼就展示對應的按鈕；如果使用者不具備對應的許可權，那麼按鈕就隱藏起來。大致上就這樣一個需求。

看到這個需求，可能有小夥伴首先想到用 v-if 指令，這個指令確實也能做，但是，由於使用者具備的許可權一般來說可能是多個，甚至可能還有萬用字元，所以這個比對並不是一個容易的事情，肯定得寫方法。。。所以，如果能用一個指令來實現這個功能，那麼就會顯得專業很多了。

說幹就幹，我們來看看 Vue3 中如何自定義指令。（學習視訊分享：）

1. 成果展示

我們先來看看實現自定義指令最終的使用方式：

<button @click="btnClick" v-hasPermission="['user:delete']">刪除使用者</button>

小夥伴們看到，這個 v-hasPermission 就是我們的自定義指令，如果當前使用者具備 user:delete 許可權，這個按鈕就會展示出來，如果當前使用者不具備這個許可權，這個按鈕就不會展示出來。

2. 指令基礎

先要和小夥伴們說一下，Vue2 和 Vue3 在自定義指令上有一些差異，並不完全一致，下面的介紹主要是針對 Vue3 的介紹。

我先來和小夥伴們分享一下我們具體是怎麼做的，然後在講解程式碼的時候再來和大家說說各個引數的含義。

2.1 兩種作用域

自定義指令可以定義全域性的，也可以定義區域性的。

在正式開搞之前，小夥伴們需要先明白，自定義指令有兩種作用域，一種是區域性的自定義指令，還有一種是全域性的自定義指令。區域性的自定義指令就只能在當前 .vue 檔案中使用，全域性的則可以在所有的 .vue 檔案中使用。

2.1.1 區域性指令

直接在當前 .vue 檔案中定義即可，如下：

directives: {
  focus: {
    // 指令的定義
    mounted(el) {
      el.focus()
    }
  }
}

不過，在 Vue3 中，也可以這樣寫：

<template>
    <p>
        <button v-onceClick="10000" @click="btnClick">ClickMe</button>
    </p>
</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>

這裡我自定義了一個名叫 onceClick 的指令，給一個 button 按鈕加上這個指令之後，可以設定這個 button 按鈕在點選多久之後，處於禁用狀態，防止使用者重複點選。

小夥伴們看，這個指令的執行邏輯其實很簡單，el 相當於新增了這個指令的元素，監聽該元素的點選事件，如果點選該元素時，該元素不是處於禁用狀態，那麼就設定該元素為禁用，給一個定時任務，到期後使該元素變為可用。這裡邊具體的引數，鬆哥下面會跟大家詳細介紹。

不過這只是一個區域性指令，只能在當前 .vue 檔案中使用，我們也可以定義全域性指令，這樣就可以在所有的 .vue 檔案中使用了。

2.1.2 全域性指令

全域性指令我們一般寫在 main.js 中，或者寫一個單獨的 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);
            }
        });
    }
})

這樣，我們就可以隨時隨地去使用 v-onceClick 這個指令了。

可能小夥伴感覺比較疑惑，自定義指令時候的 mounted 以及這裡的引數都是咋回事，那麼接下來鬆哥就來和大家詳細介紹一下這些方法和引數。

2.2 七個勾點函數

在 Vue3 中，自定義指令的勾點函數主要有如下七種（這塊跟 Vue2 差異較大）：

• created：在繫結元素的 attribute 或事件監聽器被應用之前呼叫。在指令需要附加在普通的 v-on 事件監聽器呼叫前的事件監聽器中時，這很有用。
• beforeMount：當指令第一次繫結到元素並且在掛載父元件之前呼叫。
• mounted：在繫結元素的父元件被掛載後呼叫，大部分自定義指令都寫在這裡。
• beforeUpdate：在更新包含元件的 VNode 之前呼叫。
• updated：在包含元件的 VNode 及其子元件的 VNode 更新後呼叫。
• beforeUnmount：在解除安裝繫結元素的父元件之前呼叫
• unmounted：當指令與元素解除繫結且父元件已解除安裝時，只呼叫一次。

雖然勾點函數比較多，看著有點唬人，不過我們日常開發中用的最多的其實是 mounted 函數。

2.3 四個引數

這裡七個勾點函數，勾點函數中有回撥引數，回撥引數有四個，含義基本上和 Vue2 一致：

• el：指令所繫結的元素，可以用來直接操作 DOM，我們鬆哥說想實現一個可以自動判斷元件顯示還是隱藏的指令，那麼就可以通過 el 物件來操作 DOM 節點，進而實現元件的隱藏。

• binding：我們通過自定義指令傳遞的各種引數，主要存在於這個物件中，該物件屬性較多，如下屬性是我們日常開發使用較多的幾個：

  • name：指令名，不包括 v- 字首。
  • value：指令的繫結值，例如：v-hasPermission="['user:delete']" 中，繫結值為 'user:delete'，不過需要小夥伴們注意的是，這個繫結值可以是陣列也可以是普通物件，關鍵是看你具體系結的是什麼，在 2.1 小節的案例中，我們的 value 就是一個數位。
  • expression：字串形式的指令表示式。例如 v-my-directive="1 + 1" 中，表示式為 "1 + 1"。
  • arg：傳給指令的引數，可選。例如 v-hasPermission:[name]="'zhangsan'" 中，引數為 "name"。
• vnode：Vue 編譯生成的虛擬節點。
• oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 勾點中可用。

除了 el 之外，其它引數都應該是唯讀的，切勿進行修改。如果需要在勾點之間共用資料，建議通過元素的 dataset 來進行。

2.4 動態引數

有一種動態引數，這裡也和小夥伴們分享下。正常情況下，我們自定義指令時傳遞的引數都是通過 binding.value 來獲取到的，不過在這之外還有一種方式就是通過 binding.arg 獲取引數。

我舉一個簡單例子，假設我們上面這個 onceClick 指令，預設的時間單位時毫秒，假設現在想給時間設定單位，那麼我們就可以這樣寫：

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);
            }
        });
    }
})

在自定義指令的時候，獲取到 binding.arg 的值，這樣就可以知道時間單位了，在使用該指令的時候，方式如下：

<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 是一個提前定義好的變數。

3. 自定義許可權指令

好啦，有了上面的基礎知識，接下來就來看我們本文的主題，自定義許可權指令，我寫一個簡單的例子大家來看下：

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 表示當前使用者所具備的許可權，正常該資料應該是從伺服器端載入而來，但是我這裡簡單起見，就直接定義好了。

具體的邏輯很簡單，先從 binding 中提取出 value 的值，這就是當前控制元件所需要的許可權，然後遍歷 usersPermissions 用一個 some 函數，去檢視 usersPermissions 中是否有滿足條件的值，如果沒有，說明當前使用者不具備展示該元件所需要的許可權，那麼就要隱藏這個元件，隱藏的方式就是獲取到當前元件的父元件，然後從父元件中移除當前元件即可。

這是一個全域性的指令，定義好之後，我們就可以在元件中直接使用了：

<button @click="btnClick" v-hasPermission="['user:delete']">刪除使用者</button>

好啦，Vue3 自定義元件學會了沒？鬆哥在最近的 TienChin 專案視訊中也會和大家分享這塊的內容，敬請期待。

（學習視訊分享：、）

以上就是Vue3中如何自定義指令？程式碼講解的詳細內容，更多請關注TW511.COM其它相關文章！