如何实现Vue中基于Element UI按钮的权限控制方案？

本文共计1297个文字，预计阅读时间需要6分钟。

背景需求：ERP系统需要增加权限控制功能，实现按按钮权限控制。

功能，对权限控制的粒度要普遍到按按钮级别。

预期：按钮权限控制的交互方式无外乎两种：不可见和可见不可点。

背景需求：ERP系统需增加 ”按钮权限控制“ 功能，对权限的控制粒度要普及到按钮层级。

预期

按钮权限控制的交互方式无非两种："不可见" 和 "可见不可点"。

不可见

不可见的交互方式相对简单，我们可使用 v-if 控制其是否显示。使用 v-show 也行，但不够保险，毕竟 v-show 只是把样式改成 display: none，在真实的 DOM 渲染还是存在的，所以更推荐 v-if 来控制不可见。

可见不可点

“看是能看了，但你不行了”。

• 样式控制（得加个禁用样式），什么 cursor: not-allowed ，置灰之类的云云；
• 不可点击，即要禁用或屏蔽点击事件，好像有 preventDefault/stopProgration 可实现；

最终产品需求选择了 “可见不可点”，原因可能就觉得不可见太简单了。(¬_¬)

思路探索

• 给按钮点击事件的回调函数，加个包装函数，对其权限控制，进行事件拦截与触发。