vue3?自定義指令控制按鈕權限的操作代碼
更新時間：2022年10月08日 09:44:32 作者：ytwqg
這篇文章主要介紹了vue3?自定義指令控制按鈕權限,為了提高用戶體驗，當該按鈕無權使用時，使用el-tooltip功能進行提醒，結合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下
經過1個周的摸索和查閱資料，終于搞定VUE3中自定義指令，實現(xiàn)按鈕級別的權限控制。當然，只是簡單的對按鈕進行隱藏和刪除的dom操作比較容易，一直糾結的是當按鈕無權限時，不是直接刪除當前dom元素（button按鈕），這樣用戶體驗不好，讓人感覺沒有這個功能。為了提高用戶體驗，當該按鈕無權使用時，使用el-tooltip功能進行提醒。以下是個人的做法，是否有弊端和不足，或者各位高手有更優(yōu)的方案，歡迎指導和賜教！
1、總體效果如下：
2、permissionlist組件中的按鈕設置為：增加、修改和刪除三個按鈕，為了讓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="無權訪問,請聯(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="權限名稱：">
<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="無權訪問,請聯(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="無權訪問,請聯(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 ? '權限新增' : '權限修改'" :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注冊）。
到此這篇關于vue3 自定義指令控制按鈕權限的文章就介紹到這了,更多相關vue3 自定義指令內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Vue實現(xiàn)自定義下拉菜單功能,文章先通過實例代碼給大家介紹，后面對用到的知識點總結，需要的朋友可以參考下2018-07-07
npm run serve運行vue項目時報錯：Error: error:0308010C
這篇文章主要介紹了npm run serve運行vue項目時,出現(xiàn)報錯：Error: error:0308010C:digital envelope routines::unsupported的解決方法,文中有詳細的解決方法,需要的朋友可以參考下2024-04-04
Vue中使用a標簽下載靜態(tài)資源文件(如excel、pdf等)純前端操作方法
這篇文章主要介紹了Vue中使用a標簽下載靜態(tài)資源文件(如excel、pdf等)純前端操作方法的相關資料,需要的朋友可以參考下2025-02-02
解決removeEventListener 無法清除監(jiān)聽的問題
這篇文章主要介紹了解決removeEventListener 無法清除監(jiān)聽的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue項目預覽excel表格功能(file-viewer插件)
這篇文章主要介紹了vue項目預覽excel表格功能(file-viewer插件),本文分步驟結合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-10-10
這篇文章主要介紹了Vue如何實現(xiàn)多頁面配置以及打包方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
今天小編就為大家分享一篇在vue-cli中引入lodash.js并使用詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue3使用深度選擇器修改樣式問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue如何將html內容轉為圖片并下載到本地，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
最近在學習Vue,感覺methods還是有必有總結一下的,下面這篇文章主要給大家介紹了關于3分鐘迅速學會Vue中methods方法使用技巧的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02