vue element admin 权限控制,element角色菜单按钮权限
本文主要介绍了基于元素按钮权限的vue实现方案，并通过示例代码进行了详细介绍。对大家的学习或工作都有一定的参考价值。有需要的朋友下面和边肖一起学习。
背景：ERP系统需要增加“按钮权限控制”的功能，权限控制的粒度要推广到按钮级别。
预期
按钮权限控制的交互方式只有两种：“不可见”和“可见不可得”。
不可见
隐形交互比较简单，我们可以用v-if来控制是否显示。用v秀还可以，但是不够安全。毕竟v-show只是把样式改成了显示：none，渲染还是存在于真实的DOM中，所以更推荐v-if来控制不可见性。
可见不可点
“看得见，做不到”。
样式控制(你要加一个禁止的样式)，比如光标：不允许，变灰等等；
不能点击，就是想禁用或者屏蔽点击事件。似乎应该实施预防违约/停止程序；
最终的产品需求选择了“看得见看不见”，原因可能是看不见太简单了。( _ )
思路探索
给按钮点击事件的回调函数添加一个包装函数，控制其权限，拦截并触发事件。挺代理的，有点高层的成分(但是现有业务改动太多，每个@click绑定函数都要一个一个修改，所以放弃方案)；
防止按钮点击事件冒泡和触发。似乎可以使用prevent default/stop program。我感觉可以通过指令的方式来监控DOM元素。如果允许，我可以让事件正常执行，但如果不允许，我可以拦截和阻止它们。
实践方案
最后选择指令的方式，扩展最小成本，避免改变现有的业务代码逻辑。
权限控制需要点击劫持的元素：
el按钮
Btn-wrapper(自封装组件)
Div/span/a和其他标记
具体实施方案请参见以下内容：
权限入口：Vuex 控制，全局使用
//用户登录后，获取用户权限码，存储在store中。
这个。$store.commit(SET_AUTH_CODE ，authCodeList)；
SET_AUTH_CODE: (state，acthCode)={
if (acthCode) {
state . auto delist=ACTH code；
}
setStore({
名称：“自动提交”，
content:state . auto delist []，
});
}
定义权限指令
const disableClickFn=(event)={
event event . stop immediate propagation()；
}
导出常量hasPermission=()={
Vue.directive(permission ，{
bind(el，binding) {
设disalbe=true
if(auto delist . length auto delist . includes(binding . value)){
disable=false
}
如果(禁用){
el.classList.add(权限禁用)；
el.setAttribute(disabled ， disabled )；
el.addEventListener(click ，disableClickFn，true)；
}
},
解除绑定(el)
el.removeEventListener(click ，disableClickFn)；
}
});
};
首先是addEventListener的第三个参数，我们在捕获阶段使用useCapture为true来触发它，所以这里的事件监听器会优先触发回调到@ click
其次，stopImmediatePropagation用于防止事件冒泡和触发其他相同的事件侦听器。
如果多个事件侦听器被附加到同一元素的同一事件类型，当该事件被触发时，它们将按照添加的顺序被调用。如果在其中一个事件侦听器中执行stopImmediatePropagation()，则不会调用其余的事件侦听器。MSDN -立即停止传播
增加禁用的 CSS 样式
。权限-禁用{
位置：相对；
光标：不允许！重要；
指针事件：无；//防止元素成为鼠标事件
边框：无；
背景-图像：无；
*在{
内容：“”；
位置：绝对；
底部：0；
左：0px
右：0px
身高：100%；
z指数：9；
背景：rgba(255，255，255，0.5)；
}
}
这里使用了一个相当奇怪的CSS属性，指针事件。
CSS3的pointer-events属性指定在什么情况下(如果有的话)特定的图形元素可以成为鼠标事件的目标。更多用法参考：MSDN指针事件
这里指针事件的使用只是一个辅助功能，并不意味着元素上的事件监听器永远不会被触发。如果一个后代元素指定了pointer-events并被允许作为事件目标，就可以触发父元素的事件，单纯依靠CSS属性来控制不点击还是有风险的，所以这里只是一个辅助功能。
全局 "权限判断" 工具函数
从“@/util/store”导入{ getStore，}；
const auto delist=get store({ name: auto delist ，}) []；
导出函数具有权限(authName) {
回归！(auto delist . length 0 auto delist . includes(authName))；
}
具体使用
//指令模式(oms/order/save这里是对应用户登录时的代码权限代码)
El-button v-permission= OMS:订单：保存保存/el-button
//功能模式
El-button:disabled= has permission( OMS:order:save)/El-button
关于基于元素按钮权限的vue实现方案的文章到此为止。有关元素按钮权限的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。