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中的Diff算法,特别是Vue2的双端Diff和Vue3的快速Diff算法,双端Diff通过四个指针从两端向中间遍历,减少DOM操作,快速Diff通过预处理,减少参与复杂对比的节点,利用最长递增子序列优化乱序匹配,两者都利用节点的key值来优化更新过程,提升性能2026-04-04
Vue3的customRef允许自定义响应式逻辑,通过get/set控制依赖追踪与更新触发,适用于防抖、验证、异步等场景,最佳实践包括封装函数、正确调用track/trigger、清理资源及优化性能2025-09-09
这篇文章主要介绍了Vue3实现chatgpt的流式输出过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2026-03-03
本文主要介绍了vue连接本地服务器的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2024-01-01
这篇文章主要介绍了vue.js 实现点击展开收起动画效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
下面小编就为大家带来一篇vue父组件中获取子组件中的数据(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了关于全局安装vue-cli遇到的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
vue3 内容过多出现滚动条时滚动条自动定位到末端的操作代码
这篇文章主要介绍了vue3 内容过多出现滚动条时滚动条自动定位到末端的操作代码,本文给大家介绍的非常详细,需要的朋友参考下吧2024-05-05
vue任意关系组件通信与跨组件监听状态vue-communication
这篇文章主要介绍了vue任意关系组件通信与跨组件监听状态vue-communication，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
文章介绍了如何在Vue.js中使用计算属性,包括只计算不修改值的情况和可以修改的计算属性,对于只计算不修改值的情况,可以直接使用computed方法,对于需要修改的计算属性,计算属性可以传入一个对象,包含get和set函数2025-12-12
最新评论