Base
方法
useStore 数据缓存
app 应用信息,应用名称,配置参数
user 用户信息,用户设置,退出等
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 / number | 36 | |
shape | 模式 | string | square / circle | square |
background-color | 背景颜色 | string | 颜色值 | #f7f7f7 |
color | 字体颜色 | string | 颜色值 | #cccccc |
cl-column-custom
cl-table
自定义列
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
name | localStorage 存储标识,必填 | string | ||
columns | 和 ClTable.Column 一样 | string |
cl-date-text
日期文本显示
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
modelValue | 绑定值 | string | ||
format | 日期格式 | string | YYYY-MM-DD HH:mm:ss |
cl-svg
svg 图标,加载所有模块下 static
下 icon-*.svg
的文件
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
name | 图标名称,对应文件名 | string | ||
className | 样式名称 | string | ||
size | 图标大小 | string / number |
cl-image
图片,已配置点击预览
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
modelValue | 资源链接 | string / array | ||
src | 资源链接 | string / array | ||
size | 图片大小 | number / array | 100 | |
fit | 裁剪方式 | string | fill / contain / cover / none / scale-down | cover |
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 / boolean | true | |
inactiveValue | 未选值 | number / string / boolean | false |
cl-view-group
左右两侧布局,以兼容手机端
插槽
插槽名 | 说明 |
---|---|
left | 左侧菜单 |
right | 右侧内容 |
暴露变量、方法
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
selected | 选中值 | 执行 select 方法后传入的值 | ||
isExpand | 是否展开状态 | boolean | true | |
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>