经过1个周的摸索和查阅资料 , 终于搞定VUE3中自定义指令,实现按钮级别的权限控制 。当然,只是简单的对按钮进行隐藏和删除的dom操作比较容易,一直纠结的是当按钮无权限时,不是直接删除当前dom元素(button按钮),这样用户体验不好,让人感觉没有这个功能 。为了提高用户体验,当该按钮无权使用时,使用el-tooltip功能进行提醒 。以下是个人的做法,是否有弊端和不足,或者各位高手有更优的方案 , 欢迎指导和赐教!
1、总体效果如下:
![vue3 自定义指令控制按钮权限](http://img.zhejianglong.com/231017/2212042I7-0.png)
文章插图
【vue3 自定义指令控制按钮权限】2、permissionlist组件中的按钮设置为:增加、修改和删除三个按钮,为了让button按钮disabled时 , 可以让tooltip继续有效,在button外层加了个span 。为了通过自定义指令中方便控制tooltip,vue3好像必须把自定义指令放在tooltip的外层 , 所以又在tooltip外层加了个span以放在自定义指令v-has 。
<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=https://www.huyubaike.com/biancheng/"table.data">
推荐阅读
- 14 基于SqlSugar的开发框架循序渐进介绍-- 基于Vue3+TypeScript的全局对象的注入和使用
- 自定义铃声怎么删除不了 自定义铃声怎么删除
- lol自定义怎么无限金币 lol自定义怎么调无限火力
- 为什么设置了快捷指令没有声音 为什么设置了快捷指令没有声音?
- csgo清除控制台指令视频 csgo如何清除控制台指令
- 我的世界改模式指令大全 我的世界怎么改模式指令
- excel2007编辑自定义列表 excel2007下拉列表
- ai自定义快捷键如何导入 AI如何自定义快捷键
- 代练丸子怎么自定义发单 代练丸子怎么自定义价格
- wps表格排序怎么自定义排列顺序 wps表格排序