按钮权限配置方式

ZL随心

于 2023-01-14 12:20:04 发布

阅读量936

点赞数 1

分类专栏： js vue 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_44832362/article/details/128683891

版权

vue 同时被 2 个专栏收录

18 篇文章

订阅专栏

12 篇文章

订阅专栏

文章介绍了如何使用Vue自定义指令实现按钮权限的控制。在页面权限下，如果用户对某个按钮有权限，该按钮会显示；否则，在`beforeMount`钩子中，通过比较`actionList`和指令接收的按钮权限值来决定隐藏按钮或从DOM中移除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

按钮权限，在页面权限之下，页面下勾选任意一个按钮，则默认也有查看功能

通过指令方式实现按钮权限控制

// 按钮使用方式 v-has:参数 = '值' 参数可不要
app.directive('has', {
    // 因为是在beforeMount钩子里面做的所以，下面需要setTimeout
    beforeMount: function (el, binding) {
        // 获取列表
        let actionList = storage.getItem('actionList')
        // 获取指令接收的按钮权限值 例如是 'btn_add'
        let value = binding.value
        let hasPermission = actionList.includes(value)
        // 判断当前传进来的值是否包含在，当前页面的按钮列表里面
        // 在则有当前按钮权限，不在则没有按钮权限
        if (!hasPermission) {
            // 隐藏起来，但是在dom树上还能看到
            el.style = 'display:none'
            // 将按钮从dom树上删除
            setTimeout(() => {
                el.parentNode.removeChild(el)
            }, 0)
        }
    }
})