說明:

• 由于 vue 中的系統(tǒng)指令有限, 就不可避免的需要 我們自己去擴(kuò)展一些指令, 來滿足項(xiàng)目需求;

分類:

1. 全局自定義指令: 在所有的 vue 實(shí)例中都能使用

• 說明:

  1. 定義在 vue 實(shí)例之前, 使用 Vue.directive 來定義;

  2. 在 inserted() 方法中 實(shí)現(xiàn)自定義指令的邏輯;

  3. 在 dom元素 中, 使用 設(shè)置的自定義指令: v-指令名 ;

      /** 
        參數(shù)1: 指令名稱
        參數(shù)2: 對象結(jié)構(gòu), 內(nèi)部包好一個 inserted() 方法
            - inserted( )方法有一個 el 參數(shù), 就是設(shè)置的指令要進(jìn)行操作的 dom 元素
       */
      Vue.directive('指令名', {
          inserted: function(el) {
              ... 實(shí)現(xiàn)自定義指令的邏輯
          }
      })
     

2. 局部自定義指令: 只能在當(dāng)前定義的 vue 實(shí)例中使用

• 說明:

  1. 在 vue 實(shí)例中, 添加一個 directive 屬性, 對象結(jié)構(gòu);

  2. 創(chuàng)建一個自定義指令: 鍵值對形式;

  3. 在inserted() 方法中 完成響應(yīng)的邏輯操作;

  4. 使用自定義指令: v-指令名 ;

      <script>  
        /** 某個 .vue頁面中 */
        export default {
            data() {},
            /** 設(shè)置 自動獲取輸入框焦點(diǎn) 自定義指令 */
            directive: {
                focus: {
                    inserted: function(el) {
                        el.focus();
                    }
                }
            }
        }
      </script>
     

擴(kuò)展: 封裝一個鑒權(quán)指令 插件: plugins/auth.js

• 說明: 該指令可用于功能點(diǎn)鑒權(quán), 比如按鈕部分, 如果該用戶沒有操作某個按鈕的權(quán)限, 那么該按鈕不會顯示;

    import store form '@/store';
  
    /** 判斷 某一個數(shù)組 是否 包含 另一個數(shù)組中的某一項(xiàng), 這樣設(shè)置的優(yōu)點(diǎn)在于, 你完全可以根據(jù) 角色 來進(jìn)行鑒權(quán)
        例如:  
            <Button v-auth="['admin', "user"]">修改</button>  表示 管理員 和 用戶 都擁有這個按鈕的權(quán)限
            <Button v-auth="['user001']">修改</button>  表示 只要用戶個人信息中的 permisson中含有 'user001', 就擁有這個 修改用戶按鈕的權(quán)限
    */
    function includeArray (list1, list2) {
        let status = false;
        list2.forEach(item => {
            if (list1.includes(item)) status = true;
        });
        return status;
    }        
  
    /** 說明: 
      如果管理員 對于 任何一個用戶對 每個頁面 配置不同的 權(quán)限, 而不僅僅是通過 角色 進(jìn)行控制權(quán)限, 那么:
          - 在登錄后, 獲取個人信息時, 需要返回該用戶擁有的 所有按鈕 權(quán)限的 數(shù)據(jù), 暫時定義: permission (數(shù)組類型), 里面保存的是 各個按鈕的權(quán)限 
              permission: ['user001', 'user002']  表示用于 修改用戶按鈕 和 刪除用戶按鈕 的權(quán)限
          - 登錄后將獲取到的個人信息保存在 vuex中: 
              store/modules/admin/user.js  state/info,  info.permission就是該用戶 擁有的所有按鈕的權(quán)限 
    */
    const hasAccess = {
        install (Vue, options) {
            // 自定義指令:          
            Vue.directive('auth', {
                inserted (el, binding, vnode) {
                    const { value } = binding;
                    // 獲取該用戶所有按鈕的權(quán)限
                    const assess = store.state.admin.user.info.permission;
             
                    if(value && value insanceOf Array && value.length && access && access.length) {
                        const isPermission = includeArray(value, access);
                        if (!isPermission) {
                            el.parentNode && el.parentNode.removeChild(el);
                        }
                    }
                })
            }
        }    
    }
    
    export default hasAccess;
  

在 main.js 中:

    import hasAccess from '@/plugins/auth';
    // 將自定義權(quán)限指令 注冊為 全局自定義指令; 使用時: <Button v-auth="['gps001']">修改</button>
    Vue.use(hasAccess);