vue3 自定义指令控制按钮权限的操作代码_vue.js_

经过1个周的摸索和查阅资料，终于搞定VUE3中自定义指令，实现按钮级别的权限控制。当然，只是简单的对按钮进行隐藏和删除的dom操作比较容易，一直纠结的是当按钮无权限时，不是直接删除当前dom元素（button按钮），这样用户体验不好，让人感觉没有这个功能。为了提高用户体验，当该按钮无权使用时，使用el-tooltip功能进行提醒。以下是个人的做法，是否有弊端和不足，或者各位高手有更优的方案，欢迎指导和赐教！

1、总体效果如下：

2、permissionlist组件中的按钮设置为：增加、修改和删除三个按钮，为了让button按钮disabled时，可以让tooltip继续有效，在button外层加了个span。为了通过自定义指令中方便控制tooltip，vue3好像必须把自定义指令放在tooltip的外层，所以又在tooltip外层加了个span以放在自定义指令v-has。

3、自定义指令组件（utils/haspermissions.js）

export const hasPermission = { install(Vue) { //自定义指令v-has： Vue.directive('has', { mounted(el, binding, vnode) { if (!checkPermission(binding.value)) { let tooltipNode = vnode.children.find((childrenCmpt) => childrenCmpt.component?.type.name == 'ElTooltip') tooltipNode.component.props.disabled = false el.querySelector("button").setAttribute("disabled", true) } }, }); //权限检查方法 function checkPermission(value) { let isExist = false; let userlogin = JSON.parse(sessionStorage.getItem("userlogin") || "[]"); let buttonArr = userlogin.haspermissions //判断是否按钮有权限 if (buttonArr.includes(value)) { isExist = true; } return isExist; } } }; export default hasPermission;

4、将自定义指令加入vue3的全局指令，以方便所有组件中可以使用（在main.js中引入自定义指令组件然后use注册）。

到此这篇关于vue3 自定义指令控制按钮权限的文章就介绍到这了,更多相关vue3 自定义指令内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！