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

 更新时间:2022年10月08日 09:44:32   作者:ytwqg  
这篇文章主要介绍了vue3 自定义指令控制按钮权限,为了提高用户体验,当该按钮无权使用时,使用el-tooltip功能进行提醒,结合实例代码给大家介绍的非常详细,需要的朋友可以参考下

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

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

1、总体效果如下:

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<template>
  <el-card class="query-condition">
    <el-form :inline="true" :model="PermissionQuery" class="demo-form-inline">
      <el-form-item>
        <span v-has="'/sys/permission_edit'">
          <el-tooltip placement="top" content="无权访问,请联系管理员" type="tooltip" disabled>
            <span>
              <el-button type="primary" @click="PermissionAdd()">新增</el-button>
            </span>
          </el-tooltip>
        </span>
      </el-form-item>
      <el-form-item label="权限名称:">
        <el-input v-model="PermissionQuery.title" placeholder="请输入权限名称" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onQuery(PermissionQuery)">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-row>
    <el-col :span="24">
      <el-table border :data="table.data">
        <el-table-column label="#" width="80" align="center" prop="id"></el-table-column>
        <el-table-column label="权限名称" align="center" prop="title"></el-table-column>
        <el-table-column label="URL地址" align="center" prop="url"></el-table-column>
        <el-table-column label="所属菜单" align="center" prop="menuname.menuname"></el-table-column>
        <el-table-column label="显示顺序" align="center" prop="sort" width="90"></el-table-column>
        <el-table-column label="路由文件" align="center" prop="route"></el-table-column>
        <el-table-column label="权限说明" align="center" prop="description"></el-table-column>
        <el-table-column label="操作" width="150px" align="center">
          <template #default="scope">
            <span v-has="'/sys/permission_edit'">
              <el-tooltip placement="top-end" content="无权访问,请联系管理员" type="tooltip" disabled>
                <span>
                  <el-button type="primary" size="small" @click="PermissionEdit(scope.row)">
                    <el-icon>
                      <Edit />
                    </el-icon>
                  </el-button>
                </span>
              </el-tooltip>
            </span>
            <span v-has="'/sys/permission_del'">
              <el-tooltip placement="top-end" content="无权访问,请联系管理员" type="tooltip" disabled>
                <span>
                  <el-button type="danger" size="small" @click="PermissionDel(scope.row.id)">
                    <el-icon>
                      <Delete />
                    </el-icon>
                  </el-button>
                </span>
              </el-tooltip>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <PaginationView :total="total" @pageChange="handleChangePage"></PaginationView>
    </el-col>
  </el-row>
  <el-dialog v-model="dialogFormVisible" :title="form_state ? '权限新增' : '权限修改'" :close-on-click-modal="false" width="400px" center :before-close="formCancel">
    <el-form :model="formData" :rules="rules" ref="editForm">
      <el-form-item v-show="false" label="#" prop="id">
        <el-input type="hidden" v-model="formData.id"></el-input>
      </el-form-item>
      <el-form-item label="权限名称" prop="title">
        <el-input v-model="formData.title"></el-input>
      </el-form-item>
      <el-form-item label="URL地址" prop="url">
        <el-input v-model="formData.url"></el-input>
      </el-form-item>
      <el-form-item label="所属菜单" prop="menuid">
        <el-select v-model="formData.menuid" placeholder="请选择所属菜单" style="width: 100%" clearable>
          <el-option v-for="(menu, index) in menus.data" :key="index" :label="menu.menuname" :value="menu.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="路由文件" prop="route">
        <el-input v-model="formData.route"></el-input>
      </el-form-item>
      <el-form-item label="显示顺序" prop="sort">
        <el-input v-model="formData.sort"></el-input>
      </el-form-item>
      <el-form-item label="权限说明" prop="description">
        <el-input v-model="formData.description"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="formCancel()">取消</el-button>
        <el-button type="primary" @click="formSubmit()">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>

3、自定义指令组件(utils/haspermissions.js)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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 自定义指令内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://www.cnblogs.com/ytwqg/p/16746934.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • Vue的轮播图组件实现方法

    Vue的轮播图组件实现方法

    下面小编就为大家分享一篇Vue的轮播图组件实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue等待数据渲染完成后执行下一个方法问题

    vue等待数据渲染完成后执行下一个方法问题

    这篇文章主要介绍了vue等待数据渲染完成后执行下一个方法问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • vue-socket.io接收不到数据问题的解决方法

    vue-socket.io接收不到数据问题的解决方法

    这篇文章主要介绍了解决vue-socket.io接收不到数据问题的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • 深入探讨Vue3中Composition API的使用方法

    深入探讨Vue3中Composition API的使用方法

    Vue3的Composition API是一个全新的API,它允许开发人员将Vue组件中的逻辑封装在单独的功能性组合中,而不是依赖于Vue选项对象。这篇文章将深入探讨Vue3的Composition API及其使用方法,需要的朋友可以参考下
    2023-07-07
  • vue通过krpano.js实现360全景图的实例代码

    vue通过krpano.js实现360全景图的实例代码

    这篇文章主要介绍了vue上通过krpano.js实现360全景图,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-10-10
  • 关于vue二进制转图片显示问题 后端返回的是byte[]数组

    关于vue二进制转图片显示问题 后端返回的是byte[]数组

    这篇文章主要介绍了关于vue二进制转图片显示问题 后端返回的是byte[]数组,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • VUEX 使用 mutations的两种方式

    VUEX 使用 mutations的两种方式

    这篇文章主要介绍了VUEX 使用 mutations的两种方式,实现方式就是利用vuex中的mutations,在mutations中定义一个方法,这个方法就是把点击的index(也就是每个列表的唯一标识),传给state中的当前标识,需要的朋友可以参考下
    2023-01-01
  • Vue透传Attributes使用解析

    Vue透传Attributes使用解析

    本文主要介绍了Vue透传Attributes使用解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • vue-router 导航完成后获取数据的实现方法

    vue-router 导航完成后获取数据的实现方法

    这篇文章主要介绍了vue-router 导航完成后获取数据,通过使用生命周期的 created() 函数,在组件创建完成后调用该方法,本文结合实例代码给大家讲解的非常详细需要的朋友可以参考下
    2022-11-11
  • Vue.js每天必学之过滤器与自定义过滤器

    Vue.js每天必学之过滤器与自定义过滤器

    Vue.js每天必学之过滤器与自定义过滤器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09

最新评论