Vue 3 自定義權限指令 v-action的作用

更新時間：2025年04月02日 11:21:19 作者：代碼里的小貓咪

在實際的前端開發(fā)中,尤其是涉及到權限管理的系統(tǒng),我們經(jīng)常需要根據(jù)用戶的權限動態(tài)控制某些按鈕的顯示和隱藏,這篇文章主要介紹了Vue 3 自定義權限指令 v-action的相關知識,需要的朋友可以參考下

在實際的前端開發(fā)中，尤其是涉及到權限管理的系統(tǒng)，我們經(jīng)常需要根據(jù)用戶的權限動態(tài)控制某些按鈕的顯示和隱藏。例如：在一個后臺管理系統(tǒng)中，不同角色的用戶可能擁有不同的操作權限，比如「查看」、「編輯」、「刪除」等。為了避免用戶無權操作某些功能，通常需要在組件或模板中手動添加權限判斷邏輯。

然而，如果在每個需要權限控制的地方都手寫 v-if 或 v-show 來判斷，代碼會變得冗余且難以維護。為了解決這個問題，可以利用 Vue 3 的自定義指令 來封裝權限控制邏輯，使得權限管理變得更直觀、可復用，進而提升代碼的可讀性和可維護性。

舉出一個實際可用的 ??

/**
 * 根據(jù)權限（binding）決定 el 的顯示隱藏
 * @param {*} el 指令綁定的 DOM 元素，Vue 傳遞給指令的 el 參數(shù)
 * @param {*} binding 指令的綁定值對象，包含傳遞指令的值。比如：v-action="'actionCode'"，那么 binding.value 就是 'actionCode'。
 * @returns
 */
function updateVisibility(el, binding) {
  // 獲取權限列表
  const { _actions } = window;
  // 如果沒有指定權限值，默認「顯示」
  if (!binding.value) {
    el.style.display = '';
    return;
  }
  // 根據(jù)權限判斷是否隱藏
  el.style.display = _actions && !_actions.includes(binding.value) ? 'none' : '';
}
// action：自定義指令對象
const action = {
  // 指令綁定的元素被插入到 DOM 時觸發(fā)
  mounted(el, binding) {
    updateVisibility(el, binding);
  },
  // 當組件 props 或 data 發(fā)生變化導致 DOM 更新 時觸發(fā)。
  updated(el, binding) {
    updateVisibility(el, binding);
  },
};
// 注冊全局指令
export default {
  install(app) {
    // 在 Vue 應用上 注冊全局指令 v-action，讓所有組件都可以使用 v-action 來控制元素的顯示。
    app.directive('action', action);
  },
};

這個代碼是一個 Vue 3 的自定義指令（v-action），用于根據(jù)用戶的權限控制元素的顯示與隱藏。它會在 mounted 和 updated 階段檢查權限，并根據(jù)權限決定是否顯示元素。

?? 總結

v-action 這個指令的作用是 根據(jù)用戶權限 (window._actions) 控制元素的顯示。

用戶沒有權限 → 隱藏該元素（display: none）。
用戶有權限 → 顯示該元素（display: ''）。
沒有傳遞 v-action 的值 → 默認顯示。

????????? 使用方式

在 Vue 組件的模板中：

<template>
  <button v-action="'_EDIT'">編輯</button>
</template>

只有 _actions 數(shù)組包含 '_EDIT'，按鈕才會顯示。如果 window._actions 不包含 '_EDIT'，按鈕會被隱藏。

這個代碼在 Vue 3 項目里非常實用，特別適用于 權限控制場景！

到此這篇關于Vue 3 自定義權限指令 v-action的作用的文章就介紹到這了,更多相關Vue自定義權限指令 v-action內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Vue路由與a標簽鏈接錨點發(fā)生沖突問題及解決
這篇文章主要介紹了Vue路由與a標簽鏈接錨點發(fā)生沖突問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue移動端裁剪圖片結合插件Cropper的使用實例代碼
本篇文章主要介紹了vue移動端裁剪圖片結合插件Cropper的使用實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-07-07
vue實現(xiàn)折疊展開收縮動畫效果
這篇文章主要介紹了vue實現(xiàn)折疊展開收縮動畫,通過scrollHeight實現(xiàn),本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧
2023-11-11
解決vue.js 數(shù)據(jù)渲染成功仍報錯的問題
今天小編就為大家分享一篇解決vue.js 數(shù)據(jù)渲染成功仍報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
vue項目中$t()的意思是什么
這篇文章主要介紹了vue項目中$t()的意思是什么，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue + Element UI圖片上傳控件使用詳解
這篇文章主要為大家詳細介紹了Vue + Element UI圖片上傳控件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-08-08
vue打包之后的dist文件如何運行
我們知道使用webpack打包vue項目后會生成一個dist文件夾,dist文件夾下有html文件和其他css、js以及圖片等,那么打包后的文件該如何正確運行呢?這篇文章主要給大家介紹了關于vue打包之后的dist文件如何運行的相關資料,需要的朋友可以參考下
2023-05-05
Vue插件從封裝到發(fā)布的完整步驟記錄
這篇文章主要給大家介紹了關于Vue插件從封裝到發(fā)布的完整步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-02-02
Vue新手指南之環(huán)境搭建及入門
vue就是前端上的Java,前端上的C#,有個前端的虛擬DOM引擎,設計理念和Java/C#類似,這篇文章主要給大家介紹了關于Vue新手指南之環(huán)境搭建及入門的相關資料,需要的朋友可以參考下
2021-08-08
解決vue中this.$set()不更新問題
我在做一個附件刪除功能的時候發(fā)現(xiàn),明明打印出來附件已經(jīng)沒有數(shù)據(jù)了但是頁面就是不刷新, this.$set()不生效,所以本文小編給大家介紹了vue中this.$set()不更新的解決方法,需要的朋友可以參考下
2023-11-11