【vue3 自定義指令控制按鈕權(quán)限】經(jīng)過1個周的摸索和查閱資料 ， 終于搞定VUE3中自定義指令 ， 實現(xiàn)按鈕級別的權(quán)限控制 。當(dāng)然 ， 只是簡單的對按鈕進(jìn)行隱藏和刪除的dom操作比較容易 ， 一直糾結(jié)的是當(dāng)按鈕無權(quán)限時 ， 不是直接刪除當(dāng)前dom元素（button按鈕） ， 這樣用戶體驗不好 ， 讓人感覺沒有這個功能 。為了提高用戶體驗 ， 當(dāng)該按鈕無權(quán)使用時 ， 使用el-tooltip功能進(jìn)行提醒 。以下是個人的做法 ， 是否有弊端和不足 ， 或者各位高手有更優(yōu)的方案 ， 歡迎指導(dǎo)和賜教！
1、總體效果如下：
文章插圖
2、permissionlist組件中的按鈕設(shè)置為：增加、修改和刪除三個按鈕 ， 為了讓button按鈕disabled時 ， 可以讓tooltip繼續(xù)有效 ， 在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="無權(quán)訪問,請聯(lián)系管理員" type="tooltip" disabled> <span> <el-button type="primary" @click="PermissionAdd()">新增</el-button> </span> </el-tooltip> </span> </el-form-item> <el-form-item label="權(quán)限名稱："> <el-input v-model="PermissionQuery.title" placeholder="請輸入權(quán)限名稱" /> </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">
經(jīng)驗總結(jié)擴展閱讀
- 蘋果7快捷指令在哪里
- 指令的反義詞是什么
- 魅族mx5怎么設(shè)定自定義鈴聲
- 14 基于SqlSugar的開發(fā)框架循序漸進(jìn)介紹-- 基于Vue3+TypeScript的全局對象的注入和使用
- iPhone蘋果手機如何自定義設(shè)置墻紙?
- dnf中裝備屬性指令怎么設(shè)置?
- 吃雞怎么自定義比賽?
- 我的世界give指令的箱子特殊NBT標(biāo)簽?
- 王者榮耀自定義按鍵布局怎么設(shè)置?
- Minecraft113自定義村民合集?