现代化专业群建设专题网站wordpress建站发文教程

---

一、什么是按钮权限控制

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

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

后端返回的权限数据模拟

// 模拟权限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);

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

总结

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