vue基于Element按钮权限实现方案

 更新时间:2021年04月01日 10:12:37   作者:VANTOP前端团队  
这篇文章主要介绍了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 UI+Lumen实现通用表格分页功能

    Vue+Element UI+Lumen实现通用表格分页功能

    这篇文章主要介绍了Vue+Element UI+Lumen实现通用表格分页功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-02-02
  • Vue两个版本的区别和使用方法(更深层次了解)

    Vue两个版本的区别和使用方法(更深层次了解)

    在我们使用 vue时,我们可以引用两个不同版本的 Vue,分别是 Vue完整版(vue.js)和 Vue(vue.runtime.js )非完整版,那么它们的区别是什么呢,今天我们就来分析下这两个不同版本之间的区别,一起看看吧
    2020-02-02
  • vue2.0嵌套路由实现豆瓣电影分页功能(附demo)

    vue2.0嵌套路由实现豆瓣电影分页功能(附demo)

    这篇文章主要介绍了vue2.0嵌套路由实现豆瓣电影分页功能(附demo),这里整理了详细的代码,有需要的小伙伴可以参考下。
    2017-03-03
  • 基于Vue单文件组件详解

    基于Vue单文件组件详解

    下面小编就为大家带来一篇基于Vue单文件组件详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vue登录注册及token验证实现代码

    vue登录注册及token验证实现代码

    在vue单页中,我们可以通过监控route对象,从中匹配信息去决定是否验证token,然后定义后续行为。下面通过实例代码给大家分享vue登录注册及token验证功能,需要的朋友参考下吧
    2017-12-12
  • Vue+axios+WebApi+NPOI导出Excel文件实例方法

    Vue+axios+WebApi+NPOI导出Excel文件实例方法

    在本篇文章里小编给大家整理关于Vue+axios+WebApi+NPOI导出Excel文件的知识点以及实例代码,需要的朋友们参考下。
    2019-06-06
  • Vue源码学习之初始化模块init.js解析

    Vue源码学习之初始化模块init.js解析

    本篇文章主要介绍了Vue源码学习之初始化模块init.js解析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • vue.js实现的经典计算器/科学计算器功能示例

    vue.js实现的经典计算器/科学计算器功能示例

    这篇文章主要介绍了vue.js实现的经典计算器/科学计算器功能,具有基本四则运算计算器以及科学计算器的功能,可实现开方、乘方、三角函数以及公式运算等功能,需要的朋友可以参考下
    2018-07-07
  • vue element-ui中table合计指定列求和实例

    vue element-ui中table合计指定列求和实例

    这篇文章主要介绍了vue element-ui中table合计指定列求和实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 详解vue.js之绑定class和style的示例代码

    详解vue.js之绑定class和style的示例代码

    本篇文章主要介绍了详解vue.js之绑定class和style的示例代码,具有一定的参考价值,有兴趣的可以了解一下
    2017-08-08

最新评论