VUE指令和pinia控制按钮权限示例详解
更新时间：2023年09月21日 14:18:51 作者：垃圾简书_吃枣药丸
这篇文章主要为大家介绍了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控制按钮权限的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了vue + elementUI 表单嵌套验证,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-11-11
这篇文章主要为大家详细介绍了vue+iview实现文件上传，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
vue中使用webuploader做断点续传实现文件上传功能
之前做的一个项目中，由于经常上传几百兆的压缩包，导致经常上传失败，所以就找了webuploader插件做了断点续传,断点续传除了需要前端分片，也需要后台去支持，所以做的时候做好对接协调,所以本文就给大家详细的介绍一下vue中如何使用webuploader做断点续传2023-07-07
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
vue中v-if 和v-else-if在页面加载的时候，不满足条件的标签会加载然后再消失掉，如果要解决这个问题，下面小编给大家带来了实例代码，需要的朋友参考下吧2018-10-10
vue3中getCurrentInstance不推荐使用及在＜script setup＞中获取全局内容的三种方式
这篇文章主要给大家介绍了关于vue3中getCurrentInstance不推荐使用及在＜script setup＞中获取全局内容的三种方式,文中通过介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-02-02
这篇文章主要为大家详细介绍了vue如何使用原生高德地图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
这篇文章主要介绍了Vue3中如何使用fullcalendar日历插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
这篇文章主要介绍了Vue 动态生成数据字段的实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
使用VUE+iView+.Net Core上传图片的方法示例
这篇文章主要介绍了使用VUE+iView+.Net Core上传图片的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
正常情况下，我们对于数据都会分页加载，最近项目中确实遇到了不能分页的场景，如果不分页，页面渲染几千条数据就会感知到卡顿，使用虚拟列表就势在必行了。本文主要介绍了如何基于Vue实现封装一个虚拟列表组件，感兴趣的可以了解一下2023-03-03
最新评论