用Vue中的自定义指令来控制按钮级别权限点验证

权限应用-按钮级控制-自定义指令

指令： v-for, v-if…

自定义指令：自己定义的指令，因为本身指令不够用，所以我们需要自已去定义。

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

复习一下自定义指令

注册格式
在main.js中注册全局自定义指令

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时inserted会自动执行
  inserted: function(el, binding) {
    // v-focus="'abc'"  ===> binding.value = 'abc'
    // binding.value 是指令绑定的内容
    console.log('focus.... binding', binding.value)
    // 聚焦元素
    el.focus()
  }
})

使用格式如下

<input v-foucs="'xxxx'" />

解决按钮级别的权限验证

使用背景：后台管理系统项目中控制每个角色不同的员工登录后看到的功能也不同，在控制页面内的按钮级别的权限功能是否显示时，用到了自定义指令来控值是否显示这个按钮功能

// 在main.js中注册一个全局自定义指令 `v-allow`
Vue.directive('allow', {
  inserted: function(el, binding) {
    // 从vuex中取出points,
    const points = store.state.user.userInfo.roles.points
    // 如果points有binding.value则显示
    if (points.includes(binding.value)) {
      // console.log('判断这个元素是否会显示', el, binding.value)
    } else {
      el.parentNode.removeChild(el)
      // el.style.display = 'none'
    }
  }
})