vue3 自定义指令控制按钮权限的操作代码
作者:ytwqg 时间:2024-05-09 15:08:59
经过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="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)
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注册)。
来源:https://www.cnblogs.com/ytwqg/p/16746934.html
标签:vue3,自定义指令,按钮权限
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
python反爬虫方法的优缺点分析
2023-09-07 11:38:02
![](https://img.aspxhome.com/file/2023/3/86493_0s.jpg)
Fabric 应用案例
2021-10-11 13:13:01
关于Python中的同步异步阻塞与非阻塞
2021-09-03 05:54:01
asp防止盗链HTTP_REFERER判断代码
2010-03-12 10:41:00
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2023-11-14 10:40:10
![](https://img.aspxhome.com/file/2023/9/94499_0s.png)
Oracle的数据字典技术简析
2010-07-20 13:03:00
Python使用APScheduler实现定时任务过程解析
2023-01-23 19:20:35
![](https://img.aspxhome.com/file/2023/0/82640_0s.png)
解决js相同的正则多次调用test()返回的值却不同的问题
2024-04-17 09:42:18
Django中使用Celery的教程详解
2023-07-12 05:08:35
![](https://img.aspxhome.com/file/2023/7/91927_0s.png)
Python决策树之基于信息增益的特征选择示例
2023-01-09 23:44:32
![](https://img.aspxhome.com/file/2023/0/101290_0s.png)
go语言算法题解二叉树的拷贝、镜像和对称
2024-04-28 10:45:18
![](https://img.aspxhome.com/file/2023/0/134140_0s.jpg)
django如何自定义manage.py管理命令
2023-04-08 01:10:47
![](https://img.aspxhome.com/file/2023/4/63874_0s.png)
Python Tornado之跨域请求与Options请求方式
2023-11-24 19:47:08
![](https://img.aspxhome.com/file/2023/9/112819_0s.jpg)
python修改list中所有元素类型的三种方法
2023-10-02 15:26:29
JavaScript实现相册弹窗功能(zepto.js)
2024-04-19 10:42:49
![](https://img.aspxhome.com/file/2023/2/135812_0s.png)
php下将XML转换为数组
2024-05-09 14:48:04
Python中的变量及简单数据类型应用
2021-06-13 09:45:26
![](https://img.aspxhome.com/file/2023/5/71365_0s.png)
Select count(*)、Count(1)和Count(列)的区别及执行方式
2024-01-28 14:43:04
![](https://img.aspxhome.com/file/2023/8/92768_0s.png)
如何绝对获知浏览器类型?
2009-12-16 18:58:00
Python实现一行代码自动绘制艺术画
2021-03-26 00:32:54
![](https://img.aspxhome.com/file/2023/5/133595_0s.gif)