Vue自定义指令之根据权限控制显示隐藏指令，自定义指令全局注册和局部注册

• vue自定义指令之根据权限控制显示隐藏指令
• vue自定义指令全局注册和局部注册
• 指令生命周期

---

根据权限控制显示隐藏指令

首先要在==src/directives/==文件夹下新建一个power.js文件：

let authList = ['save','edit',......] // 可访问的权限列表

const power = {
    
    
  // 指令的定义
  inserted: function (el, binding) {
    
    
    if (!binding.value) {
    
     return }
    let value = `${
      
      binding.value}`
    if (!authList.includes(value)) {
    
    
      el.parentNode && el.parentNode.removeChild(el)
    }
  }
}

export default power

然后在要使用该指令的地方引入指令：

import {power} from ‘@/directives/power.js’

在组件内部注册指令：

directives: { power },

computed: {…

最后在要控制该权限的组件代码上绑定该指令：

<el-button v-power="'save'" type="primary" plain @click="save">保存</el-button>

— 补充：

如果要全局注册指令可以用：

Vue.directive('focus', {
  	// el为dom元素
  	inserted: function (el) {
    	// 自动获取元素焦点
    	el.focus();
 	}
});

自定义指令生命周期：

• bind: function (el, binding, vnode) {
  el.style[‘color’] = binding.value
  }, // 只调用一次，指令第一次绑定到元素时候调用，用这个钩子可以定义一个绑定时执行一次的初始化动作。
• inserted: function () {}, // 被绑定的元素插入父节点的时候调用(父节点存在即可调用，不必存在document中)
• update: function () {}, // 被绑定与元素所在模板更新时调用，而且无论绑定值是否有变化，通过比较更新前后的绑定值，忽略不必要的模板更新
• componentUpdated: function () {}, // 被绑定的元素所在模板完成一次更新更新周期的时候调用
• unbind: function () {} // 只调用一次，指令元素解绑的时候调用