在很多情况下，程序会根据用户的权限，对按钮的显示和隐藏有一定的限制

例如：页面上现在有三个按钮（添加，删除，修改），那现在后端返回的是（当前用户只对增加按钮有权限控制）即其余的按钮选项都不显示

情节交代清楚了，接下来我说一下我的思路

• 用户登陆之后就把对按钮的权限控制信息存到vuex中
• 写一个vue的自定义指令，根据指令中传入的信息(操作Dom的显示和隐藏)
• 在组件中注册这个自定义指令，并应用

vuex中的代码

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

Vue.use(Vuex)
const store=new Vuex.Store({
    state:{
        buttonPermission:{
            add:true,
            edit:false,
            delete:false
        }
    }
})
export default store

自定义指令中的代码

export const directives={
    has:{
        inserted:function(el,bindings,vnode){
            let btnValue=bindings.value;
            let boolean=vnode.context.$store.state.buttonPermission[btnValue]
            !boolean && el.parentNode.removeChild(el)
        }
    }
}

组件中的代码

<template>
  <div id="app">
    <h2>button-权限管理</h2>
    <button v-has="'add'">增加</button>
    <button v-has="'delete'">删除</button>
    <button v-has="'edit'">修改</button>
  </div>
</template>

<script>
import {directives} from './directives/has'
export default {
  name: 'App',
  directives
}
</script>