经过1个周的摸索和查阅资料 ， 终于搞定VUE3中自定义指令，实现按钮级别的权限控制 。当然，只是简单的对按钮进行隐藏和删除的dom操作比较容易，一直纠结的是当按钮无权限时，不是直接删除当前dom元素（button按钮），这样用户体验不好，让人感觉没有这个功能 。为了提高用户体验，当该按钮无权使用时，使用el-tooltip功能进行提醒 。以下是个人的做法，是否有弊端和不足，或者各位高手有更优的方案 ， 欢迎指导和赐教！
1、总体效果如下：
文章插图
【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表格排序