Vue3封裝全局自定義指令實現(xiàn)按鈕權(quán)限控制功能實例
更新時間：2025年07月10日 10:28:09 作者：小碼龍~
在Vue應(yīng)用中自定義指令是一種強大的功能,可以用于封裝DOM操作邏輯,這篇文章主要介紹了Vue3封裝全局自定義指令實現(xiàn)按鈕權(quán)限控制功能的相關(guān)資料,需要的朋友可以參考下
一、什么是按鈕權(quán)限控制
概念：根據(jù)當前用戶的權(quán)限數(shù)據(jù)控制按鈕的顯示和隱藏
二、思路 (往往是后端返回的權(quán)限標識)
后端返回的權(quán)限數(shù)據(jù)模擬
// 模擬權(quán)限mock數(shù)據(jù)
const permissions = [
"park:bulidng:add",
"park:bulidng:del",
"park:bulidng:edit",
]
思路：每一個需要做權(quán)限控制的按鈕都有一個自己獨有的 標識 , 如果標識可以在權(quán)限數(shù)據(jù)列表中找到，則顯示，找不到就隱藏
三、實現(xiàn)
按鈕綁定上v-my-point自定義全局指令
代碼如下（示例）：
<div class="container">
<el-button v-my-point="'bulidng:add'" type="success">添加</el-button>
<el-button v-my-point="'bulidng:del'" type="primary">編輯</el-button>
<el-button v-my-point="'bulidng:edit'" type="danger">刪除</el-button>
</div>
main.ts注冊為全局指令
// 自定義按鈕權(quán)限directive
const myPointDirective:Directive<HTMLElement,string> = (el,binding) => {
if (!permissions.includes(user + ":" + binding.value)) {
el.style.display = 'none'
}
}
// 全局注冊指令
app.directive('my-point', myPointDirective);
效果：
后端返回的權(quán)限數(shù)據(jù)沒有，則上面按鈕就不會顯示
總結(jié)
這樣就實現(xiàn)了通過全局自定義指令來實現(xiàn)按鈕權(quán)限的控制了。
到此這篇關(guān)于Vue3封裝全局自定義指令實現(xiàn)按鈕權(quán)限控制功能的文章就介紹到這了,更多相關(guān)Vue3自定義指令按鈕權(quán)限控制內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
中秋節(jié)快要到啦,我們一起用Vue創(chuàng)建一個簡單的連連看游戲,連連看大家一定都玩過吧,通過消除相同的圖案來清理棋盤,小編將一步步引導(dǎo)大家完成整個游戲的制作過程,讓我們開始吧,一起為中秋節(jié)增添一些互動和娛樂2023-09-09
快速解決Error: error:0308010C:digital envelope ro
因為 node.js V17版本中最近發(fā)布的OpenSSL3.0, 而OpenSSL3.0對允許算法和密鑰大小增加了嚴格的限制,下面通過本文給大家分享快速解決Error: error:0308010C:digital envelope routines::unsupported的三種解決方案,感興趣的朋友一起看看吧2024-02-02
Vuex是一個專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化,下面這篇文章主要給大家介紹了關(guān)于Vue3中vuex的基本使用方法,需要的朋友可以參考下2022-04-04
本篇文章主要介紹了詳解基于mpvue的小程序markdown適配解決方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要為大家詳細介紹了vue封裝一個日歷組件的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了如何使用vue3打造一個物料庫，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-05-05
這篇文章主要介紹了Vue Render函數(shù)原理及代碼實例解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
實現(xiàn)暗黑主題的方式有很多種,也有很多成型的框架可以直接使用,下面這篇文章主要給大家介紹了關(guān)于基于vue3&element-plus的暗黑模式的相關(guān)資料,需要的朋友可以參考下2022-12-12
Vue中狀態(tài)管理器(vuex)詳解以及實際應(yīng)用場景
Vuex是一個專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,下面這篇文章主要給大家介紹了關(guān)于Vue中狀態(tài)管理器(vuex)詳解以及實際應(yīng)用場景的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
這篇文章介紹了vue實現(xiàn)網(wǎng)頁語言國際化切換的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2021-11-11