【vue3 自定义指令控制按钮权限】经过1个周的摸索和查阅资料 , 终于搞定VUE3中自定义指令 , 实现按钮级别的权限控制 。当然 , 只是简单的对按钮进行隐藏和删除的dom操作比较容易 , 一直纠结的是当按钮无权限时 , 不是直接删除当前dom元素(button按钮) , 这样用户体验不好 , 让人感觉没有这个功能 。为了提高用户体验 , 当该按钮无权使用时 , 使用el-tooltip功能进行提醒 。以下是个人的做法 , 是否有弊端和不足 , 或者各位高手有更优的方案 , 欢迎指导和赐教!
1、总体效果如下:
文章插图
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">
经验总结扩展阅读
- 苹果7快捷指令在哪里
- 指令的反义词是什么
- 魅族mx5怎么设定自定义铃声
- 14 基于SqlSugar的开发框架循序渐进介绍-- 基于Vue3+TypeScript的全局对象的注入和使用
- iPhone苹果手机如何自定义设置墙纸?
- dnf中装备属性指令怎么设置?
- 吃鸡怎么自定义比赛?
- 我的世界give指令的箱子特殊NBT标签?
- 王者荣耀自定义按键布局怎么设置?
- Minecraft113自定义村民合集?