Vue3封裝全局自定義指令實(shí)現(xiàn)按鈕權(quán)限控制功能實(shí)例
更新時間：2025年07月10日 10:28:09 作者：小碼龍~
在Vue應(yīng)用中自定義指令是一種強(qiáng)大的功能,可以用于封裝DOM操作邏輯,這篇文章主要介紹了Vue3封裝全局自定義指令實(shí)現(xiàn)按鈕權(quán)限控制功能的相關(guān)資料,需要的朋友可以參考下
一、什么是按鈕權(quán)限控制
概念：根據(jù)當(dāng)前用戶的權(quán)限數(shù)據(jù)控制按鈕的顯示和隱藏
二、思路 (往往是后端返回的權(quán)限標(biāo)識)
后端返回的權(quán)限數(shù)據(jù)模擬
// 模擬權(quán)限mock數(shù)據(jù)
const permissions = [
"park:bulidng:add",
"park:bulidng:del",
"park:bulidng:edit",
]
思路：每一個需要做權(quán)限控制的按鈕都有一個自己獨(dú)有的 標(biāo)識 , 如果標(biāo)識可以在權(quán)限數(shù)據(jù)列表中找到，則顯示，找不到就隱藏
三、實(shí)現(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é)
這樣就實(shí)現(xiàn)了通過全局自定義指令來實(shí)現(xiàn)按鈕權(quán)限的控制了。
到此這篇關(guān)于Vue3封裝全局自定義指令實(shí)現(xiàn)按鈕權(quán)限控制功能的文章就介紹到這了,更多相關(guān)Vue3自定義指令按鈕權(quán)限控制內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
國密SM4算法是一種對稱加密算法，適用于對稱密鑰加密和解密的場景，這篇文章主要介紹了vue使用國密SM4進(jìn)行加密、解密,需要的朋友可以參考下2023-07-07
詳解vue中的動態(tài)組件component和keep-alive
這篇文章主要介紹了詳解vue中的動態(tài)組件component和keep-alive的相關(guān)資料,這大家需要注意include屬性和exclude屬性只能用一個,不能同時使用,本文給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-11-11
這篇文章主要為大家詳細(xì)介紹了vue+rem自定義輪播圖效果，手指觸摸左滑和右滑，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
全面解析vue router 基本使用(動態(tài)路由，嵌套路由)
路由，其實(shí)就是指向的意思，當(dāng)我點(diǎn)擊頁面上的home按鈕時，頁面中就要顯示home的內(nèi)容，如果點(diǎn)擊頁面上的about 按鈕，頁面中就要顯示about 的內(nèi)容。這篇文章主要介紹了vue router 基本使用 ,需要的朋友可以參考下2018-09-09
Vue項(xiàng)目pdf(base64)轉(zhuǎn)圖片遇到的問題及解決方法
這篇文章主要介紹了Vue項(xiàng)目pdf(base64)轉(zhuǎn)圖片遇到的問題及解決方法,需要的朋友可以參考下2018-10-10
本文通過實(shí)例代碼給大家介紹Vue IP地址輸入框?qū)崿F(xiàn),代碼簡單易懂,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-10-10
vue、uniapp中動態(tài)添加綁定style、class?9種實(shí)現(xiàn)方法
這篇文章主要介紹了vue、uniapp中動態(tài)添加綁定style、class?9種方法實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-09-09
今天小編就為大家分享一篇關(guān)于vue中$nextTick的用法講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
vue 數(shù)據(jù)雙向綁定的實(shí)現(xiàn)方法
這篇文章主要介紹了vue 數(shù)據(jù)雙向綁定的實(shí)現(xiàn)方法，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
vue對象復(fù)制方式(深拷貝,多層對象拷貝方式在后面)
這篇文章主要介紹了vue對象復(fù)制方式(深拷貝,多層對象拷貝方式在后面)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09