快捷導(dǎo)航

Vue 3 自定義權(quán)限指令 v-action的作用

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

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

在實際的前端開發(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 來判斷，代碼會變得冗余且難以維護。為了解決這個問題，可以利用 Vue 3 的自定義指令 來封裝權(quán)限控制邏輯，使得權(quán)限管理變得更直觀、可復(fù)用，進而提升代碼的可讀性和可維護性。

舉出一個實際可用的 ??

/**
 * 根據(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)限值，默認「顯示」
  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 的值 → 默認顯示。

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

在 Vue 組件的模板中：

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

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

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

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

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue 3 自定義權(quán)限指令 v-action的作用

目錄

舉出一個實際可用的 ??

?? 總結(jié)

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

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具