背景需求：ERP系統需增加 ”按鈕權限控制“ 功能，對權限的控制粒度要普及到按鈕層級。
預期
按鈕權限控制的交互方式無非兩種："不可見" 和 "可見不可點"。
不可見
不可見的交互方式相對簡單，我們可使用 v-if 控制其是否顯示。使用 v-show 也行，但不夠保險，畢竟 v-show 只是把樣式改成 display: none，在真實的 DOM 渲染還是存在的，所以更推薦 v-if 來控制不可見。
可見不可點
“看是能看了，但你不行了”。
- 樣式控制（得加個禁用樣式），什么 cursor: not-allowed ，置灰之類的云云；
- 不可點擊，即要禁用或屏蔽點擊事件，好像有 preventDefault/stopProgration 可實現；
最終產品需求選擇了 “可見不可點”，原因可能就覺得不可見太簡單了。(¬_¬)
思路探索
- 給按鈕點擊事件的回調函數，加個包裝函數，對其權限控制，進行事件攔截與觸發。相當是做了個代理，有點高階組件那意思（但對現有業務改動太大，得對每個@click綁定函數逐個修改，遂放棄該方案）；
- 阻止按鈕點擊事件冒泡與觸發，貌似能用上 preventDefautl/stopProgration, 感覺能用指令的方式對 DOM 元素進行事件監聽，允許的話則讓事件正常執行，不允許則攔截屏蔽；
實踐方案
最終選擇了指令的方式，最小成本擴展，避免改動現有業務代碼邏輯。
針對權限控制需做點擊劫持的元素：
- el-button
- btn-wrapper（自封裝組件）
- div/span/a 等標簽
具體實現方案請看下文：
權限入口：Vuex 控制，全局使用
|
1
2
3
4
5
6
7
8
9
10
11
12
|
// 用戶登陸后，獲取該用戶權限 CODE 碼，并存儲至 storethis.$store.commit('SET_AUTH_CODE', authCodeList);SET_AUTH_CODE: (state, acthCode) => { if (acthCode) { state.autoCodeList = acthCode; } setStore({ name: 'autoCodeList', content: state.autoCodeList || [], });} |
定義權限指令
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
const disableClickFn = (event) => { event && event.stopImmediatePropagation();}export const hasPermission = () => { Vue.directive('permission', { bind(el, binding) { let disalbe = true; if (autoCodeList.length && autoCodeList.includes(binding.value)) { disable = false; } if (disable) { el.classList.add('permission-disabled'); el.setAttribute('disabled', 'disabled'); el.addEventListener('click', disableClickFn, true); } }, unbind(el) { el.removeEventListener('click', disableClickFn); } });}; |
- 首先 addEventListener 第三個參數我們使用 useCapture 為 true 讓其在捕獲階段觸發，因此這里的事件監聽器會優先 @click 觸發回調；
- 其次使用了 stopImmediatePropagation 阻止事件冒泡和其它相同事件監聽器的觸發；
如果多個事件監聽器被附加到相同元素的相同事件類型上，當此事件觸發時，它們會按其被添加的順序被調用。如果在其中一個事件監聽器中執行 stopImmediatePropagation() ，那么剩下的事件監聽器都不會被調用。MSDN - stopImmediatePropagation
增加禁用的 CSS 樣式
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
.permission-disabled { position: relative; cursor: not-allowed !important; pointer-events: none; // 阻止元素成為鼠標事件 border:none; background-image: none; &::after { content: ''; position: absolute; bottom: 0; left: 0px; right: 0px; height: 100%; z-index: 9; background: rgba(255, 255, 255, 0.5); }} |
這里使用了一個比較陌生的 CSS 屬性， pointer-events。
CSS3 的 pointer-events 屬性指定在什么情況下 (如果有) 某個特定的圖形元素可以成為鼠標事件的 target。 更多用法參考：MSDN - pointer-events
這里使用 pointer-events 只是一個輔助功能，并不一定意味著元素上的事件監聽器永遠不會觸發，如果后代元素有指定 pointer-events 并允許成為事件目標的話，是可以觸發父元素事件，而且單純依靠 CSS 屬性來控制不點擊，還是有風險，因此這里僅作輔助作用。
全局 "權限判斷" 工具函數
|
1
2
3
4
5
6
|
import { getStore, } from '@/util/store';const autoCodeList = getStore({ name: 'autoCodeList', }) || [];export function hasPermission(authName) { return !(autoCodeList.length > 0 && autoCodeList.includes(authName));} |
具體使用
|
1
2
3
4
5
|
// 指令方式（這里的 oms/order/save 就是對應用戶登陸時 CODE 權限碼）<el-button v-permission="'oms:order:save'">保存</el-button>// 函數方式<el-button :disabled="hasPermission('oms:order:save')"></el-button> |
到此這篇關于vue基于Element按鈕權限實現方案的文章就介紹到這了,更多相關Element 按鈕權限內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://juejin.cn/post/6943747988871348255
