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