vue通过自定义指令控制按钮的权限

1、store/index.js：

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

2、directives/has.js：

export default {
  inserted(el, bindings, vnode) {
    const btnVal = bindings.value
    const boolean = vnode.context.$store.state.buttonPermission[btnVal]
    !boolean && el.parentNode.removeChild(el)
  }
}

3、使用指令

<template>
  <div id="app">
    <button v-has="'add'">添加</button>
    <button v-has="'edit'">编辑</button>
    <button v-has="'delete'">删除</button>
  </div>
</template>
<script>
import has from '@/directives/has'
export default {
  directives:{has}
}
</script>

　　将按钮的英文传入到指令中，在指令的回调中将该按钮在vuex中的状态（true/false）找到，如果是false，通过父级节点将该节点删除