vu使用自定义指令实现按钮权限

将button按钮权限存放在vuex中

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    Permissions: {
      add: true,
      edit: true,
      del: false
    }
  }
})

 has.js文件

export default {
    inserted(el,bindings,vnode) {
        // vue编译生成的虚拟节点，在context中可以获取到vuex中的值
        let btnPremissions = vnode.context.$store.state.Permissions

        let btnVal = bindings.value

        // 如果按钮权限为false，删除节点
        if(!btnPremissions[btnVal]) {
            el.remove()
        }
    }
}

 引入has文件并在directives中注册，在button上加上v-has使用

<template>
  <div>
    <h1>vue按钮权限控制</h1>
    <button v-has="'add'">添加</button>
    <button v-has="'del'">删除</button>
    <button v-has="'edit'">编辑</button>
  </div>
</template>
<script>
import has from '../directives/has'
export default {
  directives: {
    has
  }
}
</script>