背景需求：ERP系統(tǒng)需增加 ”按鈕權限控制“ 功能，對權限的控制粒度要普及到按鈕層級。

預期

按鈕權限控制的交互方式無非兩種："不可見" 和 "可見不可點"。

不可見

不可見的交互方式相對簡單，我們可使用 v-if 控制其是否顯示。使用 v-show 也行，但不夠保險，畢竟 v-show 只是把樣式改成 display: none，在真實的 DOM 渲染還是存在的，所以更推薦 v-if 來控制不可見。

可見不可點

“看是能看了，但你不行了”。

• 樣式控制（得加個禁用樣式），什么 cursor: not-allowed ，置灰之類的云云；
• 不可點擊，即要禁用或屏蔽點擊事件，好像有 preventDefault/stopProgration 可實現(xiàn)；

最終產(chǎn)品需求選擇了 “可見不可點”，原因可能就覺得不可見太簡單了。(¬_¬)

思路探索

• 給按鈕點擊事件的回調(diào)函數(shù)，加個包裝函數(shù)，對其權限控制，進行事件攔截與觸發(fā)。相當是做了個代理，有點高階組件那意思（但對現(xiàn)有業(yè)務改動太大，得對每個@click綁定函數(shù)逐個修改，遂放棄該方案）；
• 阻止按鈕點擊事件冒泡與觸發(fā)，貌似能用上 preventDefautl/stopProgration, 感覺能用指令的方式對 DOM 元素進行事件監(jiān)聽，允許的話則讓事件正常執(zhí)行，不允許則攔截屏蔽；

實踐方案

最終選擇了指令的方式，最小成本擴展，避免改動現(xiàn)有業(yè)務代碼邏輯。
針對權限控制需做點擊劫持的元素：

• el-button
• btn-wrapper（自封裝組件）
• div/span/a 等標簽

具體實現(xiàn)方案請看下文：

權限入口：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 第三個參數(shù)我們使用 useCapture 為 true 讓其在捕獲階段觸發(fā)，因此這里的事件監(jiān)聽器會優(yōu)先 @click 觸發(fā)回調(diào)；
  
• 其次使用了 stopImmediatePropagation 阻止事件冒泡和其它相同事件監(jiān)聽器的觸發(fā)；

如果多個事件監(jiān)聽器被附加到相同元素的相同事件類型上，當此事件觸發(fā)時，它們會按其被添加的順序被調(diào)用。如果在其中一個事件監(jiān)聽器中執(zhí)行 stopImmediatePropagation() ，那么剩下的事件監(jiān)聽器都不會被調(diào)用。MSDN - stopImmediatePropagation

增加禁用的 CSS 樣式

.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 只是一個輔助功能，并不一定意味著元素上的事件監(jiān)聽器永遠不會觸發(fā)，如果后代元素有指定 pointer-events 并允許成為事件目標的話，是可以觸發(fā)父元素事件，而且單純依靠 CSS 屬性來控制不點擊，還是有風險，因此這里僅作輔助作用。

全局 "權限判斷" 工具函數(shù)

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>

// 函數(shù)方式
<el-button :disabled="hasPermission('oms:order:save')"></el-button>

到此這篇關于vue基于Element按鈕權限實現(xiàn)方案的文章就介紹到這了,更多相關Element 按鈕權限內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論