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'] !==