VUE自定义指令，方法指令、权限指令，重点讲解方法指令（点击事件指令）

先附上自定义指令代码，然后解释 （大神只需要看关键代码）

 

自定义一个customDirectives.js

放到自己想放的目录（滑稽），我是决定在main.js全局引入，因为很多界面都要用，也可以用局部引入

const customDirectives = {}

function directives(Vue, options) {
  /**
   * 带权限ID参数的点击指令
   */
  Vue.directive('role-click', {
    inserted(el, binding, vNode) {
      /*第一次初始化点击事件*/
      roleClickChange(el, binding, vNode);
    },
    componentUpdated(el, binding, vNode) {
      /*数据更新后，更新点击事件，重新绑定参数（这一步操作是为了解决在调用时，传了自定义的动态参数，参数不更新问题）*/
      roleClickChange(el, binding, vNode);
    }
  })

  /**
   * 按钮权限指令
   */
  Vue.directive('role', {
    inserted(el, binding, vNode) {
      let isPermission = false;//是否有权限
      //获取权限值，可以通过指令直接传参，或者从一个自定义的属性获取值
      let number = binding.value;
      if(!number){
        number = (el.attributes['roleNum'] !== undefined && el.attributes['roleNum'].nodeValue !== undefined) ? el.attributes['roleNum'].nodeValue : '';
      }

      /*匹配权限*/
      let autoList = getPermissionList(vNode,number);
      if (autoList.length > 0) {
        isPermission = true;
        el.setAttribute('roleNum',autoList[0].permission_id);
      }
      /*如果没权限移除按钮*/
      if(!isPermission){
        el.parentNode.removeChild(el);
      }
    }
  })


  /**
   * 绑定 权限点击指令事件
   * @param el
   * @param binding
   * @param vNode
   */
  const roleClickChange = (el, binding, vNode) => {

    /*验证表达式是函数*/
    if (typeof binding.value !== 'function') {
      const compName = vNode.context.name; //获取组件名称
      //将警告传递给控制台
      let error = `[v-role-click:] provided expression '${binding.expression}' is not a function`
      if (compName) {
        error += `Found in component '${compName}' `
      }
      console.error(error)
    }

    /*执行点击*/
    el.onclick = function () {
      let module_id = getModuleId(vNode);//模块ID
      if(el.attributes['roleNum'] === undefined){
        console.error("[v-role-click:] 请给按钮设置权限值");
        return
      }

      let permission = {
        module_id: module_id,//模块id
        permission_id: el.attributes['roleNum'].nodeValue //按钮权限id
      };
      /*点击事件自动带回当前按钮的模块值和权限值*/
      binding.value(permission)
    }
  }

  /**
   * 过滤权限列表
   * @param vNode
   * @param number 按钮权限标识
   * @returns {[]}
   */
  const getPermissionList = (vNode,number) => {
    let autoList = [];

    /*注：我这里的权限列表是在登录成功后，动态加载到当前界面路由（$route）的meta里，通过vNode可以获取到按钮权限列表*/

    if (number !== null && number !== ''
      && vNode.context.$route.meta !== undefined
      && vNode.context.$route.meta.permission !== undefined
      && vNode.context.$route.meta.permission.permission_list !== undefined
      && vNode.context.$route.meta.permission.permission_list.length > 0) {
      /*获取当前界面权限列表*/
      let permission_list = [...vNode.context.$route.meta.permission.permission_list];
      /*过滤匹配权限*/
      autoList = permission_list.filter(obj => obj.permission_id === number)
    }
    return autoList
  }

  /**
   * 获取模块ID
   * @param vNode
   * @returns {string}
   */
  const getModuleId = (vNode) =>{
    let module_id = "";
    /*模块id在登录成功后，动态加载路由时，注入到各个路由的meta中，在这里就能取到对应界面的模块id*/
    if (vNode.context.$route.meta !== undefined
      && vNode.context.$route.meta.permission !== undefined) {
      module_id = vNode.context.$route.meta.permission.module_id;
    }
    return module_id;
  }
}


customDirectives.install = directives
export { customDirectives }

这里的权限的判断和回传的值，大家自己修改为自己项目中的逻辑，重点是思路和写法

在main.js引入

import { customDirectives } from './config/customDirectives'//自定义指令
Vue.use(customDirectives) //注册自定义指令

使用方法

roleNum：传入按钮唯一标识，用作权限匹配，如果要使用v-role-click点击事件，就必须加roleNum属性或者v-role，v-role必须携带权限标识

v-role：加上这个指令，就表示要做权限效验，没有权限就不显示按钮，可以传入按钮唯一标识（roleNum的值），例：v-role="001"，这样使用的场景是可以把rowNum属性合并到一起，但是如果不携带权限值，就必须加roleNum属性

v-role-click：自定义的点击事件，可替代@click使用，会回传当前按钮的权限值和当前界面的模块值，必须加roleNum属性或者v-role（须携带权限标识）