指令

介绍模板项目中现有指令(directives)内容。

v-permission

通过 v-permission 指令的方式控制用户权限。

使用方式：

<el-button v-permission="[FM_FILE.FC_CAD_PREVIEW.DEL]">删除</el-button>
或者
<el-button v-permission="FM_FILE.FC_CAD_PREVIEW.DEL">删除</el-button>

源码见src/directives/permission/index

/**
 * @description: 控制用户操作权限
 */
import { Directive } from 'vue';
import { useUserStore } from '@/store/user';
import { intersection } from '@/utils/index';
import { isPlainArray } from '@/utils/validate';

export const permission: Directive = {
  mounted(el: any, binding: any) {
    const userStore = useUserStore();
    const authKeys: string[] = userStore.authKeys;

    const { value } = binding; // 指令接收到的值
    if (value && typeof value === 'string') {
      const hasPermission = authKeys.includes(value);
      if (!hasPermission) {
        el.remove();
      }
    } else if (value && isPlainArray(value)) { // 指令是数组
      const hasPermission = intersection(authKeys, value).length > 0;
      if (!hasPermission) {
        el.remove();
      }
    } else {
      throw new Error("need roles! Like v-permission='[FM_FILE.FC_CAD_PREVIEW.R]' or v-permission='FM_FILE.FC_CAD_PREVIEW.R'");
    }
  },
};

v-blur

通过 v-blur 指令解决 elementPlus 的 button 按钮点击之后不会复原问题。

使用方式：

<el-button 
  v-blur 
  v-permission="[FM_FILE.FC_CAD_PREVIEW.DEL]">
  删除
</el-button>
或者

源码见src/directives/blur/index

/**
 * @description: 解决 elementPlus 的 button 按钮点击之后不会复原问题
 */
import { Directive, type DirectiveBinding, type VNode } from 'vue';

const elBlur = (el: HTMLElement) => () => el?.blur();
export const blur: Directive = {
  created(el: HTMLElement, binding: DirectiveBinding, vnode: VNode) {
    if (vnode?.type === 'button') {
      el.addEventListener('click', elBlur(el));
    }
  },
  unmounted(el: HTMLElement) {
    el.removeEventListener('click', elBlur(el));
  },
};