Vue3封装全局自定义指令实现按钮权限控制。_vue3自定义指令按钮权限

文章目录

• 一、什么是按钮权限控制
• 二、思路 (往往是后端返回的权限标识)
• • 三、实现
• main.ts注册为全局指令
• 总结

一、什么是按钮权限控制

概念：根据当前用户的权限数据控制按钮的显示和隐藏

二、思路 (往往是后端返回的权限标识)

后端返回的权限数据模拟

// 模拟权限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注册为全局指令

// 自定义按钮权限directiveconst myPointDirective:Directive<HTMLElement,string> = (el,binding) => { if (!permissions.includes(user + \":\" + binding.value)) { el.style.display = \'none\' }}// 全局注册指令app.directive(\'my-point\', myPointDirective);

效果：
后端返回的权限数据没有，则上面按钮就不会显示

总结

这样就实现了通过全局自定义指令来实现按钮权限的控制了。