如何利用Vue和Element UI实现基于长尾词的按钮权限控制方案？

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

背景需求：ERP系统需增加权限控制功能，控制权限的粒度从普通到按钮级别。

预期：- 按钮权限控制交互方式有两种：不可见和可见不可点。- 不可见：权限不可见，用户无法操作。- 可见不可点：权限可见，但用户无法点击。

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

预期

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

不可见

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

可见不可点

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

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

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