vue: 自定义指令

说明:

• 由于 vue 中的系统指令有限, 就不可避免的需要 我们自己去扩展一些指令, 来满足项目需求;

分类:

1. 全局自定义指令: 在所有的 vue 实例中都能使用

• 说明:

  1. 定义在 vue 实例之前, 使用 Vue.directive 来定义;

  2. 在 inserted() 方法中 实现自定义指令的逻辑;

  3. 在 dom元素 中, 使用 设置的自定义指令: v-指令名 ;

      /** 
        参数1: 指令名称
        参数2: 对象结构, 内部包好一个 inserted() 方法
            - inserted( )方法有一个 el 参数, 就是设置的指令要进行操作的 dom 元素
       */
      Vue.directive('指令名', {
          inserted: function(el) {
              ... 实现自定义指令的逻辑
          }
      })
     

2. 局部自定义指令: 只能在当前定义的 vue 实例中使用

• 说明:

  1. 在 vue 实例中, 添加一个 directive 属性, 对象结构;

  2. 创建一个自定义指令: 键值对形式;

  3. 在inserted() 方法中 完成响应的逻辑操作;

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

扩展: 封装一个鉴权指令 插件: plugins/auth.js

• 说明: 该指令可用于功能点鉴权, 比如按钮部分, 如果该用户没有操作某个按钮的权限, 那么该按钮不会显示;

    import store form '@/store';
  
    /** 判断 某一个数组 是否 包含 另一个数组中的某一项, 这样设置的优点在于, 你完全可以根据 角色 来进行鉴权
        例如:  
            修改  表示 管理员 和 用户 都拥有这个按钮的权限
            修改  表示 只要用户个人信息中的 permisson中含有 'user001', 就拥有这个 修改用户按钮的权限
    */
    function includeArray (list1, list2) {
        let status = false;
        list2.forEach(item => {
            if (list1.includes(item)) status = true;
        });
        return status;
    }        
  
    /** 说明: 
      如果管理员 对于 任何一个用户对 每个页面 配置不同的 权限, 而不仅仅是通过 角色 进行控制权限, 那么:
          - 在登录后, 获取个人信息时, 需要返回该用户拥有的 所有按钮 权限的 数据, 暂时定义: permission (数组类型), 里面保存的是 各个按钮的权限 
              permission: ['user001', 'user002']  表示用于 修改用户按钮 和 删除用户按钮 的权限
          - 登录后将获取到的个人信息保存在 vuex中: 
              store/modules/admin/user.js  state/info,  info.permission就是该用户 拥有的所有按钮的权限 
    */
    const hasAccess = {
        install (Vue, options) {
            // 自定义指令:          
            Vue.directive('auth', {
                inserted (el, binding, vnode) {
                    const { value } = binding;
                    // 获取该用户所有按钮的权限
                    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';
    // 将自定义权限指令 注册为 全局自定义指令; 使用时: 修改
    Vue.use(hasAccess);