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-code-json
json 格式预览
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
modelValue | 绑定值 | string | object | ||
popover | 是否弹出框模式 | boolean | false | |
height | 高度 | string | number | 100% | |
maxHeight | 最大高度 | string | number | 300 |
默认:

弹出框模式:

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 |
下面是做筛选的使用示例:
<template>
<cl-crud>
<cl-row>
<cl-select :options="options.status" prop="status" />
</cl-row>
<cl-row>
<cl-table ref="Table" />
</cl-row>
</cl-crud>
</template>
<script lang="ts" setup>
const options = reactive({
status: [
{
label: "成功",
value: 1,
type: "success"
},
{
label: "失败",
value: 0,
type: "danger"
}
]
});
const Table = useTable({
columns: [
{
label: "状态",
prop: "status",
dict: options.status
}
]
});
</script>
cl-switch
开关,cl-table
中使用,值改变时会自动调用 update
接口
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
modelValue | 绑定值 | number / string / boolean | ||
activeValue | 选中值 | number / string / boolean | true | |
inactiveValue | 未选值 | number / string / boolean | false |
下面是在 cl-table
的使用示例:
<template>
<cl-crud>
<cl-table ref="Table" />
</cl-crud>
</template>
<script lang="ts" setup>
const Table = useTable({
columns: [
{
label: "状态",
prop: "status",
component: {
name: "cl-switch"
}
}
]
});
</script>

cl-view-group
左右两侧布局,以兼容手机端
PC 端:

手机端:


使用:
<cl-view-group ref="ViewGroup">
<template #right>
<cl-crud></cl-crud>
</template>
</cl-view-group>
<script setup lang="ts">
import { useViewGroup } from "/$/base";
const { ViewGroup } = useViewGroup();
</script>
参考 /src/modules/dict/views/list.vue、/src/modules/iot/views/device.vue
Options
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
label | 左侧标题 | string | 组 | |
leftWidth | 左侧宽度 | string | 300px | |
title | 右侧标题 | string | 列表 | |
service | 服务 | Service | ||
onSelect | 选择事件 | (item: ClViewGroup.Item) | ||
onEdit | 编辑事件 | (item?: ClViewGroup.Item) => DeepPartial<ClForm.Options> | ||
onContextMenu | 右键事件 | (item: ClViewGroup.Item) => ClContextMenu.Options | ||
onData | 数据事件 | (list: any[]) => any[] |
插槽
插槽名 | 说明 | 作用域 |
---|---|---|
left | 左侧菜单 | |
item | 左侧列表项 | { item, selected, index } |
item-name | 左侧列表项名称 | { item, selected, index } |
right | 右侧内容 | |
title | 右侧标题 | { selected } |
<cl-view-group ref="ViewGroup">
<template #item="{ item, selected, index }"> {{ item.name }} </template>
</cl-view-group>
Ref
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
selected | 选中值 | |||
isExpand | 是否展开状态 | boolean | true | |
expand | 展开、收起 | function(status?: boolean) | ||
select | 选择某一项 | function(item: any) | ||
edit | 编辑某一项, item 为空则是新增 | function(item?: any) | ||
remove | 删除某一项 | function(item: any) |
onSelect
选择后触发,可以用来刷新右侧的列表等操作
const { ViewGroup } = useViewGroup({
onSelect(item) {
refresh({
typeId: item.id,
page: 1
});
}
});
onEdit
表单编辑时触发,返回值与 OpenOptions 一致
const { ViewGroup } = useViewGroup({
onEdit(item) {
return {
title: "标题",
width: "500px",
props: {
labelWidth: "60px"
},
items: [
{
label: "名称",
prop: "name",
component: {
name: "el-input",
props: {
maxlength: 20
}
},
required: true
}
]
};
}
});
onContextMenu
默认带有 编辑
和 删除
。如需自定义右键菜单,返回值与 cl-context-menu 一致。
const { ViewGroup } = useViewGroup({
onContextMenu(item) {
return {
list: [
{
label: "编辑",
callback(done) {
done();
ViewGroup.value?.edit(item);
}
},
{
label: "删除",
callback(done) {
done();
ViewGroup.value?.remove(item);
}
}
]
};
}
});
onData
处理左侧列表数据,由 service
中的 page
接口返回
const { ViewGroup } = useViewGroup({
onData(list) {
return list.map((e) => {
return {
...e,
name: "-" + e.name + "-"
};
});
}
});
cl-editor
由于第三方编辑器资源过大,不一定每个人都需要,so 使用该组件去渲染不确定的第三方编辑器,当第三方编辑器未注册的时候显示文本域 textarea。
参考 /src/modules/base/views/params.vue
参数 | 说明 | 类型 |
---|---|---|
name | 组件标签名 | string |
WARNING
由于是完全继承,所以该组件可以调用 name
指定组件的所有方法和 支持所有的 prop
参数
<template>
<cl-editor :ref="setRefs('editor')" name="cl-editor-monaco" :height="400" />
</template>
<script lang="ts" setup>
const { refs, setRefs } = useCool();
// 调用格式化代码方法
refs.editor.formatCode();
</script>