经验总结

  1. 首页 > 生活 > >

vue3 自定义指令控制按钮权限( 二 )

生活百科

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;

经验总结扩展阅读


上一篇：企业运维 | MySQL关系型数据库在Docker与Kubernetes容器环境中快速搭建部署主从实践

下一篇：气虚发胖怎么减肥