vue-按钮权限控制

store->-index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    buttonPermission:{
      add : true,
      update: false,
      delete:true

    }
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

About1.vue

<template>
  <div class="about">
    <button v-has="'update'">编辑</button>
    <button v-has="'add'">添加</button>
    <button v-has="'delete'">删除</button>
  </div>
</template>

<script>
  import has from '../directives/has'
  export default {
    directives: {
      has
    }
  }
</script>
<style scoped>

</style>

directives->has.js

import store from '@/store'

export default {
    inserted(el,bindings,vNode) {
        let btnPermissionValue = bindings.value;
        let boolean = store.state.buttonPermission[btnPermissionValue];
        !boolean && el.parentNode.removeChild(el);
    }
}