Vue3封装全局自定义指令实现按钮权限控制功能实例
作者：小码龙~
在Vue应用中自定义指令是一种强大的功能,可以用于封装DOM操作逻辑,这篇文章主要介绍了Vue3封装全局自定义指令实现按钮权限控制功能的相关资料,需要的朋友可以参考下
一、什么是按钮权限控制
概念：根据当前用户的权限数据控制按钮的显示和隐藏
二、思路 (往往是后端返回的权限标识)
后端返回的权限数据模拟
// 模拟权限mock数据
const permissions = [
"park:bulidng:add",
"park:bulidng:del",
"park:bulidng:edit",
]
思路：每一个需要做权限控制的按钮都有一个自己独有的 标识 , 如果标识可以在权限数据列表中找到，则显示，找不到就隐藏
三、实现
按钮绑定上v-my-point自定义全局指令
代码如下（示例）：
<div class="container">
<el-button v-my-point="'bulidng:add'" type="success">添加</el-button>
<el-button v-my-point="'bulidng:del'" type="primary">编辑</el-button>
<el-button v-my-point="'bulidng:edit'" type="danger">删除</el-button>
</div>
main.ts注册为全局指令
// 自定义按钮权限directive
const myPointDirective:Directive<HTMLElement,string> = (el,binding) => {
if (!permissions.includes(user + ":" + binding.value)) {
el.style.display = 'none'
}
}
// 全局注册指令
app.directive('my-point', myPointDirective);
效果：
后端返回的权限数据没有，则上面按钮就不会显示
总结
这样就实现了通过全局自定义指令来实现按钮权限的控制了。
到此这篇关于Vue3封装全局自定义指令实现按钮权限控制功能的文章就介绍到这了,更多相关Vue3自定义指令按钮权限控制内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！