背景需求:ERP系统需增加 ”按钮权限控制“ 功能,对权限的控制粒度要普及到按钮层级。
按钮权限控制的交互方式无非两种:"不可见" 和 "可见不可点"。
不可见的交互方式相对简单,我们可使用 v-if 控制其是否显示。使用 v-show 也行,但不够保险,毕竟 v-show 只是把样式改成 display: none,在真实的 DOM 渲染还是存在的,所以更推荐 v-if 来控制不可见。
“看是能看了,但你不行了”。
最终产品需求选择了 “可见不可点”,原因可能就觉得不可见太简单了。(¬_¬)
最终选择了指令的方式,最小成本扩展,避免改动现有业务代码逻辑。
针对权限控制需做点击劫持的元素:
具体实现方案请看下文:
// 用户登陆后,获取该用户权限 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); } }); };
如果多个事件监听器被附加到相同元素的相同事件类型上,当此事件触发时,它们会按其被添加的顺序被调用。如果在其中一个事件监听器中执行 stopImmediatePropagation() ,那么剩下的事件监听器都不会被调用。MSDN - stopImmediatePropagation
.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 按钮权限内容请搜索站长技术以前的文章或继续浏览下面的相关文章希望大家以后多多支持站长技术!
虽然站长技术以前发不过不少的正则表达式教程,但这篇文章还是不错的,无废话都...
mysql存储过程 存储过程(Stored Procedure)是一种在数据库中存储复杂程序,以便...
根据外国科技媒体 Windows Central 的报道,微软正在将 Android 应用引入 Window...
1 概述 正则表达式(Regular Expression)是一种匹配模式,描述的是一串文本的特征...
文章目录 centos6.x centos7.x 较为常用的命令 彩蛋 centos6.x # 编辑防火墙脚本...
% ''获取访问者的地址 ip=Request.ServerVariables("REMOTE_ADDR") ''允许的IP地...
背景 最近,听到很多吐槽:看到源码,心中就感到十分纠结、特别烦恼。 为什么纠...
正则表达式的基本知识: 元字符: 正则表达式的威力在于其能够在模式中包含选择和...
需要注意的是,调用的封装的数据库,和jQuery的保存地址 一、注册 (1)写文本框...
啰嗦的话,不多说,我们直接开始部署,我相信有点linux基础的人都能看得懂。 Mys...