vue 自定义指令钩子函数的使用，按钮权限，无权限按钮禁止点击

import useStore from '@/store';
import {
    
     Directive, DirectiveBinding } from 'vue';

const disableClick = (event: Event) => event && event.stopImmediatePropagation();

/**
 * 按钮权限校验
 */
export const perm: Directive = {
    
    
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    
    
    const {
    
     user } = useStore();
    binding.value = binding.value || [];
    if (binding.value) {
    
    //binding.value绑定元素的权限码
      const hasPerm = user.resourceList?.some(perm => binding.value.includes(perm));//user.resourceList//用户所有按钮权限码
      if (!hasPerm) {
    
    //按钮如果有权限，不做任何处理，如果没有权限，页面上的按钮增加禁选类名和属性，icon增加禁止点击事件
        el.classList.add('is-disabled');//element-plus el-button 类名
        el.setAttribute('disabled', 'disabled');//element-plus el-button 属性
        el.addEventListener('click', disableClick, true);//图标元素禁止点击事件
      }
    } else {
    
    
      throw new Error("need perms! Like v-perm=\"['sys:user:add','sys:user:edit']\"");
    }
  },
  unmounted(el: HTMLElement) {
    
    
    el.removeEventListener('click', disableClick);
  },
};

<el-button v-perm="['qx:xz:00059']" type="success" >新增</el-button>
<el-icon v-perm="['qx:gx:00060']" class="action-icon" @click.stop="handleUpdate(scope.row)">
                    <EditPen />//编辑
</el-icon>