vue directive 按钮权限问题优化

• 问题

项目中存在多种角色,并且在多个页面中,多个按钮需要根据不同角色进行权限控制.通过v-if导致里的代码显得臃肿.当权限发生改变时,维护起来就变得麻烦了.通过自定义指令,将按钮权限统一处理.

• 新建permission.js,代码如下

   const Permission = {
    install(Vue){
      console.log(Vue)
      Vue.directive('permission',{
        inserted(el,binding){
           const val = binding.value
           const white = ['juror','judge']
           if(!white.includes(val)){
             el.remove()
           }
        }
      })
    }
}
export default Permission

• Vue.use挂载指令

   import {Permission} from './directives'

• 使用

  import {Permission} from './directives'
  Vue.use(Permission)