站長資訊網
        最全最豐富的資訊網站

        Vue3中如何自定義指令?代碼講解

        Vue3中如何自定義指令?下面本篇文章就來手把手教大家在 Vue3 中自定義指令,希望對大家有所幫助!

        Vue3中如何自定義指令?代碼講解

        TienChin 項目前端是 Vue3,前端有這樣的一個需求:有一些前端頁面上的按鈕要根據用戶的權限來決定是否展示出來,如果用戶具備相應的權限,那么就展示對應的按鈕;如果用戶不具備對應的權限,那么按鈕就隱藏起來。大致上就這樣一個需求。

        看到這個需求,可能有小伙伴首先想到用 v-if 指令,這個指令確實也能做,但是,由于用戶具備的權限一般來說可能是多個,甚至可能還有通配符,所以這個比對并不是一個容易的事情,肯定得寫方法。。。所以,如果能用一個指令來實現這個功能,那么就會顯得專業很多了。

        說干就干,我們來看看 Vue3 中如何自定義指令。(學習視頻分享:vue視頻教程)

        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 項目視頻中也會和大家分享這塊的內容,敬請期待。

        (學習視頻分享:web前端開發、編程基礎視頻)

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 亚洲国产精品嫩草影院在线观看 | 精品一区二区无码AV| 熟女精品视频一区二区三区| 精品日韩在线视频一区二区三区| 国产在线精品网址你懂的| 无码日韩精品一区二区免费暖暖| 国产亚洲精品激情都市| 精品一区二区久久久久久久网站| 国内精品久久久久久99| 亚洲精品乱码久久久久久按摩| 麻豆国产高清精品国在线| 国产精品v欧美精品v日韩| 日本欧美韩国日本精品| 99国产精品国产精品九九| 欧美性videos高清精品| 亚洲精品无码专区2| 欧美成人精品一区二三区在线观看| 国产精品99久久不卡| 一级成人精品h| 奇米精品一区二区三区在线观看| 国产精品综合色区在线观看| 久久夜色精品国产欧美乱| 色欲国产麻豆一精品一AV一免费| 正在播放酒店精品少妇约| 亚洲精品视频在线看| 亚洲欧美一级久久精品| 亚洲精品国产自在久久| 日韩欧美一区二区三区中文精品 | 99久久99久久精品免费看蜜桃| 麻豆亚洲AV永久无码精品久久| 日本五区在线不卡精品| 久久久久久亚洲精品不卡| 蜜臀av无码人妻精品| 亚洲?V无码乱码国产精品| 日韩欧美国产精品第一页不卡| 午夜精品久久久内射近拍高清| 亚洲av无码国产精品色在线看不卡 | 91精品国产高清久久久久久国产嫩草| 久久777国产线看观看精品| 国内精品免费视频精选在线观看 | 国产精品视频九九九|