Base

方法

  • useStore 数据缓存

    1. app 应用信息,应用名称,配置参数

    2. user 用户信息,用户设置,退出等

    3. menu 菜单信息,路由列表,菜单组

    import { useStore } from "/$/base";
    
    const { app, user, menu } = useStore();
    
  • checkPerm(value: string | { or?: string[]; and?: string[] }) 检测是否有权限

    import { checkPerm } from "/$/base";
    import { useCool } from "/@/cool";
    
    const { service } = useCool();
    
    // 单个
    checkPerm(service.base.sys.user.permission.add);
    
    // 或者
    checkPerm({
    	or: [service.base.sys.user.permission.add, service.base.sys.user.permission.update]
    });
    
    // 并且
    checkPerm({
    	and: [service.base.sys.user.permission.add, service.base.sys.user.permission.update]
    });
    

组件

cl-avatar

头像

参数说明类型可选值默认值
modelValue资源链接string
src资源链接string
size尺寸string / number36
shape模式stringsquare / circlesquare
background-color背景颜色string颜色值#f7f7f7
color字体颜色string颜色值#cccccc

cl-column-custom

cl-table 自定义列

参数说明类型可选值默认值
namelocalStorage 存储标识,必填string
columns和 ClTable.Column 一样string

cl-date-text

日期文本显示

参数说明类型可选值默认值
modelValue绑定值string
format日期格式stringYYYY-MM-DD HH:mm:ss

cl-svg

svg 图标,加载所有模块下 staticicon-*.svg 的文件

参数说明类型可选值默认值
name图标名称,对应文件名string
className样式名称string
size图标大小string / number

cl-image

图片,已配置点击预览

参数说明类型可选值默认值
modelValue资源链接string / array
src资源链接string / array
size图片大小number / array100
fit裁剪方式stringfill / contain / cover / none / scale-downcover

cl-select

下拉选择,设置 prop 会自动刷新列表并带入请求参数 { page: 1, [prop]: value }

参数说明类型可选值默认值
modelValue绑定值string / number
options列表array
prop字段string

cl-switch

开关,cl-table 中使用,值改变时会自动调用 update 接口

参数说明类型可选值默认值
modelValue绑定值number / string / boolean
activeValue选中值number / string / booleantrue
inactiveValue未选值number / string / booleanfalse

cl-view-group

左右两侧布局,以兼容手机端

插槽
插槽名说明
left左侧菜单
right右侧内容
暴露变量、方法
参数说明类型可选值默认值
selected选中值执行 select 方法后传入的值
isExpand是否展开状态booleantrue
setTitle修改右侧标题function(title: stirng)
expand展开、收起function(status?: boolean)
select选择某一项function(item:any)
示例

必须绑定 ref="ViewGroup",这样子组件才能使用 useViewGroup 获取

<cl-view-group ref="ViewGroup">
	<template #left>菜单</template>
	<template #right>内容</template>
</cl-view-group>

<script setup lang="ts">
	import { useViewGroup } from "/$/base";

	const { ViewGroup } = useViewGroup();

	// 设置标题
	ViewGroup.value.setTitle("标题");
</script>
Last Updated: