vue基於Element按鈕許可權實現方案
背景需求：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 控制，全域性使用
// 使用者登陸後，獲取該使用者許可權 CODE 碼，並存儲至 store
this.$store.commit('SET_AUTH_CODE',authCodeList);
SET_AUTH_CODE: (state,acthCode) => {
if (acthCode) 程式設計客棧{
state.autoCodeList = acthCode;
}
setStore({
name: 'autoCodeList',content: state.autoCodeList || [],});
}
定義許可權指令
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 樣式
.permission-disabled {
position: http://www.cppcns.comrelative;
cursor: not-allowed !important;
pointer-events: none; // 阻止元素成為滑鼠事件
border:none;
background-image: none;
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0px;
ri程式設計客棧ght: 0px;
height: 100%;
z-index: 9;
background: rgba(255,255,0.5);
}
}
這裡使用了一個比較陌生的 CSS 屬性， pointer-events。
CSS3 的 pointer-events 屬性指定在什麼情況下 (如果有) 某個特定的圖形元素可以成為滑鼠事件的 target。 更多用法參考：MSDN - pointer-events
這裡使用 pointer-events 只是一個輔助功能，並不一定意味著元素上的事件監聽器永遠不會觸發，如果後代元素有指定 pointer-events 並允許成為事件目標的話，是可以觸發父元素事件，而且單純依靠 CSS 屬性來控制不點選，還是有www.cppcns.com風險，因此這裡僅作輔助作用。
全域性 "許可權判斷" 工具函式
import { getStore,} from '@/util/store';
const autoCodeList = getStore({ name: 'autoCodeList',}) || [];
export function hasPermission(authName) {
return !(autoCodeList.length > 0 && autoCodeList.includes(authName));
}
具體使用
// 指令方式（這裡的 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 按鈕許可權內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！