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;4、將自定義指令加入vue3的全局指令，以方便所有組件中可以使用（在main.js中引入自定義指令組件然后use注冊） 。

vue3 自定義指令控制按鈕權限

文章插圖

推薦閱讀