Vue 3 自定義權(quán)限指令 v-action的作用
在實(shí)際的前端開發(fā)中，尤其是涉及到權(quán)限管理的系統(tǒng)，我們經(jīng)常需要根據(jù)用戶的權(quán)限動態(tài)控制某些按鈕的顯示和隱藏。例如：在一個后臺管理系統(tǒng)中，不同角色的用戶可能擁有不同的操作權(quán)限，比如「查看」、「編輯」、「刪除」等。為了避免用戶無權(quán)操作某些功能，通常需要在組件或模板中手動添加權(quán)限判斷邏輯。
然而，如果在每個需要權(quán)限控制的地方都手寫 v-if 或 v-show 來判斷，代碼會變得冗余且難以維護(hù)。為了解決這個問題，可以利用 Vue 3 的自定義指令 來封裝權(quán)限控制邏輯，使得權(quán)限管理變得更直觀、可復(fù)用，進(jìn)而提升代碼的可讀性和可維護(hù)性。
舉出一個實(shí)際可用的 ??
/**
* 根據(jù)權(quán)限（binding）決定 el 的顯示隱藏
* @param {*} el 指令綁定的 DOM 元素，Vue 傳遞給指令的 el 參數(shù)
* @param {*} binding 指令的綁定值對象，包含傳遞指令的值。比如：v-action="'actionCode'"，那么 binding.value 就是 'actionCode'。
* @returns
*/
function updateVisibility(el, binding) {
// 獲取權(quán)限列表
const { _actions } = window;
// 如果沒有指定權(quán)限值，默認(rèn)「顯示」
if (!binding.value) {
el.style.display = '';
return;
}
// 根據(jù)權(quán)限判斷是否隱藏
el.style.display = _actions && !_actions.includes(binding.value) ? 'none' : '';
}
// action：自定義指令對象
const action = {
// 指令綁定的元素被插入到 DOM 時觸發(fā)
mounted(el, binding) {
updateVisibility(el, binding);
},
// 當(dāng)組件 props 或 data 發(fā)生變化導(dǎo)致 DOM 更新 時觸發(fā)。
updated(el, binding) {
updateVisibility(el, binding);
},
};
// 注冊全局指令
export default {
install(app) {
// 在 Vue 應(yīng)用上 注冊全局指令 v-action，讓所有組件都可以使用 v-action 來控制元素的顯示。
app.directive('action', action);
},
};這個代碼是一個 Vue 3 的自定義指令（v-action）， 用于根據(jù)用戶的權(quán)限控制元素的顯示與隱藏。它會在 mounted 和 updated 階段檢查權(quán)限，并根據(jù)權(quán)限決定是否顯示元素。
?? 總結(jié)
v-action 這個指令的作用是 根據(jù)用戶權(quán)限 (window._actions) 控制元素的顯示。
- 用戶沒有權(quán)限 → 隱藏該元素（display: none）。
- 用戶有權(quán)限 → 顯示該元素（display: ''）。
- 沒有傳遞 v-action 的值 → 默認(rèn)顯示。
????????? 使用方式
在 Vue 組件的模板中：
<template> <button v-action="'_EDIT'">編輯</button> </template>
只有 _actions 數(shù)組包含 '_EDIT'，按鈕才會顯示。如果 window._actions 不包含 '_EDIT'，按鈕會被隱藏。
這個代碼在 Vue 3 項(xiàng)目里非常實(shí)用，特別適用于 權(quán)限控制場景！
到此這篇關(guān)于Vue 3 自定義權(quán)限指令 v-action的作用的文章就介紹到這了,更多相關(guān)Vue自定義權(quán)限指令 v-action內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue實(shí)現(xiàn)彈窗引用另一個頁面窗口，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
仿照e簽寶,實(shí)現(xiàn)pdf電子簽章?=>?拿到pdf鏈接,移動章的位置,獲取章的坐標(biāo),怎么實(shí)現(xiàn)呢,下面小編給大家介紹vue2實(shí)現(xiàn)pdf電子簽章問題記錄,感興趣的朋友一起看看吧2023-12-12
這篇文章主要介紹了解決Vue項(xiàng)目中tff報(bào)錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
在項(xiàng)目開發(fā)中,我們經(jīng)常會封裝一些全局組件,然后在入口文件中統(tǒng)一導(dǎo)入,所以本文主要為大家詳細(xì)介紹了Vue如何批量注冊全局組件,感興趣的小伙伴可以了解下2024-01-01
這篇文章主要為大家詳細(xì)介紹了vue3中解決各場景l(fā)oading過度的五種方法,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,感興趣的小伙伴可以學(xué)習(xí)一下2023-11-11
這篇文章主要介紹了VUE3+TS獲取組件類型的方法踩坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
解讀element-ui使用el-upload,before-upload函數(shù)不好使的問題
這篇文章主要介紹了解讀element-ui使用el-upload,before-upload函數(shù)不好使的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
vue動態(tài)綁定input,動態(tài)添加input實(shí)現(xiàn)方式
這篇文章主要介紹了vue動態(tài)綁定input,動態(tài)添加input實(shí)現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2026-03-03
這篇文章主要給大家介紹了關(guān)于vue如何動態(tài)實(shí)時的顯示時間，以及vue時間戳 獲取本地時間實(shí)時更新的相關(guān)資料，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
vant steps流程圖的圖標(biāo)使用slot自定義方式
這篇文章主要介紹了vant steps流程圖的圖標(biāo)使用slot自定義方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06