除了核心指令（v-model和v-for）等外，Vue也允许我们自定义指令。

语法:

Vue.directive( ‘自定义指令名字’ , { 配置项 } )

这个focu就是自己取得名字

1. 定义

  1. // 注册一个全局的指令
  2. Vue.directive('focus', {      // 这里取得focus 是自定义名字
  3.   inserted: function(el, binding) {
  4.     // 这里的el相当于是 DOM  元素  可以操作它
  6.     el.focus()   // 自动获取焦点
  7.     el.style.background = binding.value
  9.     console.log('focus', el, binding)
  10.   }
  11. })

2.使用格式:

  1. <input v-foucs="'xxxx'" />  xxx指的就是binding.value

小结:

el: 指的是DOM 元素 ,是可以操作它的

binding : 指的是一个对象,包含很多属性, 里面有name,还有vlaue 等等 很多 ,

其中value : 指的是 指令绑定的值

binding.value 指的是v-自定义名字=’xxx’ 后面的xxx

解决按钮级别的权限验证

1. 目标:

  1.        员工A和员工B都可以访问同一个页面（以员工管理为例），但是员工A可以导出excel按钮，员工B就不可以导出excel按钮

2. 思路:

  1.         用户登陆成功后，用户可以访问的按钮级别权限保存在points数组中。而这个数据我们是保存在vuex中的，所以，就可以在项目的任意地方来中访问。<br />           如果某个按钮上的标识在points出现，则可以显示出来

用它来做按钮级别权限控制

举例:

1. 定义:

  1. // 注册一个全局自定义指令 `v-allow`
  2. Vue.directive('allow', {
  3.   inserted: function(el, binding) {
  4.     // 从vuex中取出points,      // employees 就是存储在points里面的标识
  5.     const points = store.state.user.userInfo.roles.points
  6.     // 如果points有binding.value则显示
  7.     if (points.includes(binding.value)) {
  8.       // console.log('判断这个元素是否会显示', el, binding.value)
  9.     } else {
  10.       el.parentNode.removeChild(el)
  11.       // el.style.display = 'none'
  12.     }
  13.   }
  14. })

2. 使用:

  1. <el-button  v-allow="'employees'" >导入excel</el-button>
  1.                 ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21762447/1625491761619-f020a214-47c7-4f63-9b94-b59056621cbc.png#clientId=u34453909-079d-4&from=paste&height=382&id=u9272cb8a&margin=%5Bobject%20Object%5D&name=image.png&originHeight=382&originWidth=455&originalType=binary&ratio=1&size=29286&status=done&style=none&taskId=u69462b5e-65a5-4289-8bca-5d4e7cff2fb&width=455)