vue3?自定義指令控制按鈕權(quán)限的操作代碼
經(jīng)過1個(gè)周的摸索和查閱資料,終于搞定VUE3中自定義指令,實(shí)現(xiàn)按鈕級(jí)別的權(quán)限控制。當(dāng)然,只是簡(jiǎn)單的對(duì)按鈕進(jìn)行隱藏和刪除的dom操作比較容易,一直糾結(jié)的是當(dāng)按鈕無權(quán)限時(shí),不是直接刪除當(dāng)前dom元素(button按鈕),這樣用戶體驗(yàn)不好,讓人感覺沒有這個(gè)功能。為了提高用戶體驗(yàn),當(dāng)該按鈕無權(quán)使用時(shí),使用el-tooltip功能進(jìn)行提醒。以下是個(gè)人的做法,是否有弊端和不足,或者各位高手有更優(yōu)的方案,歡迎指導(dǎo)和賜教!
1、總體效果如下:
2、permissionlist組件中的按鈕設(shè)置為:增加、修改和刪除三個(gè)按鈕,為了讓button按鈕disabled時(shí),可以讓tooltip繼續(xù)有效,在button外層加了個(gè)span。為了通過自定義指令中方便控制tooltip,vue3好像必須把自定義指令放在tooltip的外層,所以又在tooltip外層加了個(gè)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)訪問,請(qǐng)聯(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="請(qǐng)輸入權(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="table.data"> <el-table-column label="#" width="80" align="center" prop="id"></el-table-column> <el-table-column label="權(quán)限名稱" 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="權(quán)限說明" 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="無權(quán)訪問,請(qǐng)聯(lián)系管理員" 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="無權(quán)訪問,請(qǐng)聯(lián)系管理員" 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 ? '權(quán)限新增' : '權(quán)限修改'" :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="權(quán)限名稱" 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="請(qǐng)選擇所屬菜單" 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="權(quán)限說明" 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) } }, }); //權(quán)限檢查方法 function checkPermission(value) { let isExist = false; let userlogin = JSON.parse(sessionStorage.getItem("userlogin") || "[]"); let buttonArr = userlogin.haspermissions //判斷是否按鈕有權(quán)限 if (buttonArr.includes(value)) { isExist = true; } return isExist; } } }; export default hasPermission;
4、將自定義指令加入vue3的全局指令,以方便所有組件中可以使用(在main.js中引入自定義指令組件然后use注冊(cè))。
到此這篇關(guān)于vue3 自定義指令控制按鈕權(quán)限的文章就介紹到這了,更多相關(guān)vue3 自定義指令內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
npm run serve運(yùn)行vue項(xiàng)目時(shí)報(bào)錯(cuò):Error: error:0308010C
這篇文章主要介紹了npm run serve運(yùn)行vue項(xiàng)目時(shí),出現(xiàn)報(bào)錯(cuò):Error: error:0308010C:digital envelope routines::unsupported的解決方法,文中有詳細(xì)的解決方法,需要的朋友可以參考下2024-04-04Vue中使用a標(biāo)簽下載靜態(tài)資源文件(如excel、pdf等)純前端操作方法
這篇文章主要介紹了Vue中使用a標(biāo)簽下載靜態(tài)資源文件(如excel、pdf等)純前端操作方法的相關(guān)資料,需要的朋友可以參考下2025-02-02解決removeEventListener 無法清除監(jiān)聽的問題
這篇文章主要介紹了解決removeEventListener 無法清除監(jiān)聽的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10vue項(xiàng)目預(yù)覽excel表格功能(file-viewer插件)
這篇文章主要介紹了vue項(xiàng)目預(yù)覽excel表格功能(file-viewer插件),本文分步驟結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-10-10vue如何將html內(nèi)容轉(zhuǎn)為圖片并下載到本地
這篇文章主要介紹了vue如何將html內(nèi)容轉(zhuǎn)為圖片并下載到本地,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-013分鐘迅速學(xué)會(huì)Vue中methods方法使用技巧
最近在學(xué)習(xí)Vue,感覺methods還是有必有總結(jié)一下的,下面這篇文章主要給大家介紹了關(guān)于3分鐘迅速學(xué)會(huì)Vue中methods方法使用技巧的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02