背景：
目前零碎外面有一些页面须要依据用户的角色不同，显示不同的按钮，如果用户调配了该按钮权限就展现，否则没有调配权限的按钮就不展现。
实现原理
在 el-button 按钮上设置标签数值，利用 vue 的指令性能获取按钮实例对象和按钮上绑定的标签数值，与从接口拿到的按钮权限数据进行匹配，如果匹配胜利，证实用户领有该按钮的应用权限，如果发现没有应用权限，则在指令处理函数中编写代码移除该按钮，界面上就看不到该按钮了。
实现代码
指令实现：src/directive/hasPermission.js
import store from '@/store'export default { hasPermission: {// inserted：被绑定元素插入父节点时调用 (仅保障父节点存在，但不肯定已被插入文档中)。 inserted(el, binding, vnode) { const { value } = binding const all_permission = "*:*:*"; const permissions = store.getters && store.getters.permissions if (value && value instanceof Array && value.length > 0) { const permissionFlag = value const hasPermissions = permissions.some(permission => { return all_permission === permission || permissionFlag.includes(permission) }) if (!hasPermissions) { el.parentNode && el.parentNode.removeChild(el) // 或者：el.style.display = 'none' } } else { throw new Error(`请设置操作权限标签值`) } } }}指令注册：main.js
// 多个指令的应用Vue.use((vue) => { ((requireContext) => { const arr = requireContext.keys().map(requireContext) ; (arr || []).forEach((directive) => { directive = directive.__esModule && directive.default ? directive.default : directive Object.keys(directive).forEach((key) => { vue.directive(key, directive[key]) }) }) })(require.context('./directives', false, /^\.\/.*\.js$/))})页面应用
在具体的页面，按钮中只需援用v-has-permission指令，赋值判断即可：
<el-button type="primary" v-has-permission="'page1:add'">新增</el-button>