自定义指令

自定义指令

我们首先看一下VUE官网对于自定义指令的介绍，在我们需要创建一个自定义指令时

操作权限 指令的添加

1. 测试 内部指标配置 列表接口 指标公式 指标条件 查询version表中
2. 操作权限（按钮级）思路
3. 新增全局指令 通过指令的参数设置不同功能的按钮 binding.arg
4. 请求到当前用户角色的操作权限的列表 接口只对设置 但 关闭的操作权限取反后的列表进行返回
5. 获取到当前页路由地址 vnode.context.$route.path
6. 进入指令方法 通过对象的属性去匹配权限列表的值，对匹配上的值进行隐藏（因为列表中为关闭了权限的数据）

import store from '@/store'

/**
 * Action 权限指令
 * 指令用法：
 *  - 在需要控制 action 级别权限的组件上使用 v-action:[method] , 如下：
 *    添加用户
 *    删除用户
 *    修改
 *
 *  - 当前用户没有权限时，组件上使用了该指令则会被隐藏
 *  - 当后台权限跟 pro 提供的模式不同时，只需要针对这里的权限过滤进行修改即可
 *
 */

const action = Vue.directive('action', {
  // 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置，比如样式设置等。
  bind: (el, binding) => {
    // el Dom 元素
    // binding: {
    //   name: "copy"  指令名
    //   modifiers: {} // 修饰符的对象 例如 v-copy:foo.bar 修饰符对象为{ bar: true }
    //   def: { inserted: ƒ, bind: ƒ }
    //   rawName: "v-copy:a"  //指令整体
    //   arg: "a" 传给指令的参数 v - copy: a
    //   expression: "day" 字符串形式的指令表达式
    //   value: 指令的绑定值，例如v-copy="1 + 1"中，绑定值为2
    // }
  },
  //  被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
  // 这里一般执行和JS行为有关的操作，比如用来给元素添加一些监听事件
  inserted: function (el, binding, vnode) {
    const actionName = binding.arg
    const elVal = vnode.context.$route.path
    const btnAuth = store.getters.btnAuth
    const permissionList = []
    if(btnAuth[elVal] && btnAuth[elVal].length) {
      btnAuth[elVal].forEach(item => {
        permissionList.push(item.pageKey)
      })
    }
    if(permissionList.includes(actionName)) {
      el.style.display = 'none'
    }
  }
  // 所在组件的VNode更新时调用，但是可能发生在其子VNode更新之前，可多次触发。
  // 指令的值可能发生了变化，也可能未变化，我们可以通过比较新旧VNode来做具体判断。
  update(el,binding,vnode,oldVnode){
    // vnode: {
      // tag，当前节点标签名，这里需要注意的是文本也视为一个vnode，保存在children中，并且其tag值为undefined
      // data，当前节点数据（VNodeData类型），class、id等HTML属性都放在了data中
      // children，当前节点子节点
      // text，节点文本信息
      // elm，当前节点对应的真实DOM节点
      // context，当前节点上下文，指向了Vue实例
      // parent，当前节点父节点
      // componentOptions，组件配置项
    // }
   

  },
  // 指令所在组件的 VNode 及其子 VNode 全部更新后调用
  componentUpdated(el,binding,vnode,oldVnode){},
  // 只调用一次，指令与元素解绑时调用
  unbind(el,binding,vnode,oldVnode,status){}
  },

注意

这里需要注意的是，在钩子函数中使用this关键字无法找到Vue实例，需要使用 vnode.context