vue基于Element按钮权限实现方案
背景需求：ERP系统需增加 ”按钮权限控制“ 功能，对权限的控制粒度要普及到按钮层级。
预期
按钮权限控制的交互方式无非两种："不可见" 和 "可见不可点"。
不可见
不可见的交互方式相对简单，我们可使用 v-if 控制其是否显示。使用 v-show 也行，但不够保险，毕竟 v-show 只是把样式改成 display: none，在真实的 DOM 渲染还是存在的，所以更推荐 v-if 来控制不可见。
可见不可点
“看是能看了，但你不行了”。
- 样式控制（得加个禁用样式），什么 cursor: not-allowed ，置灰之类的云云；
- 不可点击，即要禁用或屏蔽点击事件，好像有 preventDefault/stopProgration 可实现；
最终产品需求选择了 “可见不可点”，原因可能就觉得不可见太简单了。(¬_¬)
思路探索
- 给按钮点击事件的回调函数，加个包装函数，对其权限控制，进行事件拦截与触发。相当是做了个代理，有点高阶组件那意思（但对现有业务改动太大，得对每个@click绑定函数逐个修改，遂放弃该方案）；
- 阻止按钮点击事件冒泡与触发，貌似能用上 preventDefautl/stopProgration, 感觉能用指令的方式对 DOM 元素进行事件监听，允许的话则让事件正常执行，不允许则拦截屏蔽；
实践方案
最终选择了指令的方式，最小成本扩展，避免改动现有业务代码逻辑。
针对权限控制需做点击劫持的元素：
- el-button
- btn-wrapper（自封装组件）
- div/span/a 等标签
具体实现方案请看下文：
权限入口：Vuex 控制，全局使用
// 用户登陆后，获取该用户权限 CODE 码，并存储至 store
this.$store.commit('SET_AUTH_CODE', authCodeList);
SET_AUTH_CODE: (state, acthCode) => {
if (acthCode) {
state.autoCodeList = acthCode;
}
setStore({
name: 'autoCodeList',
content: state.autoCodeList || [],
});
}
定义权限指令
const disableClickFn = (event) => {
event && event.stopImmediatePropagation();
}
export const hasPermission = () => {
Vue.directive('permission', {
bind(el, binding) {
let disalbe = true;
if (autoCodeList.length && autoCodeList.includes(binding.value)) {
disable = false;
}
if (disable) {
el.classList.add('permission-disabled');
el.setAttribute('disabled', 'disabled');
el.addEventListener('click', disableClickFn, true);
}
},
unbind(el) {
el.removeEventListener('click', disableClickFn);
}
});
};
- 首先 addEventListener 第三个参数我们使用 useCapture 为 true 让其在捕获阶段触发，因此这里的事件监听器会优先 @click 触发回调；
- 其次使用了 stopImmediatePropagation 阻止事件冒泡和其它相同事件监听器的触发；
如果多个事件监听器被附加到相同元素的相同事件类型上，当此事件触发时，它们会按其被添加的顺序被调用。如果在其中一个事件监听器中执行 stopImmediatePropagation() ，那么剩下的事件监听器都不会被调用。MSDN - stopImmediatePropagation
增加禁用的 CSS 样式
.permission-disabled {
position: relative;
cursor: not-allowed !important;
pointer-events: none; // 阻止元素成为鼠标事件
border:none;
background-image: none;
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0px;
right: 0px;
height: 100%;
z-index: 9;
background: rgba(255, 255, 255, 0.5);
}
}
这里使用了一个比较陌生的 CSS 属性， pointer-events。
CSS3 的 pointer-events 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。 更多用法参考：MSDN - pointer-events
这里使用 pointer-events 只是一个辅助功能，并不一定意味着元素上的事件监听器永远不会触发，如果后代元素有指定 pointer-events 并允许成为事件目标的话，是可以触发父元素事件，而且单纯依靠 CSS 属性来控制不点击，还是有风险，因此这里仅作辅助作用。
全局 "权限判断" 工具函数
import { getStore, } from '@/util/store';
const autoCodeList = getStore({ name: 'autoCodeList', }) || [];
export function hasPermission(authName) {
return !(autoCodeList.length > 0 && autoCodeList.includes(authName));
}
具体使用
// 指令方式（这里的 oms/order/save 就是对应用户登陆时 CODE 权限码）
<el-button v-permission="'oms:order:save'">保存</el-button>
// 函数方式
<el-button :disabled="hasPermission('oms:order:save')"></el-button>
到此这篇关于vue基于Element按钮权限实现方案的文章就介绍到这了,更多相关Element 按钮权限内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了vue+element自定义查询组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
与后端生成二维码相比,前端生成二维码更具有灵活性,下面这篇文章主要给大家介绍了关于Vue中两种生成二维码(带logo)并下载的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了vue项目中如何将数据导出为word文档问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-03-03
今天小编就为大家分享一篇element-ui 设置菜单栏展开的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了Vue项目如何设置反向代理和cookie设置问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了Vue使用distpicker插件实现省市级下拉框三级联动,比如通过JSON文件生成对应的区域下拉框，element-china-are插件，包括distpicker插件，通过代码讲解如何使用distpicker插件实现省市级三联跳动，需要的朋友可以参考下2023-02-02
这篇文章主要介绍了vue,uniapp--js禁止页面滚动,取消滚动方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
最近开发一个vue项目时遇到电脑卡死问题，突然间系统就非常卡，然后卡着卡着就死机了，鼠标也动不了了，只能冷启动。这篇文章主要介绍了vue-cli项目开发运行时内存暴涨卡死电脑问题,需要的朋友可以参考下2019-10-10
这篇文章主要给大家介绍了利用webstrom调试Vue.js单页面程序的方法教程，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。2017-06-06
本文主要介绍了Vue中的性能优化方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
最新评论