vue自定义指令

前置内容

可以使用v-directive注册自定义指令，要想自定义指令的功能，需要先了解指令定义对象的钩子函数和钩子函数参数（参考官网内容）

钩子函数

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• unbind：只调用一次，指令与元素解绑时调用。

钩子函数参数

钩子函数参数有el、binding、vnode、oldVnode四个，其中binding参数是一个对象，里面还有其他的属性，如下：

• el：指令所绑定的元素，可以用来直接操作 DOM。

• binding：一个对象，包含以下 property：

  • name：指令名，不包括 v- 前缀。
  • value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
  • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  • expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
  • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
  • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

• vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。

• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

应用

自定义v-hasPermi指令，实现根据用户权限控制按钮的显隐(参考若依框架)

1、在src下创建directive/index.js

const install = function(Vue) {
  Vue.directive('hasPermi', {
    inserted(el, binding, vnode) {
		// 获取指令的值 ["add"]
        const { value } = binding 
		// 获取用户所有的权限，登录时存入vuex中
        const permissions = store.getters && store.getters.permissions 
  
        if (value && value instanceof Array && value.length > 0) {
            const permissionFlag = value
        	// 判断用户的权限列表里是否有指令value的值
            const hasPermissions = permissions.some(permission => {
              return permissionFlag.includes(permission)
            })
        	// el为该指令所在的dom，没有权限则移除该dom
            if (!hasPermissions) {
              el.parentNode && el.parentNode.removeChild(el)
            }
        } else {
            throw new Error('')
        }
      }	
  })	
}
export defalut install

实现该自定义指令主要用到了el和value两个属性；

2、在main.js注册

import directive from './directive'
Vue.use(directive)

3、使用

// 用户有add权限标识，则会显示新增按钮，否则不显示
<el-button type="primary" @click="handleAdd" v-hasPermi="['add']">新增</el-button>