0
点赞
收藏
分享

微信扫一扫

通过VUE指令和pinia控制按钮权限

哈哈镜6567 2022-07-18 阅读 27
  • 权限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控制按钮权限_用户权限

image.png

举报

相关推荐

0 条评论