vue项目中按钮权限自定义指令

在Vue项目中，我们可以通过自定义指令来实现按钮权限控制。

以下是一个简单的实现思路：

1. 首先，在Vue中创建一个自定义指令：v-permission

Vue.directive('permission', {
inserted: function (el, binding, vnode) {
const { value } = binding;
const permissions = vnode.context.$store.getters.permissions;
if (!permissions.includes(value)) {
el.parentNode.removeChild(el);
}
}
})

2. 在组件中使用v-permission指令，并传递按钮对应的权限值

<button v-permission="'addButton'">添加用户</button>

3. 在store中维护用户的权限列表，根据用户的权限列表来决定是否显示相应的按钮

// 定义一个全局变量 permissions
state: {
permissions: []
},
// 在登录成功后，保存用户的权限列表
mutations: {
setPermissions(state, permissions) {
state.permissions = permissions;
}
},
// 定义一个getter，用于获取用户的权限列表
getters: {
permissions: state => state.permissions
}

以上就是一个简单的实现思路，通过自定义指令和全局状态管理，我们可以非常方便地实现按钮权限控制。