Vue 3 自定义权限指令 v-action的作用
更新时间：2025年04月02日 11:21:19 作者：代码里的小猫咪
在实际的前端开发中,尤其是涉及到权限管理的系统,我们经常需要根据用户的权限动态控制某些按钮的显示和隐藏,这篇文章主要介绍了Vue 3 自定义权限指令 v-action的相关知识,需要的朋友可以参考下
在实际的前端开发中，尤其是涉及到权限管理的系统，我们经常需要根据用户的权限动态控制某些按钮的显示和隐藏。例如：在一个后台管理系统中，不同角色的用户可能拥有不同的操作权限，比如「查看」、「编辑」、「删除」等。为了避免用户无权操作某些功能，通常需要在组件或模板中手动添加权限判断逻辑。
然而，如果在每个需要权限控制的地方都手写 v-if 或 v-show 来判断，代码会变得冗余且难以维护。为了解决这个问题，可以利用 Vue 3 的自定义指令 来封装权限控制逻辑，使得权限管理变得更直观、可复用，进而提升代码的可读性和可维护性。
举出一个实际可用的 🌰
/**
* 根据权限（binding）决定 el 的显示隐藏
* @param {*} el 指令绑定的 DOM 元素，Vue 传递给指令的 el 参数
* @param {*} binding 指令的绑定值对象，包含传递指令的值。比如：v-action="'actionCode'"，那么 binding.value 就是 'actionCode'。
* @returns
*/
function updateVisibility(el, binding) {
// 获取权限列表
const { _actions } = window;
// 如果没有指定权限值，默认「显示」
if (!binding.value) {
el.style.display = '';
return;
}
// 根据权限判断是否隐藏
el.style.display = _actions && !_actions.includes(binding.value) ? 'none' : '';
}
// action：自定义指令对象
const action = {
// 指令绑定的元素被插入到 DOM 时触发
mounted(el, binding) {
updateVisibility(el, binding);
},
// 当组件 props 或 data 发生变化导致 DOM 更新 时触发。
updated(el, binding) {
updateVisibility(el, binding);
},
};
// 注册全局指令
export default {
install(app) {
// 在 Vue 应用上 注册全局指令 v-action，让所有组件都可以使用 v-action 来控制元素的显示。
app.directive('action', action);
},
};这个代码是一个 Vue 3 的自定义指令（v-action）， 用于根据用户的权限控制元素的显示与隐藏。它会在 mounted 和 updated 阶段检查权限，并根据权限决定是否显示元素。
🌟 总结
v-action 这个指令的作用是 根据用户权限 (window._actions) 控制元素的显示。
- 用户没有权限 → 隐藏该元素（display: none）。
- 用户有权限 → 显示该元素（display: ''）。
- 没有传递 v-action 的值 → 默认显示。
🌟 使用方式
在 Vue 组件的模板中：
<template> <button v-action="'_EDIT'">编辑</button> </template>
只有 _actions 数组包含 '_EDIT'，按钮才会显示。如果 window._actions 不包含 '_EDIT'，按钮会被隐藏。
这个代码在 Vue 3 项目里非常实用，特别适用于 权限控制场景！
到此这篇关于Vue 3 自定义权限指令 v-action的作用的文章就介绍到这了,更多相关Vue自定义权限指令 v-action内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue路由与a标签链接锚点发生冲突问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
本篇文章主要介绍了vue移动端裁剪图片结合插件Cropper的使用实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了vue实现折叠展开收缩动画,通过scrollHeight实现,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2023-11-11
今天小编就为大家分享一篇解决vue.js 数据渲染成功仍报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了vue项目中$t()的意思是什么，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要为大家详细介绍了Vue + Element UI图片上传控件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-08-08
我们知道使用webpack打包vue项目后会生成一个dist文件夹,dist文件夹下有html文件和其他css、js以及图片等,那么打包后的文件该如何正确运行呢?这篇文章主要给大家介绍了关于vue打包之后的dist文件如何运行的相关资料,需要的朋友可以参考下2023-05-05
这篇文章主要给大家介绍了关于Vue插件从封装到发布的完整步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-02-02
vue就是前端上的Java,前端上的C#,有个前端的虚拟DOM引擎,设计理念和Java/C#类似,这篇文章主要给大家介绍了关于Vue新手指南之环境搭建及入门的相关资料,需要的朋友可以参考下2021-08-08
我在做一个附件删除功能的时候发现,明明打印出来附件已经没有数据了但是页面就是不刷新, this.$set()不生效,所以本文小编给大家介绍了vue中this.$set()不更新的解决方法,需要的朋友可以参考下2023-11-11
最新评论