一、自定義指令—鉤子函數(shù)

自定義指令有五個(gè)生命周期（也叫鉤子函數(shù)），分別是：bind,inserted,update,componentUpdated,unbind。

• bind：只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用。用這個(gè)鉤子函數(shù)可以定義一個(gè)綁定時(shí)執(zhí)行一次的初始化設(shè)置。（ bind 時(shí)父節(jié)點(diǎn)為null，因?yàn)?bind 是在 dom 樹繪制前調(diào)用）
• inserted：被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用（僅保證父節(jié)點(diǎn)存在，但不一定已被插入文檔中，在 dom 樹繪制后調(diào)用）。
• update：被綁定于元素所在的模板 vNode 更新時(shí)調(diào)用，但是可能發(fā)生在其子 vNode
• 更新之前。指令的值可能發(fā)生了改變，也可能沒有。可以通過比較更新前后的綁定值，來忽略不必要的模板更新。
• componentUpdated：被綁定元素所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。
• unbind：只調(diào)用一次，指令與元素解綁時(shí)調(diào)用。

二、鉤子函數(shù)參數(shù)？

鉤子函數(shù)參數(shù)說明，自定義指令中傳遞的常用參數(shù)：

el： 指令所綁定的元素，可以用來直接操作 DOM。

binding： 一個(gè)對象，包含指令的很多信息。如下：

• name：指令名，不包括 v- 前綴。
• value：指令的綁定值，例如：v-my-directive=“1 + 1” 中，綁定值為 2。
• oldValue：指令綁定的前一個(gè)值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
• expression：字符串形式的指令表達(dá)式。例如 v-my-directive=“1 + 1” 中，表達(dá)式為 “1 + 1”。
• arg：傳給指令的參數(shù)，可選。例如 v-my-directive:foo 中，參數(shù)為 “foo”。
• modifiers：一個(gè)包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。
• vnode：Vue編譯生成的虛擬節(jié)點(diǎn)。
• oldVnode：上一個(gè)虛擬節(jié)點(diǎn)，僅在 update 和 componentUpdated 鉤子中可用。

除了 el 之外，其它參數(shù)都應(yīng)該是只讀的。

三、全局自定義指令

實(shí)現(xiàn)原理

在 el-button 按鈕上設(shè)置標(biāo)簽數(shù)值，利用 vue的指令功能獲取按鈕實(shí)例對象和按鈕上綁定的標(biāo)簽數(shù)值，與從接口拿到的按鈕權(quán)限數(shù)據(jù)進(jìn)行匹配，如果匹配成功，證明用戶擁有該按鈕的使用權(quán)限，如果發(fā)現(xiàn)沒有使用權(quán)限，則在指令處理函數(shù)中編寫代碼移除該按鈕，界面上就看不到該按鈕了。

封裝組件

在 src 目錄下新建 directive 目錄，在目錄下新建 permission.js 文件：

代碼如下：

import Vue from 'vue';
// 檢測是否有權(quán)限
// 使用Vue.directive聲明自定義指令btn-key
export const permissions = Vue.directive('permission',{
    /**
     * inserted：被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用 
     * el：指令所綁定的元素，可以用來直接操作 DOM
     * binding.value：指令的綁定值，例如：v-directive="10" 中，綁定值為 10。
     */
    inserted(el,binding){
        let buttonKey = binding.value;
        // 代表某個(gè)元素需要通過權(quán)限驗(yàn)證
        if(buttonKey){
            let key = checkKey(buttonKey)
            if(!key){//沒有權(quán)限
                el.remove()  //刪除按鈕
            }
        }else{
            throw new Error('缺少唯一指令')
        }
    },
}) 
 
// 檢測傳入的元素key是否可以顯示
function checkKey(key) {
    // 獲取權(quán)限數(shù)組
    let permissionData = sessionStorage.getItem("permissionData") ? sessionStorage.getItem("permissionData") : [] ;
    //如果傳入的元素key不在權(quán)限數(shù)組里，則不可顯示
    let index = permissionData.indexOf(key)
    if(index > -1) {
        return true;
    }else{
        return false;
    }
}
 

引入組件

在入口文件 src\main.js 里面引入自定義指令：

import permission './directive/permission'
Vue.use(permission)

使用組件

在使用的頁面，按鈕中只需引用v-operate指令，賦值判斷即可：

<el-button @click='delHandle' type="primary" v-permission="'delete'">刪除</el-button>

到此這篇關(guān)于Vue自定義指令實(shí)現(xiàn)按鈕級的權(quán)限控制的示例代碼的文章就介紹到這了,更多相關(guān)Vue 按鈕權(quán)限控制內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！ 

最新評論