Vue3封裝全局自定義指令實(shí)現(xiàn)按鈕權(quán)限控制功能實(shí)例

更新時(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)識(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編寫(xiě)一個(gè)月餅連連看游戲
中秋節(jié)快要到啦,我們一起用Vue創(chuàng)建一個(gè)簡(jiǎn)單的連連看游戲,連連看大家一定都玩過(guò)吧,通過(guò)消除相同的圖案來(lái)清理棋盤(pán),小編將一步步引導(dǎo)大家完成整個(gè)游戲的制作過(guò)程,讓我們開(kāi)始吧,一起為中秋節(jié)增添一些互動(dòng)和娛樂(lè)
2023-09-09
快速解決Error: error:0308010C:digital envelope ro
因?yàn)?nbsp;node.js V17版本中最近發(fā)布的OpenSSL3.0, 而OpenSSL3.0對(duì)允許算法和密鑰大小增加了嚴(yán)格的限制,下面通過(guò)本文給大家分享快速解決Error: error:0308010C:digital envelope routines::unsupported的三種解決方案,感興趣的朋友一起看看吧
2024-02-02
Vue3中vuex的基本使用方法實(shí)例
Vuex是一個(gè)專為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式,它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化,下面這篇文章主要給大家介紹了關(guān)于Vue3中vuex的基本使用方法,需要的朋友可以參考下
2022-04-04
詳解基于mpvue的小程序markdown適配解決方案
本篇文章主要介紹了詳解基于mpvue的小程序markdown適配解決方案，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-05-05
vue日歷組件的封裝方法
這篇文章主要為大家詳細(xì)介紹了vue封裝一個(gè)日歷組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
如何使用vue3打造一個(gè)物料庫(kù)
這篇文章主要介紹了如何使用vue3打造一個(gè)物料庫(kù)，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下
2021-05-05
Vue Render函數(shù)原理及代碼實(shí)例解析
這篇文章主要介紹了Vue Render函數(shù)原理及代碼實(shí)例解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-07-07
基于vue3&element-plus的暗黑模式實(shí)例詳解
實(shí)現(xiàn)暗黑主題的方式有很多種,也有很多成型的框架可以直接使用,下面這篇文章主要給大家介紹了關(guān)于基于vue3&element-plus的暗黑模式的相關(guān)資料,需要的朋友可以參考下
2022-12-12
Vue中狀態(tài)管理器(vuex)詳解以及實(shí)際應(yīng)用場(chǎng)景
Vuex是一個(gè)專為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式,下面這篇文章主要給大家介紹了關(guān)于Vue中狀態(tài)管理器(vuex)詳解以及實(shí)際應(yīng)用場(chǎng)景的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11
vue實(shí)現(xiàn)網(wǎng)頁(yè)語(yǔ)言國(guó)際化切換
這篇文章介紹了vue實(shí)現(xiàn)網(wǎng)頁(yè)語(yǔ)言國(guó)際化切換的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2021-11-11