【Vue】按钮权限

最新推荐文章于 2024-05-13 18:36:09 发布

顾鸟

最新推荐文章于 2024-05-13 18:36:09 发布

阅读量860

点赞数

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

本文链接：https://blog.csdn.net/qq_40881695/article/details/124001601

版权

vue 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

// components/Home.vue

async getMenuList() {
      try {
        const { menuList, actionList } = await this.$api.getPermissionList();
        this.userMenu = menuList;
        this.$store.commit("saveUserMenu", menuList);
        this.$store.commit("saveUserAction", actionList);
      } catch (error) {
        console.error(error);
      }
    }

// main.js

// 按钮权限
app.directive('has', {
    beforeMount: (el, binding) => {
        // 获取按钮权限
        let actionList = storage.getItem('actionList')
        let value = binding.value
        // 判断列表中是否有对应按钮权限标识
        let hasPermission = actionList.includes(value)
        if (!hasPermission) {
            el.style = 'display:none;'
            // 添加一个宏任务
            setTimeout(() => {
                el.parentNode.removeChild(el)
            }, 0);
        }
    }
})

// views/User.vue

<el-button 
		@click="handleEdit(scope.row)"
    size="mini"
		v-has:add="'user-delete'"
>编辑</el-button>
<el-button
    type="danger"
    size="mini"
    @click="handleDel(scope.row)"
    v-has:add="'user-delete'"
>删除</el-button>