VUE指令和pinia控制按鈕權(quán)限示例詳解
更新時間：2023年09月21日 14:18:51 作者：垃圾簡書_吃棗藥丸
這篇文章主要為大家介紹了VUE指令和pinia控制按鈕權(quán)限示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
權(quán)限state
import {defineStore} from "pinia/dist/pinia";
// 用戶權(quán)限狀態(tài)
export const userPermission = defineStore('userPermission', {
// 狀態(tài)
state: () => {
return {
permissions: ['add', 'delete']
}
},
actions: {},
// 狀態(tài)的一些方法，類似于計算屬性
getters: {}
})編寫指令
import {userPermission} from "./state/pinia-state";
let permissions = userPermission()
app.directive('permission', (el, binding) => {
if (permissions.permissions.indexOf(binding.value) < 0) {
// 移除當(dāng)前元素
el.parentNode.removeChild(el)
}
})按鈕需要的權(quán)限
<el-row class="mb-4">
<el-button v-permission="`add`">增1</el-button>
<el-button v-permission="`delete`" type="primary">刪2</el-button>
<el-button v-permission="`a1`" type="success">改3</el-button>
</el-row>- 效果
以上就是VUE指令和pinia控制按鈕權(quán)限示例詳解的詳細(xì)內(nèi)容，更多關(guān)于VUE指令pinia控制按鈕權(quán)限的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
文章詳細(xì)介紹了Vue中的Diff算法,特別是Vue2的雙端Diff和Vue3的快速Diff算法,雙端Diff通過四個指針從兩端向中間遍歷,減少DOM操作,快速Diff通過預(yù)處理,減少參與復(fù)雜對比的節(jié)點,利用最長遞增子序列優(yōu)化亂序匹配,兩者都利用節(jié)點的key值來優(yōu)化更新過程,提升性能2026-04-04
Vue3的customRef允許自定義響應(yīng)式邏輯,通過get/set控制依賴追蹤與更新觸發(fā),適用于防抖、驗證、異步等場景,最佳實踐包括封裝函數(shù)、正確調(diào)用track/trigger、清理資源及優(yōu)化性能2025-09-09
這篇文章主要介紹了Vue3實現(xiàn)chatgpt的流式輸出過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2026-03-03
本文主要介紹了vue連接本地服務(wù)器的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01
這篇文章主要介紹了vue.js 實現(xiàn)點擊展開收起動畫效果，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
vue父組件中獲取子組件中的數(shù)據(jù)(實例講解)
下面小編就為大家?guī)硪黄獀ue父組件中獲取子組件中的數(shù)據(jù)(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了關(guān)于全局安裝vue-cli遇到的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
vue3?內(nèi)容過多出現(xiàn)滾動條時滾動條自動定位到末端的操作代碼
這篇文章主要介紹了vue3?內(nèi)容過多出現(xiàn)滾動條時滾動條自動定位到末端的操作代碼,本文給大家介紹的非常詳細(xì),需要的朋友參考下吧2024-05-05
vue任意關(guān)系組件通信與跨組件監(jiān)聽狀態(tài)vue-communication
這篇文章主要介紹了vue任意關(guān)系組件通信與跨組件監(jiān)聽狀態(tài)vue-communication，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
文章介紹了如何在Vue.js中使用計算屬性,包括只計算不修改值的情況和可以修改的計算屬性,對于只計算不修改值的情況,可以直接使用computed方法,對于需要修改的計算屬性,計算屬性可以傳入一個對象,包含get和set函數(shù)2025-12-12