VUE指令和pinia控制按钮权限示例详解
作者：垃圾简书_吃枣药丸
这篇文章主要为大家介绍了VUE指令和pinia控制按钮权限示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
权限state
import {defineStore} from "pinia/dist/pinia";
// 用户权限状态
export const userPermission = defineStore('userPermission', {
// 状态
state: () => {
return {
permissions: ['add', 'delete']
}
},
actions: {},
// 状态的一些方法，类似于计算属性
getters: {}
})编写指令
import {userPermission} from "./state/pinia-state";
let permissions = userPermission()
app.directive('permission', (el, binding) => {
if (permissions.permissions.indexOf(binding.value) < 0) {
// 移除当前元素
el.parentNode.removeChild(el)
}
})按钮需要的权限
<el-row class="mb-4">
<el-button v-permission="`add`">增1</el-button>
<el-button v-permission="`delete`" type="primary">删2</el-button>
<el-button v-permission="`a1`" type="success">改3</el-button>
</el-row>- 效果
以上就是VUE指令和pinia控制按钮权限示例详解的详细内容，更多关于VUE指令pinia控制按钮权限的资料请关注脚本之家其它相关文章！