v-permission

权限指令

• 采用 v-permission 自定义指令，如果用户有该权限会显示元素，否则会隐藏

传入的code码指令会动态显隐元素

<template>
  <div class="content-wrap">
    <adv-button
      v-permission="['user:list:view', 'user:list:delete']"
      type="primary"
    >
      查看
    </adv-button>
    <adv-button type="primary" v-permission="'user:list:update'">
      编辑
    </adv-button>
    <adv-button type="primary" v-permission="'user:list:add'">新增</adv-button>
    <adv-button type="danger" v-permission="'user:list:delete'">
      删除
    </adv-button>
  </div>
</template>

<script setup lang="ts">
const allPermissionList = [
  'user:list:view',
  'user:list:update',
  'user:list:delete',
  'user:list:add',
];
window && localStorage.setItem('permission', JSON.stringify(allPermissionList));
</script>

<style scoped></style>

判断是否有权限方法

<template>
  <div class="content-wrap">
    是否拥有编辑权限：{{ checkPermission('user:list:update') }}
  </div>
</template>

<script setup lang="ts">
import { checkPermission } from 'leisure-lib';
const allPermissionList = [
  'user:list:view',
  'user:list:update',
  'user:list:delete',
  'user:list:add',
];
window && localStorage.setItem('permission', JSON.stringify(allPermissionList));
</script>

<style scoped></style>

属性

属性名	类型	默认值	说明
default	string[]|string	无	传入的校验code

方法

方法名	参数	返回值值	说明
checkPermission	string[]|string	boolean	传入的校验code,返回是否有权限的Boolean

判断方法

import { checkPermission } from 'leisure-lib';

console.log(checkPermission('code'));