@zl-ui-kit/components 0.18.6 → 0.18.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -803,6 +803,16 @@ presetIconifyIcon(icons)
|
|
|
803
803
|
|
|
804
804
|
来源：`@zl-ui-kit/composables`。`service` 统一签名：`(...args) => Promise<R>`。
|
|
805
805
|
|
|
806
|
+
四个 hook 共享同一套状态与方法（`loading` / `data` / `error` / `status` / `run` / `runAsync` /
|
|
807
|
+
`refresh` / `refreshAsync` / `cancel` / `mutate`），差别只在 `data` 怎么取：
|
|
808
|
+
|
|
809
|
+
| Hook | 适用的接口响应 | `data` 内容 |
|
|
810
|
+
| ---------------------- | ------------------------------------ | --------------------------------------------------------------------------- |
|
|
811
|
+
| `useRequest` | 任意 | 原始响应 `R` |
|
|
812
|
+
| `useDataRequest` | 信封对象（如 `{ code, msg, data }`） | 解包后的 `响应[dataKey]`，取不到时回落到 `initialData` |
|
|
813
|
+
| `usePageableRequest` | 数组 **或** 分页对象 | 数组原样返回；对象则 `{ ...响应, pageNum, pageSize }`（页码取本次请求入参） |
|
|
814
|
+
| `usePaginationRequest` | 分页对象 | 行数组，另给 `total` / `current` / `pageSize` / `change*` |
|
|
815
|
+
|
|
806
816
|
#### `useRequest(service, options?, plugins?)` —— 基础形态
|
|
807
817
|
|
|
808
818
|
```ts
|
|
@@ -825,13 +835,82 @@ const { loading, data, error, status, run, runAsync, refresh, refreshAsync, canc
|
|
|
825
835
|
| `options.onBefore/onSuccess/onError/onFinally` | 生命周期回调 |
|
|
826
836
|
| `options.loadingDelay` / `refreshDeps` | 延迟 loading / 依赖变更刷新 |
|
|
827
837
|
|
|
828
|
-
#### `useDataRequest(service, { dataKey = 'data' })` ——
|
|
838
|
+
#### `useDataRequest(service, { dataKey = 'data' })` —— 解包信封响应
|
|
839
|
+
|
|
840
|
+
适用：后端统一返回 `{ code, msg, data }` 这类信封，页面只关心内层业务数据。
|
|
841
|
+
|
|
842
|
+
```ts
|
|
843
|
+
const { data, loading, run, runAsync, refresh } = useDataRequest(getDetailApi)
|
|
844
|
+
// data.value === 响应.data
|
|
845
|
+
```
|
|
846
|
+
|
|
847
|
+
| 选项 | 说明 |
|
|
848
|
+
| ------------- | --------------------------------------------------------------------------------- |
|
|
849
|
+
| `dataKey` | 信封里承载业务数据的字段名，默认 `data` |
|
|
850
|
+
| `initialData` | 解包结果为空（未请求 / 该 key 不存在）时的兜底值，**按解包后的数据形态传** |
|
|
851
|
+
| `manual` | `true` 时挂载不请求，需 `run` / `runAsync` 触发；其余选项与 `useRequest` 完全一致 |
|
|
852
|
+
|
|
853
|
+
真实页面里最常见的三种写法：
|
|
854
|
+
|
|
855
|
+
```ts
|
|
856
|
+
// 1) 自动请求 + 兜底：模板可直接渲染，不必到处判空
|
|
857
|
+
const { data: detail, loading } = useDataRequest(getDetailApi, { initialData: {} })
|
|
858
|
+
|
|
859
|
+
// 2) 手动触发：点击按钮 / 打开抽屉时再查
|
|
860
|
+
const { data: detail, loading, runAsync } = useDataRequest(getDetailApi, { manual: true })
|
|
861
|
+
async function open(row: { id: number }) {
|
|
862
|
+
const res = await runAsync({ id: row.id }) // res 是原始信封，不是解包后的 data
|
|
863
|
+
// 需要解包值请读 detail.value
|
|
864
|
+
}
|
|
865
|
+
|
|
866
|
+
// 3) service 用闭包读取 props（详情组件按 id 查询）
|
|
867
|
+
const { data: detail, run: fetchDetail } = useDataRequest(() => getDetailApi({ id: props.id }))
|
|
868
|
+
// props.id 变化后需自行 refresh() / run()，或把变化源放进 refreshDeps
|
|
869
|
+
```
|
|
870
|
+
|
|
871
|
+
> 注意：`useDataRequest` 只适合**对象信封**。接口直接返回数组时 `rawData[dataKey]` 取不到值，
|
|
872
|
+
> `data` 会恒等于 `initialData`——数组 / 分页响应请改用 `usePageableRequest` 或 `useRequest`。
|
|
873
|
+
> 另外 `onSuccess(data, params)` 与 `runAsync()` 拿到的都是**原始响应 `R`**，不是解包后的值。
|
|
874
|
+
|
|
875
|
+
#### `usePageableRequest(service, options?, plugins?)` —— 列表 / 分页响应适配
|
|
876
|
+
|
|
877
|
+
适用：把「数组响应」和「分页对象响应」统一成同一份 `data`，供 `ZlSearchTable` / `ZlCardPage`
|
|
878
|
+
或自定义列表使用。返回值与 `useRequest` 相同，只改写了 `data`：
|
|
879
|
+
|
|
880
|
+
| 接口响应 | `data.value` |
|
|
881
|
+
| ------------------------------------------- | -------------------------------------------------------------------- |
|
|
882
|
+
| `TreeNode[]` 等数组 | 原样返回数组 |
|
|
883
|
+
| `{ rows, total, pageNum, pageSize }` 等对象 | `{ ...响应, pageNum, pageSize }`（响应没回页码时用本次请求入参补齐） |
|
|
884
|
+
|
|
885
|
+
```ts
|
|
886
|
+
// 后端直接返回数组：data 就是数组，initialData 兜底空列表
|
|
887
|
+
const { data: treeData, loading } = usePageableRequest(getTreeApi, { initialData: [] })
|
|
888
|
+
|
|
889
|
+
// 后端返回分页对象：data.rows 是行数据，data.pageNum / data.pageSize 已被补齐
|
|
890
|
+
const { data: pageData, loading, run } = usePageableRequest(getPageApi, { manual: true })
|
|
891
|
+
run({ pageNum: 2, pageSize: 20 })
|
|
892
|
+
// pageData.value.rows / total / pageNum / pageSize
|
|
893
|
+
```
|
|
894
|
+
|
|
895
|
+
**它不提供 `total` / `current` / `pageSize` / 翻页方法**——需要自己控制分页器时用
|
|
896
|
+
`usePaginationRequest`；只是给组件喂数据、或读取 `loading` / `refresh` 时用 `usePageableRequest`。
|
|
897
|
+
|
|
898
|
+
**实例形态直传组件**（页面侧要接管 `loading` / `refresh` 时）：
|
|
829
899
|
|
|
830
900
|
```ts
|
|
831
|
-
const
|
|
832
|
-
//
|
|
901
|
+
const cardRequest = usePageableRequest(getPageApi, { manual: true, initialData: [] })
|
|
902
|
+
// 组件内部的搜索 / 翻页仍调用同一实例的 run，loading / data 与页面共享
|
|
833
903
|
```
|
|
834
904
|
|
|
905
|
+
```vue
|
|
906
|
+
<ZlCardPage :request="cardRequest" card-min-width="200px" :pagination="{ pageSize: 6 }">
|
|
907
|
+
<template #default="{ data }">…</template>
|
|
908
|
+
</ZlCardPage>
|
|
909
|
+
```
|
|
910
|
+
|
|
911
|
+
> `ZlSearchTable` / `ZlCardPage` 默认在内部自行创建 `usePageableRequest`，**页面直接传 service 即可**；
|
|
912
|
+
> 只有需要在页面里读取同一份 `loading` / `data` / `refresh` 时才传实例（见 §6.3 ⑨）。
|
|
913
|
+
|
|
835
914
|
#### `usePaginationRequest(service, { pagination })` —— 分页专用
|
|
836
915
|
|
|
837
916
|
额外返回 `data`(行数组) / `total` / `current` / `pageSize` / `changeCurrent` / `changePageSize` / `changePagination`，分页键名（`pageNum/pageSize/total/rows`）可配置，与后端契约对齐时通过 `pagination` 选项或 `setGlobalOptions` 调整。
|
|
@@ -1150,9 +1229,10 @@ const { data: treeData, loading: treeLoading } = treeReq
|
|
|
1150
1229
|
`ZlChart` 显式 prop 为 `series`，其余配置（title/xAxis/yAxis/tooltip/grid）经 attrs 透传，故用 `v-bind` 传完整 echarts option：
|
|
1151
1230
|
|
|
1152
1231
|
```ts
|
|
1153
|
-
const chartReq = useDataRequest(getChartDataApi
|
|
1232
|
+
const chartReq = useDataRequest(getChartDataApi) // 默认 dataKey='data'
|
|
1233
|
+
const { data: chartData, loading: chartLoading } = chartReq // 顶层 ref 才会在模板自动解包
|
|
1154
1234
|
const chartOption = computed(() => {
|
|
1155
|
-
const d =
|
|
1235
|
+
const d = chartData.value
|
|
1156
1236
|
if (!d) return {}
|
|
1157
1237
|
return {
|
|
1158
1238
|
tooltip: { trigger: 'axis' },
|
|
@@ -1164,7 +1244,8 @@ const chartOption = computed(() => {
|
|
|
1164
1244
|
```
|
|
1165
1245
|
|
|
1166
1246
|
```vue
|
|
1167
|
-
<
|
|
1247
|
+
<el-skeleton v-if="chartLoading" :rows="5" />
|
|
1248
|
+
<ZlChart v-else v-bind="chartOption" />
|
|
1168
1249
|
```
|
|
1169
1250
|
|
|
1170
1251
|
| Prop | 类型 | 说明 |
|
|
@@ -1174,7 +1255,44 @@ const chartOption = computed(() => {
|
|
|
1174
1255
|
|
|
1175
1256
|
> 暴露方法：`clear()`（模板 ref 调用）。尺寸自适应由 `useResizeObserver` 负责，容器需有明确高度。
|
|
1176
1257
|
|
|
1177
|
-
|
|
1258
|
+
需要「点击后再拉取」时用 `manual + runAsync`；`runAsync()` 返回原始信封，解包后的值仍看 `data`：
|
|
1259
|
+
|
|
1260
|
+
```ts
|
|
1261
|
+
const { data: chartData, runAsync: fetchChartAsync } = useDataRequest(getChartDataApi, {
|
|
1262
|
+
manual: true,
|
|
1263
|
+
})
|
|
1264
|
+
async function fetchChart() {
|
|
1265
|
+
const res = await fetchChartAsync() // res: { code, msg, data }
|
|
1266
|
+
console.log(res.code, chartData.value)
|
|
1267
|
+
}
|
|
1268
|
+
```
|
|
1269
|
+
|
|
1270
|
+
#### ⑨ `usePageableRequest` —— 数组 / 分页对象 / 实例直传
|
|
1271
|
+
|
|
1272
|
+
接口返回数组或分页对象都能用；组件需要自己接管 `loading` / `refresh` 时，直接传实例：
|
|
1273
|
+
|
|
1274
|
+
```ts
|
|
1275
|
+
// 数组响应：data 原样是数组
|
|
1276
|
+
const { data: treeData, loading } = usePageableRequest(getTreeApi, { initialData: [] })
|
|
1277
|
+
|
|
1278
|
+
// 分页对象响应：data.rows 是行数据，pageNum / pageSize 已用本次入参补齐
|
|
1279
|
+
const { data: pageData, loading, run } = usePageableRequest(getPageApi, { manual: true })
|
|
1280
|
+
run({ pageNum: 1, pageSize: 20 })
|
|
1281
|
+
|
|
1282
|
+
// 实例形态直传 ZlCardPage：组件的搜索 / 翻页复用同一实例
|
|
1283
|
+
const cardRequest = usePageableRequest(getPageApi, { manual: true, initialData: [] })
|
|
1284
|
+
```
|
|
1285
|
+
|
|
1286
|
+
```vue
|
|
1287
|
+
<ZlCardPage :request="cardRequest" card-min-width="200px" :pagination="{ pageSize: 6 }">
|
|
1288
|
+
<template #default="{ data }">{{ data.name }}</template>
|
|
1289
|
+
</ZlCardPage>
|
|
1290
|
+
```
|
|
1291
|
+
|
|
1292
|
+
> 与 `usePaginationRequest` 的区别：`usePageableRequest` 只改写 `data`、不提供 `total` / 翻页方法，
|
|
1293
|
+
> 用于给组件喂数据；页面要自己渲染分页器时用 `usePaginationRequest`（见 ③ / ④）。
|
|
1294
|
+
|
|
1295
|
+
#### ⑩ `useRequest` 生命周期面板
|
|
1178
1296
|
|
|
1179
1297
|
```ts
|
|
1180
1298
|
const req = useRequest(getResourcePageMaybeFail, { defaultParams: [{ pageNum: 1, pageSize: 5 }] })
|
|
@@ -3815,6 +3933,8 @@ const { i18n } = useLocale({ messages })
|
|
|
3815
3933
|
>
|
|
3816
3934
|
> **每个 prop / 每个插槽都有示例**：`props` 表的「示例」列是该属性的**可直接粘贴写法**（`v-model` 用简写，布尔值按默认值给反例，字面量联合取首个取值，数组 / 对象 / 函数给空字面量占位）；`插槽` 表的「示例」列是对应的 `<template #name>` 片段。想直接改原始代码，用上面的「用法示例 / 插槽用法」块。
|
|
3817
3935
|
>
|
|
3936
|
+
> **schema 条目字段**：类型为 `Xxx[]` 的 prop（如 `ZlGrid.grid: IGridItem[]`）在 props 表下方附「`prop` 条目字段（`Xxx`）」子表，列出该条目接口的**完整字段**（含 `extends` 合并）。字段来自源码定义（内嵌 `export interface` / `types.ts` / `DictItem` 跨包）。
|
|
3937
|
+
>
|
|
3818
3938
|
> 同一次生成还会写出 `apps/playground/src/data/component-api.json`，playground 的 **UI 组件使用手册**（`/#/manual`）页直接渲染它 —— 可检索、可复制 `import`，内容与本章一致。
|
|
3819
3939
|
|
|
3820
3940
|
### 组件索引
|
|
@@ -3941,14 +4061,29 @@ import { ZlActionList } from '@zl-ui-kit/components'
|
|
|
3941
4061
|
|
|
3942
4062
|
**props**
|
|
3943
4063
|
|
|
3944
|
-
| 属性 | 类型
|
|
3945
|
-
| ------------- |
|
|
3946
|
-
| `actions` | `ActionItem[]
|
|
3947
|
-
| `actionArgs` | `any[]`
|
|
3948
|
-
| `visibleArgs` | `any[]`
|
|
3949
|
-
| `listCount` | `number`
|
|
3950
|
-
| `iconMore` | `boolean \| Record<string, any>`
|
|
3951
|
-
| `separator` | `boolean`
|
|
4064
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
4065
|
+
| ------------- | ------------------------------------------- | ---------- | ---- | ----------------------- | ------------------------------------------------ |
|
|
4066
|
+
| `actions` | `ActionItem[]`<br>— 条目字段见下「actions」 | `() => []` | 否 | `:actions="actions"` | 操作项配置，按顺序渲染为文字或图标按钮 |
|
|
4067
|
+
| `actionArgs` | `any[]` | `() => []` | 否 | `:action-args="[]"` | 点击时透传给 `action` 事件与 handler 的参数 |
|
|
4068
|
+
| `visibleArgs` | `any[]` | `() => []` | 否 | `:visible-args="[]"` | 传给每项 `visible` 判定函数的参数 |
|
|
4069
|
+
| `listCount` | `number` | `2` | 否 | `:list-count="1"` | 直接展示的操作数，超出收入"更多"下拉 |
|
|
4070
|
+
| `iconMore` | `boolean \| Record<string, any>` | — | 否 | `:icon-more="iconMore"` | 为 true 时把"更多"换成图标，对象则作为图标 props |
|
|
4071
|
+
| `separator` | `boolean` | — | 否 | `separator` | 各操作之间是否插入竖线分隔符 |
|
|
4072
|
+
|
|
4073
|
+
**`actions` 条目字段（`ActionItem`）**
|
|
4074
|
+
|
|
4075
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
4076
|
+
| ------------ | ------------------------------------------ | ---- | ------------------------------------------------------------------------------------------------------------------------------ |
|
|
4077
|
+
| `label` | `string` | 是 | 操作文案 |
|
|
4078
|
+
| `icon` | `string` | 否 | 图标（`zl:` 前缀走 ZlIcon，其余按 iconify/EP 规则） |
|
|
4079
|
+
| `iconProps` | `Record<string, any>` | 否 | 传给图标组件的 props |
|
|
4080
|
+
| `iconClass` | `string` | 否 | 图标自定义类名 |
|
|
4081
|
+
| `tooltip` | `boolean \| string` | 否 | 提示词：`true` 用 `label` 作为提示；传字符串则直接作为提示词（无需同时配置 `label`）。 仅对纯图标操作项生效（配置了 `icon`）。 |
|
|
4082
|
+
| `disabled` | `boolean` | 否 | 禁用（点击无响应） |
|
|
4083
|
+
| `divided` | `boolean` | 否 | 与下一项之间显示分割线 |
|
|
4084
|
+
| `permission` | `string \| string[]` | 否 | 权限键（三段式，经 usePermission 校验） |
|
|
4085
|
+
| `visible` | `boolean \| ((...args: any[]) => boolean)` | 否 | 显隐控制：布尔值直接判定；函数接收 `visibleArgs`（末尾追加 action 自身）后判定。 与权限取交集：两者都通过才展示。 |
|
|
4086
|
+
| `handler` | `(...args: any[]) => void` | 否 | 点击处理（接收 actionArgs） |
|
|
3952
4087
|
|
|
3953
4088
|
**事件（emits）**
|
|
3954
4089
|
|
|
@@ -4091,11 +4226,20 @@ import { ZlAppMenu } from '@zl-ui-kit/components'
|
|
|
4091
4226
|
|
|
4092
4227
|
**props**
|
|
4093
4228
|
|
|
4094
|
-
| 属性 | 类型
|
|
4095
|
-
| ----------- |
|
|
4096
|
-
| `collapsed` | `boolean`
|
|
4097
|
-
| `layout` | `'vertical' \| 'horizontal'`
|
|
4098
|
-
| `menus` | `MenuItem[]
|
|
4229
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
4230
|
+
| ----------- | --------------------------------------- | ------------ | ---- | ------------------- | ----------------------------------- |
|
|
4231
|
+
| `collapsed` | `boolean` | `false` | 否 | `collapsed` | 菜单是否收起为图标，侧栏折叠时用 |
|
|
4232
|
+
| `layout` | `'vertical' \| 'horizontal'` | `'vertical'` | 否 | `layout="vertical"` | el-menu 模式：vertical / horizontal |
|
|
4233
|
+
| `menus` | `MenuItem[]`<br>— 条目字段见下「menus」 | `() => []` | 否 | `:menus="menus"` | 菜单树数据，递归渲染为多级菜单项 |
|
|
4234
|
+
|
|
4235
|
+
**`menus` 条目字段（`MenuItem`）**
|
|
4236
|
+
|
|
4237
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
4238
|
+
| ---------- | ------------ | ---- | ------ |
|
|
4239
|
+
| `name` | `string` | 是 | 唯一键 |
|
|
4240
|
+
| `title` | `string` | 是 | — |
|
|
4241
|
+
| `icon` | `string` | 否 | — |
|
|
4242
|
+
| `children` | `MenuItem[]` | 否 | — |
|
|
4099
4243
|
|
|
4100
4244
|
**事件（emits）**
|
|
4101
4245
|
|
|
@@ -4320,12 +4464,29 @@ import { ZlCardPage } from '@zl-ui-kit/components'
|
|
|
4320
4464
|
| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ---- | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
4321
4465
|
| `immediate` | `boolean` | `true` | 否 | `:immediate="false"` | 无查询条件时是否立即发起首次请求 |
|
|
4322
4466
|
| `request` | `\| ((...args: any[]) => Promise<any>) \| { service: (...args: any[]) => Promise<any>; options?: Record<string, any> } \| UseRequestInstance` | — | 是 | `:request="async () => {}"` | 请求来源，三种形态任一： 1. 请求函数 `(...args) => Promise` 2. `{ service, options }` 对象（ZlCardPage 内部再包一层 usePageableRequest） 3. `useRequest` / `usePageableRequest` 实例（消费方自行创建，便于接管 loading/refresh） |
|
|
4323
|
-
| `queryItems` | `SearchItem[]
|
|
4467
|
+
| `queryItems` | `SearchItem[]`<br>— 条目字段见下「queryItems」 | `() => []` | 否 | `:query-items="queryItems"` | 搜索表单项配置，为空则不渲染搜索栏 |
|
|
4324
4468
|
| `hideEmptyLabel` | `boolean` | `false` | 否 | `hide-empty-label` | 搜索项 label 为空时是否不渲染 label 占位，透传给 ZlSearch / ZlForm 的 hideEmptyLabel |
|
|
4325
4469
|
| `pagination` | `Record<string, any> \| boolean` | `true` | 否 | `:pagination="{}"` | 分页配置，false 关闭分页，对象则透传 |
|
|
4326
4470
|
| `itemKey` | `string` | `'id'` | 否 | `item-key="id"` | 卡片数据的唯一键字段名，默认 id |
|
|
4327
4471
|
| `cardMinWidth` | `string` | — | 否 | `card-min-width="280px"` | 卡片最小宽度，决定单行能放几列 |
|
|
4328
4472
|
|
|
4473
|
+
**`queryItems` 条目字段（`SearchItem`）**
|
|
4474
|
+
|
|
4475
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
4476
|
+
| --------------- | ---------------------------------------------------------------------- | ---- | --------------------------------------------------- |
|
|
4477
|
+
| `model` | `string` | 是 | 字段名（必填） |
|
|
4478
|
+
| `label` | `string` | 否 | 标签文案（缺省用 model） |
|
|
4479
|
+
| `component` | `string \| any` | 否 | 动态组件名/组件对象（如 'el-input'、ElSelect） |
|
|
4480
|
+
| `props` | `Record<string, any>` | 否 | 组件 props（自动包装 update:modelValue 回写 model） |
|
|
4481
|
+
| `slots` | `Record<string, any>` | 否 | 组件插槽 |
|
|
4482
|
+
| `defaultValue` | `any` | 否 | 默认值 |
|
|
4483
|
+
| `slot` | `boolean` | 否 | 是否启用具名插槽（#model）自定义渲染 |
|
|
4484
|
+
| `formItemProps` | `Record<string, any>` | 否 | el-form-item 其余属性（rules 等） |
|
|
4485
|
+
| `tooltip` | `string` | 否 | 标签旁的问号提示文案 |
|
|
4486
|
+
| `visible` | `boolean \| ((model: Record<string, any>, item: FormItem) => boolean)` | 否 | 显隐控制：布尔值或判定函数 |
|
|
4487
|
+
| `toLabel` | `(value: any) => any` | 否 | 值 → 条件标签文本 |
|
|
4488
|
+
| `toParams` | `(value: any, acc: Record<string, any>) => Record<string, any>` | 否 | 值 → 查询参数（返回对象合并入 params） |
|
|
4489
|
+
|
|
4329
4490
|
**事件（emits）**
|
|
4330
4491
|
|
|
4331
4492
|
| 事件 | 参数 | 说明 |
|
|
@@ -4372,10 +4533,18 @@ import { ZlCheckAll } from '@zl-ui-kit/components'
|
|
|
4372
4533
|
|
|
4373
4534
|
**props**
|
|
4374
4535
|
|
|
4375
|
-
| 属性 | 类型
|
|
4376
|
-
| --------- |
|
|
4377
|
-
| `options` | `CheckAllOption[]
|
|
4378
|
-
| `model` | `Array<string \| number>`
|
|
4536
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
4537
|
+
| --------- | ----------------------------------------------- | ---------- | ---- | ----------------------- | ---------------------------------------- |
|
|
4538
|
+
| `options` | `CheckAllOption[]`<br>— 条目字段见下「options」 | `() => []` | 否 | `:options="options"` | 全选管理的可选项，每项渲染成一个复选框 |
|
|
4539
|
+
| `model` | `Array<string \| number>` | `() => []` | 否 | `v-model:model="value"` | 已勾选的 value 集合，用 v-model 双向绑定 |
|
|
4540
|
+
|
|
4541
|
+
**`options` 条目字段（`CheckAllOption`）**
|
|
4542
|
+
|
|
4543
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
4544
|
+
| ---------- | ------------------ | ---- | ---- |
|
|
4545
|
+
| `label` | `string` | 是 | — |
|
|
4546
|
+
| `value` | `string \| number` | 是 | — |
|
|
4547
|
+
| `disabled` | `boolean` | 否 | — |
|
|
4379
4548
|
|
|
4380
4549
|
**事件（emits）**
|
|
4381
4550
|
|
|
@@ -4413,15 +4582,25 @@ import { ZlCheckboxTag } from '@zl-ui-kit/components'
|
|
|
4413
4582
|
|
|
4414
4583
|
**props**
|
|
4415
4584
|
|
|
4416
|
-
| 属性 | 类型
|
|
4417
|
-
| ------------ |
|
|
4418
|
-
| `modelValue` | `any`
|
|
4419
|
-
| `options` | `CheckboxTagOption[]
|
|
4420
|
-
| `single` | `boolean`
|
|
4421
|
-
| `rounded` | `boolean \| number \| string`
|
|
4422
|
-
| `bordered` | `boolean`
|
|
4423
|
-
| `fill` | `boolean`
|
|
4424
|
-
| `size` | `'mini' \| 'small' \| 'medium'`
|
|
4585
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
4586
|
+
| ------------ | -------------------------------------------------- | ---------- | ---- | -------------------- | ----------------------------------------------------------------------------------------- |
|
|
4587
|
+
| `modelValue` | `any` | — | 否 | `v-model="value"` | `v-model` 绑定的值（`defineModel` 隐式声明） |
|
|
4588
|
+
| `options` | `CheckboxTagOption[]`<br>— 条目字段见下「options」 | `() => []` | 否 | `:options="options"` | 标签候选列表，每项可配图标与互斥组 |
|
|
4589
|
+
| `single` | `boolean` | — | 否 | `single` | 单选模式（值为单值） |
|
|
4590
|
+
| `rounded` | `boolean \| number \| string` | `true` | 否 | `:rounded="rounded"` | 是否圆角显示，默认开启；也可为具体圆角值（数字 px 或 CSS 长度），false 关闭（直角/small） |
|
|
4591
|
+
| `bordered` | `boolean` | `true` | 否 | `:bordered="false"` | 是否显示边框，默认开启 |
|
|
4592
|
+
| `fill` | `boolean` | `true` | 否 | `:fill="false"` | 是否填充背景色，默认开启 |
|
|
4593
|
+
| `size` | `'mini' \| 'small' \| 'medium'` | `'small'` | 否 | `size="mini"` | 标签尺寸档位，默认 small |
|
|
4594
|
+
|
|
4595
|
+
**`options` 条目字段（`CheckboxTagOption`）**
|
|
4596
|
+
|
|
4597
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
4598
|
+
| ----------- | ------------------- | ---- | -------------------------------------------------------------- |
|
|
4599
|
+
| `label` | `string` | 是 | — |
|
|
4600
|
+
| `value` | `string \| number` | 是 | — |
|
|
4601
|
+
| `icon` | `string` | 否 | — |
|
|
4602
|
+
| `disabled` | `boolean` | 否 | — |
|
|
4603
|
+
| `exclusive` | `boolean \| string` | 否 | 互斥项：true 单互斥组；string 为互斥组名（同组互斥、跨组替换） |
|
|
4425
4604
|
|
|
4426
4605
|
**事件（emits）**
|
|
4427
4606
|
|
|
@@ -4512,12 +4691,24 @@ import { ZlDescription } from '@zl-ui-kit/components'
|
|
|
4512
4691
|
|
|
4513
4692
|
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
4514
4693
|
| -------------- | ----------------------------------------------------------------- | -------------------------------------- | ---- | --------------------------- | -------------------------------------------------------------------- |
|
|
4515
|
-
| `items` | `DescriptionItem[]
|
|
4694
|
+
| `items` | `DescriptionItem[]`<br>— 条目字段见下「items」 | — | 是 | `:items="items"` | 展示项列表，决定字段顺序、取值与显隐 |
|
|
4516
4695
|
| `data` | `Record<string, any>` | `() => ({})` | 否 | `:data="{}"` | 取值来源对象，缺省按各项 key 取字段 |
|
|
4517
4696
|
| `emptyChecker` | `(value: any, key: string, data: Record<string, any>) => boolean` | `(val: any) => !val && !isNumber(val)` | 否 | `:empty-checker="() => {}"` | 判断值是否为空，为空时改显示占位文案 |
|
|
4518
4697
|
| `emptyText` | `string` | — | 否 | `empty-text="暂无数据"` | 空值占位文案（缺省走 i18n zl.description.empty，未接入时兜底"暂无"） |
|
|
4519
4698
|
| `secondary` | `boolean` | — | 否 | `secondary` | 次要形态：灰底并显示字段间分隔线 |
|
|
4520
4699
|
|
|
4700
|
+
**`items` 条目字段（`DescriptionItem`）**
|
|
4701
|
+
|
|
4702
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
4703
|
+
| ---------- | ------------------------------------------------------------------------------ | ---- | ------------------------------------- |
|
|
4704
|
+
| `label` | `string` | 是 | — |
|
|
4705
|
+
| `key` | `string` | 是 | — |
|
|
4706
|
+
| `icon` | `string` | 否 | — |
|
|
4707
|
+
| `getValue` | `(data: Record<string, any>, key: string, item: DescriptionItem) => any` | 否 | 取值函数（缺省取 data[key]） |
|
|
4708
|
+
| `dict` | `string \| Record<string, any>` | 否 | 字典（string 视为 dictKey） |
|
|
4709
|
+
| `visible` | `boolean \| ((value: any, key: string, data: Record<string, any>) => boolean)` | 否 | 显隐（false 或函数返回 false 时跳过） |
|
|
4710
|
+
| `slot` | `boolean` | 否 | 是否启用具名插槽（#key）渲染值 |
|
|
4711
|
+
|
|
4521
4712
|
**插槽（slots）**
|
|
4522
4713
|
|
|
4523
4714
|
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
@@ -4613,7 +4804,7 @@ import { ZlDictTag } from '@zl-ui-kit/components'
|
|
|
4613
4804
|
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
4614
4805
|
| ------------- | ------------------------------------------------------------------------- | ----------- | ---- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
4615
4806
|
| `dictKey` | `string` | — | 是 | `dict-key="gender"` | 字典键（对应全局字典缓存的键；外部直传数据也以该键写入共享缓存）。 ⚠️ 直传 `dict` 会**覆盖全局同名 key**，不要在列表里逐行传不同的 `dict`（最后一行会污染全站）， 行级字典请用独立 key（如 `` `resourceType.${row.id}` ``）。 |
|
|
4616
|
-
| `dict` | `DictItem[]
|
|
4807
|
+
| `dict` | `DictItem[]`<br>— 条目字段见下「dict」 | — | 否 | `:dict="dict"` | 外部直传字典数据：无需依赖全局数据源即可翻译。格式同 `DictItem[]`（`{ label, value, icon?, color?, type? }`）。 `color` 可以是主题色名，也可以是 `#ff7d45` 这类原生 CSS 颜色值（角标上按纯色渲染，不自动渐变） |
|
|
4617
4808
|
| `corner` | `boolean \| 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` | `false` | 否 | `corner="top-left"` | 是否渲染成角标并指定方位，true 时为右上角 |
|
|
4618
4809
|
| `variant` | `'badge' \| 'ribbon'` | `'badge'` | 否 | `variant="badge"` | 角标形态（`corner` 生效时才起作用）： `badge` 贴边小标签（默认）；`ribbon` 斜跨在角上的绶带（45° 文字，如卡片右上角的「委托任务」）。 绶带与角点留有间距、文案建议 ≤4 个字；梯形高度用 `ribbon-height` 透传（带内字号跟着高度等比缩放）， 尺寸/留白仍走 CSS 变量 `--zl-corner-tag-ribbon-size` / `--zl-corner-tag-ribbon-gap`。 |
|
|
4619
4810
|
| `value` | `string` | — | 否 | `value="1"` | 待翻译的字典值，匹配不到时原样展示。 与字典项的 `value` 做**严格相等**比较，后端返回数字状态码时要先转成字符串 （`:value="String(row.status)"`，或在字典数据源里归一）。 |
|
|
@@ -4623,6 +4814,16 @@ import { ZlDictTag } from '@zl-ui-kit/components'
|
|
|
4623
4814
|
| `fill` | `boolean` | `false` | 否 | `fill` | 是否使用填充背景（配合字典项 `color`/`type` 显示浅色底色，如 `--zl-<色>-1`），透传给内部 ZlTag |
|
|
4624
4815
|
| `rounded` | `boolean` | `false` | 否 | `rounded` | 是否使用全圆角样式，透传给内部 ZlTag |
|
|
4625
4816
|
|
|
4817
|
+
**`dict` 条目字段（`DictItem`）**
|
|
4818
|
+
|
|
4819
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
4820
|
+
| ------- | -------- | ---- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
4821
|
+
| `label` | `string` | 是 | — |
|
|
4822
|
+
| `value` | `string` | 是 | 字典值。与业务侧传入的 `value` 做**严格相等**比较， 业务数据是数字码（如 `status: 1`）时必须先 `String()` 归一，否则匹配不到。 |
|
|
4823
|
+
| `icon` | `string` | 否 | 标签前置图标名，须是 `@zl-ui-kit/icons` 里真实存在的名字（未注册则渲染空白） |
|
|
4824
|
+
| `color` | `string` | 否 | 标签主题色名。作用于 `ZlTag` 的 `color`，只认**色名**（`primary` / `success` / `warning` / `danger` / `gray` / `red` …），不是 CSS 颜色值；传 `#67C23A` 会拼成非法 class 而静默无样式。 |
|
|
4825
|
+
| `type` | `string` | 否 | 兼容 Element Plus / arco 写法的语义色名，等价于 `color`（两者同传时 `color` 优先）。 其中 `info` 在本库色板里没有对应色名，会映射为 `gray`。 |
|
|
4826
|
+
|
|
4626
4827
|
> 把 `$attrs` 透传给 `zl-corner-tag`，未列出的属性会继续下传
|
|
4627
4828
|
|
|
4628
4829
|
#### `ZlDrawer`
|
|
@@ -4705,11 +4906,27 @@ import { ZlDynamicComponent } from '@zl-ui-kit/components'
|
|
|
4705
4906
|
|
|
4706
4907
|
**props**
|
|
4707
4908
|
|
|
4708
|
-
| 属性 | 类型
|
|
4709
|
-
| ----------- |
|
|
4710
|
-
| `model` | `Record<string, any>`
|
|
4711
|
-
| `value` | `[String, Number, Array, Boolean]`
|
|
4712
|
-
| `component` | `
|
|
4909
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
4910
|
+
| ----------- | ------------------------------------------- | ----------------------------------- | ---- | ------------------------ | ------------------------------------------- |
|
|
4911
|
+
| `model` | `Record<string, any>` | `() => ({})` | 否 | `:model="{}"` | 共享的数据对象，子组件按 model 字段读写值 |
|
|
4912
|
+
| `value` | `[String, Number, Array, Boolean]` | `null` | 否 | `:value="value"` | type 为 vModel 时透传给子组件的值 |
|
|
4913
|
+
| `component` | `IComponent`<br>— 条目字段见下「component」 | `() => ({ component: 'el-input' })` | 否 | `:component="component"` | 待渲染组件的 schema 描述，缺省渲染 el-input |
|
|
4914
|
+
|
|
4915
|
+
**`component` 条目字段（`IComponent`）**
|
|
4916
|
+
|
|
4917
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
4918
|
+
| ----------- | ------------------------------------------------------------------------------- | ---- | ---- |
|
|
4919
|
+
| `component` | `string \| any` | 是 | — |
|
|
4920
|
+
| `class` | `string \| Record<string, boolean> \| Array<string \| Record<string, boolean>>` | 否 | — |
|
|
4921
|
+
| `style` | `string \| Record<string, boolean> \| Array<string \| Record<string, boolean>>` | 否 | — |
|
|
4922
|
+
| `model` | `string` | 否 | — |
|
|
4923
|
+
| `props` | `Record<string, any>` | 否 | — |
|
|
4924
|
+
| `domProps` | `Record<string, any>` | 否 | — |
|
|
4925
|
+
| `on` | `Record<string, (...args: any[]) => any>` | 否 | — |
|
|
4926
|
+
| `nativeOn` | `Record<string, (...args: any[]) => any>` | 否 | — |
|
|
4927
|
+
| `slots` | `IComponentSlot[]` | 否 | — |
|
|
4928
|
+
| `children` | `string \| VNode \| Array<string \| VNode>` | 否 | — |
|
|
4929
|
+
| `refInFor` | `boolean` | 否 | — |
|
|
4713
4930
|
|
|
4714
4931
|
> 选项式组件（`defineComponent`），props 定义在 `props: {}` 中
|
|
4715
4932
|
|
|
@@ -4783,7 +5000,15 @@ import { ZlLogin } from '@zl-ui-kit/components'
|
|
|
4783
5000
|
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
4784
5001
|
| ---------- | ------------------------------------------------------ | ------------ | ---- | ----------------------------- | -------------------------------------- |
|
|
4785
5002
|
| `onSubmit` | `(form: Record<string, any>) => Promise<void> \| void` | — | 否 | `:on-submit="async () => {}"` | 表单提交回调，接收用户填写的登录信息 |
|
|
4786
|
-
| `config` | `ZlLoginConfig
|
|
5003
|
+
| `config` | `ZlLoginConfig`<br>— 条目字段见下「config」 | `() => ({})` | 否 | `:config="config"` | 标题、背景（图片或视频）与整体布局形态 |
|
|
5004
|
+
|
|
5005
|
+
**`config` 条目字段（`ZlLoginConfig`）**
|
|
5006
|
+
|
|
5007
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
5008
|
+
| ------- | ---------- | ---- | -------------------------------------------------- |
|
|
5009
|
+
| `title` | `string` | 否 | 系统标题 |
|
|
5010
|
+
| `bg` | `string` | 否 | 背景（图片或 mp4/webm 视频）地址，默认内置动效背景 |
|
|
5011
|
+
| `type` | `'center'` | 否 | 布局形态：右置（默认）/ center 居中 |
|
|
4787
5012
|
|
|
4788
5013
|
**插槽（slots）**
|
|
4789
5014
|
|
|
@@ -4897,11 +5122,26 @@ import { ZlForm } from '@zl-ui-kit/components'
|
|
|
4897
5122
|
|
|
4898
5123
|
**props**
|
|
4899
5124
|
|
|
4900
|
-
| 属性 | 类型
|
|
4901
|
-
| ---------------- |
|
|
4902
|
-
| `items` | `FormItem[]
|
|
4903
|
-
| `model` | `Record<string, any>`
|
|
4904
|
-
| `hideEmptyLabel` | `boolean`
|
|
5125
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
5126
|
+
| ---------------- | --------------------------------------- | ---------- | ---- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
5127
|
+
| `items` | `FormItem[]`<br>— 条目字段见下「items」 | `() => []` | 否 | `:items="items"` | 表单字段 schema，决定渲染哪些表单项 |
|
|
5128
|
+
| `model` | `Record<string, any>` | — | 否 | `:model="{}"` | 表单值对象，不传时由组件内部自建 |
|
|
5129
|
+
| `hideEmptyLabel` | `boolean` | — | 否 | `hide-empty-label` | 表单项 `label` 为空字符串/缺省时不渲染 label 占位（控件直接顶到最左）。 默认 false：即使 label 为空，EP 也会因 #label 插槽存在而保留 label 列占位 |
|
|
5130
|
+
|
|
5131
|
+
**`items` 条目字段（`FormItem`）**
|
|
5132
|
+
|
|
5133
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
5134
|
+
| --------------- | ---------------------------------------------------------------------- | ---- | --------------------------------------------------- |
|
|
5135
|
+
| `model` | `string` | 是 | 字段名（必填） |
|
|
5136
|
+
| `label` | `string` | 否 | 标签文案（缺省用 model） |
|
|
5137
|
+
| `component` | `string \| any` | 否 | 动态组件名/组件对象（如 'el-input'、ElSelect） |
|
|
5138
|
+
| `props` | `Record<string, any>` | 否 | 组件 props（自动包装 update:modelValue 回写 model） |
|
|
5139
|
+
| `slots` | `Record<string, any>` | 否 | 组件插槽 |
|
|
5140
|
+
| `defaultValue` | `any` | 否 | 默认值 |
|
|
5141
|
+
| `slot` | `boolean` | 否 | 是否启用具名插槽（#model）自定义渲染 |
|
|
5142
|
+
| `formItemProps` | `Record<string, any>` | 否 | el-form-item 其余属性（rules 等） |
|
|
5143
|
+
| `tooltip` | `string` | 否 | 标签旁的问号提示文案 |
|
|
5144
|
+
| `visible` | `boolean \| ((model: Record<string, any>, item: FormItem) => boolean)` | 否 | 显隐控制：布尔值或判定函数 |
|
|
4905
5145
|
|
|
4906
5146
|
> 暴露对象是 `Proxy`：下表为显式实现的能力，**未列出的键会运行时下钻到内部实例**（不建议依赖，请用上表的实例 getter 取原生对象）
|
|
4907
5147
|
> 把 `$attrs` 透传给 `el-form`，未列出的属性会继续下传
|
|
@@ -5036,7 +5276,7 @@ import { ZlGrid } from '@zl-ui-kit/components'
|
|
|
5036
5276
|
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
5037
5277
|
| --------------- | ----------------------------------------------------------------- | ------------ | ---- | --------------------------- | ------------------------------------------------------------- |
|
|
5038
5278
|
| `data` | `Record<string, any>` | `() => ({})` | 否 | `:data="{}"` | 数据源对象，每项按 key 或 getValue 取值 |
|
|
5039
|
-
| `grid` | `IGridItem[]
|
|
5279
|
+
| `grid` | `IGridItem[]`<br>— 条目字段见下「grid」 | `() => []` | 否 | `:grid="grid"` | 描述项 schema：决定展示哪些字段与顺序 |
|
|
5040
5280
|
| `cols` | `number` | `3` | 否 | `:cols="1"` | 每行显示的描述项列数，默认 3 |
|
|
5041
5281
|
| `border` | `boolean` | — | 否 | `border` | 是否显示边框，呈表格式的网格线 |
|
|
5042
5282
|
| `emptyChecker` | `(value: any, key: string, data: Record<string, any>) => boolean` | — | 否 | `:empty-checker="() => {}"` | 自定义空值判定；默认 0 以外的假值都算空 |
|
|
@@ -5045,6 +5285,19 @@ import { ZlGrid } from '@zl-ui-kit/components'
|
|
|
5045
5285
|
| `labelPosition` | `'left' \| 'top' \| 'right'` | `'left'` | 否 | `label-position="left"` | 标签位置；top 时标签与值上下堆叠 |
|
|
5046
5286
|
| `emptyText` | `string` | — | 否 | `empty-text="暂无数据"` | 空值占位文案（缺省走 i18n zl.grid.empty，未接入时兜底"暂无"） |
|
|
5047
5287
|
|
|
5288
|
+
**`grid` 条目字段（`IGridItem`）**
|
|
5289
|
+
|
|
5290
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
5291
|
+
| ---------- | ---------------------------------------------------------------------------------- | ---- | ---------------------------------------------------------------------------- |
|
|
5292
|
+
| `label` | `string` | 是 | 字段标签 |
|
|
5293
|
+
| `key` | `string` | 是 | 取值字段名（同时作为插槽名 `#key`） |
|
|
5294
|
+
| `size` | `number \| 'auto'` | 否 | 跨列数（'auto' 占满剩余列） |
|
|
5295
|
+
| `getValue` | `(data: Record<string, any>, key: string, item: IGridItem) => any` | 否 | 自定义取值（缺省按 key 从 data 取） |
|
|
5296
|
+
| `visible` | `boolean \| ((value: unknown, key: string, data: Record<string, any>) => boolean)` | 否 | 显隐判定 |
|
|
5297
|
+
| `dict` | `string \| { dictKey: string; simple?: boolean; showType?: boolean }` | 否 | 字典：字典 key，或 `{ dictKey, simple, showType }` 配置（走 ZlDictTag 翻译） |
|
|
5298
|
+
| `slot` | `boolean` | 否 | 是否启用具名插槽（#key）渲染 |
|
|
5299
|
+
| `ellipsis` | `number \| boolean` | 否 | 溢出省略行数（悬浮提示） |
|
|
5300
|
+
|
|
5048
5301
|
**插槽（slots）**
|
|
5049
5302
|
|
|
5050
5303
|
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
@@ -5084,12 +5337,23 @@ import { ZlHorizontalTable } from '@zl-ui-kit/components'
|
|
|
5084
5337
|
|
|
5085
5338
|
**props**
|
|
5086
5339
|
|
|
5087
|
-
| 属性 | 类型
|
|
5088
|
-
| ------------ |
|
|
5089
|
-
| `items` | `HorizontalTableItem[]
|
|
5090
|
-
| `span` | `number \| string`
|
|
5091
|
-
| `labelWidth` | `string`
|
|
5092
|
-
| `labelAlign` | `string`
|
|
5340
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
5341
|
+
| ------------ | -------------------------------------------------- | ---------- | ---- | --------------------- | --------------------------------------------- |
|
|
5342
|
+
| `items` | `HorizontalTableItem[]`<br>— 条目字段见下「items」 | `() => []` | 否 | `:items="items"` | 单元格配置列表：标签、取值与跨列 |
|
|
5343
|
+
| `span` | `number \| string` | `24` | 否 | `:span="span"` | 统一的栅格跨度，默认 24（可被单项 span 覆盖） |
|
|
5344
|
+
| `labelWidth` | `string` | `'88px'` | 否 | `label-width="100px"` | 标签单元格宽度，默认 88px |
|
|
5345
|
+
| `labelAlign` | `string` | `'center'` | 否 | `label-align="left"` | 标签文案的水平对齐方式，默认居中 |
|
|
5346
|
+
|
|
5347
|
+
**`items` 条目字段（`HorizontalTableItem`）**
|
|
5348
|
+
|
|
5349
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
5350
|
+
| ------------ | --------- | ---- | -------------------------- |
|
|
5351
|
+
| `label` | `string` | 是 | — |
|
|
5352
|
+
| `value` | `any` | 否 | — |
|
|
5353
|
+
| `span` | `number` | 否 | 栅格跨度（24 栅格） |
|
|
5354
|
+
| `slot` | `string` | 否 | 具名插槽名（渲染自定义值） |
|
|
5355
|
+
| `tooltip` | `boolean` | 否 | 值过长时悬浮提示 |
|
|
5356
|
+
| `noEllipsis` | `boolean` | 否 | 关闭省略 |
|
|
5093
5357
|
|
|
5094
5358
|
**插槽（slots）**
|
|
5095
5359
|
|
|
@@ -5555,11 +5819,20 @@ import { ZlRadioTag } from '@zl-ui-kit/components'
|
|
|
5555
5819
|
|
|
5556
5820
|
**props**
|
|
5557
5821
|
|
|
5558
|
-
| 属性 | 类型
|
|
5559
|
-
| ------------ |
|
|
5560
|
-
| `modelValue` | `string \| number \| undefined`
|
|
5561
|
-
| `options` | `RadioTagOption[]
|
|
5562
|
-
| `size` | `'mini' \| 'small' \| 'medium'`
|
|
5822
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
5823
|
+
| ------------ | ----------------------------------------------- | ---------- | ---- | -------------------- | -------------------------------- |
|
|
5824
|
+
| `modelValue` | `string \| number \| undefined` | — | 否 | `v-model="value"` | 选中项的 value，`v-model` 绑定 |
|
|
5825
|
+
| `options` | `RadioTagOption[]`<br>— 条目字段见下「options」 | `() => []` | 否 | `:options="options"` | 标签选项列表，`value` 作为选中值 |
|
|
5826
|
+
| `size` | `'mini' \| 'small' \| 'medium'` | `'small'` | 否 | `size="mini"` | 标签尺寸，默认 small |
|
|
5827
|
+
|
|
5828
|
+
**`options` 条目字段（`RadioTagOption`）**
|
|
5829
|
+
|
|
5830
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
5831
|
+
| ---------- | ------------------ | ---- | ---- |
|
|
5832
|
+
| `label` | `string` | 是 | — |
|
|
5833
|
+
| `value` | `string \| number` | 是 | — |
|
|
5834
|
+
| `icon` | `string` | 否 | — |
|
|
5835
|
+
| `disabled` | `boolean` | 否 | — |
|
|
5563
5836
|
|
|
5564
5837
|
**事件（emits）**
|
|
5565
5838
|
|
|
@@ -5608,15 +5881,32 @@ import { ZlSearch } from '@zl-ui-kit/components'
|
|
|
5608
5881
|
|
|
5609
5882
|
**props**
|
|
5610
5883
|
|
|
5611
|
-
| 属性 | 类型
|
|
5612
|
-
| ---------------- |
|
|
5613
|
-
| `items` | `SearchItem[]
|
|
5614
|
-
| `model` | `Record<string, any>`
|
|
5615
|
-
| `immediate` | `boolean`
|
|
5616
|
-
| `disabled` | `boolean`
|
|
5617
|
-
| `labelsVisible` | `boolean`
|
|
5618
|
-
| `hideEmptyLabel` | `boolean`
|
|
5619
|
-
| `showLabels` | `boolean`
|
|
5884
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
5885
|
+
| ---------------- | ----------------------------------------- | ----------- | ---- | -------------------- | -------------------------------------------------------------------------------------------- |
|
|
5886
|
+
| `items` | `SearchItem[]`<br>— 条目字段见下「items」 | `() => []` | 否 | `:items="items"` | 查询项定义（SearchItem[]），按数组顺序排列 |
|
|
5887
|
+
| `model` | `Record<string, any>` | — | 否 | `:model="{}"` | 表单数据。传入时组件直接读写该对象（受控）； 不传则用内部副本，`params` / 标签行仍可正常工作 |
|
|
5888
|
+
| `immediate` | `boolean` | `true` | 否 | `:immediate="false"` | 挂载后立即执行一次查询（默认 true） |
|
|
5889
|
+
| `disabled` | `boolean` | `false` | 否 | `disabled` | 禁用全部查询项 |
|
|
5890
|
+
| `labelsVisible` | `boolean` | `undefined` | 否 | `labels-visible` | 是否展示「筛选条件」标签行；不传时按「是否发生溢出」自动判定 |
|
|
5891
|
+
| `hideEmptyLabel` | `boolean` | `false` | 否 | `hide-empty-label` | 表单项 label 为空时是否不渲染 label 占位，透传给 ZlForm 的 hideEmptyLabel |
|
|
5892
|
+
| `showLabels` | `boolean` | `undefined` | 否 | `show-labels` | 已废弃，请用 `labelsVisible` |
|
|
5893
|
+
|
|
5894
|
+
**`items` 条目字段（`SearchItem`）**
|
|
5895
|
+
|
|
5896
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
5897
|
+
| --------------- | ---------------------------------------------------------------------- | ---- | --------------------------------------------------- |
|
|
5898
|
+
| `model` | `string` | 是 | 字段名（必填） |
|
|
5899
|
+
| `label` | `string` | 否 | 标签文案（缺省用 model） |
|
|
5900
|
+
| `component` | `string \| any` | 否 | 动态组件名/组件对象（如 'el-input'、ElSelect） |
|
|
5901
|
+
| `props` | `Record<string, any>` | 否 | 组件 props（自动包装 update:modelValue 回写 model） |
|
|
5902
|
+
| `slots` | `Record<string, any>` | 否 | 组件插槽 |
|
|
5903
|
+
| `defaultValue` | `any` | 否 | 默认值 |
|
|
5904
|
+
| `slot` | `boolean` | 否 | 是否启用具名插槽（#model）自定义渲染 |
|
|
5905
|
+
| `formItemProps` | `Record<string, any>` | 否 | el-form-item 其余属性（rules 等） |
|
|
5906
|
+
| `tooltip` | `string` | 否 | 标签旁的问号提示文案 |
|
|
5907
|
+
| `visible` | `boolean \| ((model: Record<string, any>, item: FormItem) => boolean)` | 否 | 显隐控制：布尔值或判定函数 |
|
|
5908
|
+
| `toLabel` | `(value: any) => any` | 否 | 值 → 条件标签文本 |
|
|
5909
|
+
| `toParams` | `(value: any, acc: Record<string, any>) => Record<string, any>` | 否 | 值 → 查询参数（返回对象合并入 params） |
|
|
5620
5910
|
|
|
5621
5911
|
**事件（emits）**
|
|
5622
5912
|
|
|
@@ -5685,11 +5975,41 @@ import { ZlSearchTable } from '@zl-ui-kit/components'
|
|
|
5685
5975
|
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------- | ---------- | ---- | --------------------------- | ------------------------------------------------------------------------------------ |
|
|
5686
5976
|
| `immediate` | `boolean` | `true` | 否 | `:immediate="false"` | 挂载后立即请求首屏数据，默认 true |
|
|
5687
5977
|
| `request` | `\| ((...args: any[]) => Promise<any>) \| { service: (...args: any[]) => Promise<any>; options?: Record<string, any> }` | — | 是 | `:request="async () => {}"` | 请求函数，或 { service, options }（usePageableRequest options） |
|
|
5688
|
-
| `columns` | `TableColumn[]
|
|
5689
|
-
| `queryItems` | `SearchItem[]
|
|
5978
|
+
| `columns` | `TableColumn[]`<br>— 条目字段见下「columns」 | `() => []` | 否 | `:columns="columns"` | 表格列定义，决定有哪些列及其渲染方式 |
|
|
5979
|
+
| `queryItems` | `SearchItem[]`<br>— 条目字段见下「queryItems」 | `() => []` | 否 | `:query-items="queryItems"` | 查询区的表单项；为空且不传 search-actions 插槽时不渲染查询条 |
|
|
5690
5980
|
| `pagination` | `Record<string, any> \| boolean` | — | 否 | `:pagination="{}"` | 分页配置；传 false 关闭分页 |
|
|
5691
5981
|
| `hideEmptyLabel` | `boolean` | `false` | 否 | `hide-empty-label` | 查询项 label 为空时是否不渲染 label 占位，透传给 ZlSearch / ZlForm 的 hideEmptyLabel |
|
|
5692
5982
|
|
|
5983
|
+
**`columns` 条目字段（`TableColumn`）**
|
|
5984
|
+
|
|
5985
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
5986
|
+
| ------------- | --------------------- | ---- | -------------------------------------------------- |
|
|
5987
|
+
| `label` | `string` | 否 | 列标题（优先于 title） |
|
|
5988
|
+
| `title` | `string` | 否 | 列标题（兼容 arco/antd 写法，label 缺省时生效） |
|
|
5989
|
+
| `prop` | `string` | 否 | 取值字段名（优先于 dataIndex） |
|
|
5990
|
+
| `dataIndex` | `string` | 否 | 取值字段名（兼容 arco/antd 写法，prop 缺省时生效） |
|
|
5991
|
+
| `slot` | `string \| boolean` | 否 | 单元格插槽名（缺省用 prop） |
|
|
5992
|
+
| `columnSlot` | `boolean` | 否 | 启用表头插槽（header-{prop}） |
|
|
5993
|
+
| `actions` | `ActionItem[]` | 否 | 操作列（渲染 ZlActionList） |
|
|
5994
|
+
| `actionProps` | `Record<string, any>` | 否 | 透传给操作列 ZlActionList 的 props |
|
|
5995
|
+
|
|
5996
|
+
**`queryItems` 条目字段（`SearchItem`）**
|
|
5997
|
+
|
|
5998
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
5999
|
+
| --------------- | ---------------------------------------------------------------------- | ---- | --------------------------------------------------- |
|
|
6000
|
+
| `model` | `string` | 是 | 字段名（必填） |
|
|
6001
|
+
| `label` | `string` | 否 | 标签文案（缺省用 model） |
|
|
6002
|
+
| `component` | `string \| any` | 否 | 动态组件名/组件对象（如 'el-input'、ElSelect） |
|
|
6003
|
+
| `props` | `Record<string, any>` | 否 | 组件 props（自动包装 update:modelValue 回写 model） |
|
|
6004
|
+
| `slots` | `Record<string, any>` | 否 | 组件插槽 |
|
|
6005
|
+
| `defaultValue` | `any` | 否 | 默认值 |
|
|
6006
|
+
| `slot` | `boolean` | 否 | 是否启用具名插槽（#model）自定义渲染 |
|
|
6007
|
+
| `formItemProps` | `Record<string, any>` | 否 | el-form-item 其余属性（rules 等） |
|
|
6008
|
+
| `tooltip` | `string` | 否 | 标签旁的问号提示文案 |
|
|
6009
|
+
| `visible` | `boolean \| ((model: Record<string, any>, item: FormItem) => boolean)` | 否 | 显隐控制：布尔值或判定函数 |
|
|
6010
|
+
| `toLabel` | `(value: any) => any` | 否 | 值 → 条件标签文本 |
|
|
6011
|
+
| `toParams` | `(value: any, acc: Record<string, any>) => Record<string, any>` | 否 | 值 → 查询参数（返回对象合并入 params） |
|
|
6012
|
+
|
|
5693
6013
|
> 把 `$attrs` 透传给 `ZlTable`，未列出的属性会继续下传
|
|
5694
6014
|
|
|
5695
6015
|
**事件（emits）**
|
|
@@ -5836,10 +6156,17 @@ import { ZlSorterList } from '@zl-ui-kit/components'
|
|
|
5836
6156
|
|
|
5837
6157
|
**props**
|
|
5838
6158
|
|
|
5839
|
-
| 属性 | 类型
|
|
5840
|
-
| ---------- |
|
|
5841
|
-
| `sorters` | `SorterItem[]
|
|
5842
|
-
| `multiple` | `boolean`
|
|
6159
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
6160
|
+
| ---------- | ------------------------------------------- | ---------- | ---- | -------------------- | ---------------------------------------------- |
|
|
6161
|
+
| `sorters` | `SorterItem[]`<br>— 条目字段见下「sorters」 | `() => []` | 否 | `:sorters="sorters"` | 可排序字段列表，model 为字段名 |
|
|
6162
|
+
| `multiple` | `boolean` | `false` | 否 | `multiple` | 允许多字段同时排序；关闭时只保留最后点击的字段 |
|
|
6163
|
+
|
|
6164
|
+
**`sorters` 条目字段（`SorterItem`）**
|
|
6165
|
+
|
|
6166
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
6167
|
+
| ------- | -------- | ---- | ---- |
|
|
6168
|
+
| `label` | `string` | 否 | — |
|
|
6169
|
+
| `model` | `string` | 是 | — |
|
|
5843
6170
|
|
|
5844
6171
|
**事件（emits）**
|
|
5845
6172
|
|
|
@@ -5885,7 +6212,7 @@ import { ZlStep } from '@zl-ui-kit/components'
|
|
|
5885
6212
|
|
|
5886
6213
|
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
5887
6214
|
| --------------------- | --------------------------------------------------------- | -------------- | ---- | ---------------------------- | ------------------------------------------------------- |
|
|
5888
|
-
| `steps` | `StepItem[]
|
|
6215
|
+
| `steps` | `StepItem[]`<br>— 条目字段见下「steps」 | `() => []` | 否 | `:steps="steps"` | 步骤列表，决定步骤数量、顺序与内容 |
|
|
5889
6216
|
| `current` | `number` | `0` | 否 | `:current="1"` | 当前步骤下标（从 0 开始） |
|
|
5890
6217
|
| `direction` | `'horizontal' \| 'vertical'` | `'horizontal'` | 否 | `direction="horizontal"` | 排列方向：横向或纵向 |
|
|
5891
6218
|
| `processStatus` | `'process' \| 'finish' \| 'error'` | `'process'` | 否 | `process-status="process"` | 当前步骤呈现的状态 |
|
|
@@ -5896,6 +6223,16 @@ import { ZlStep } from '@zl-ui-kit/components'
|
|
|
5896
6223
|
| `titleFontSize` | `number` | — | 否 | `:title-font-size="1"` | 标题字号（px） |
|
|
5897
6224
|
| `descriptionFontSize` | `number` | — | 否 | `:description-font-size="1"` | 描述字号（px） |
|
|
5898
6225
|
|
|
6226
|
+
**`steps` 条目字段（`StepItem`）**
|
|
6227
|
+
|
|
6228
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
6229
|
+
| ------------- | --------------------------------------------------------- | ---- | -------------------------------------------------------------------------- |
|
|
6230
|
+
| `title` | `string` | 否 | 步骤标题；可用 title 插槽覆盖 |
|
|
6231
|
+
| `description` | `string` | 否 | 步骤描述；可用 description 插槽覆盖 |
|
|
6232
|
+
| `icon` | `string` | 否 | 步骤图标（图标名字符串，经 ZlIcon 渲染）；可用 icon 插槽覆盖 |
|
|
6233
|
+
| `status` | `'wait' \| 'process' \| 'finish' \| 'error' \| 'success'` | 否 | 该步骤状态；缺省由 current 自动推算（finish/process/wait），显式指定则覆盖 |
|
|
6234
|
+
| `disabled` | `boolean` | 否 | 是否禁用该步骤 |
|
|
6235
|
+
|
|
5899
6236
|
**插槽（slots）**
|
|
5900
6237
|
|
|
5901
6238
|
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
@@ -6000,14 +6337,27 @@ import { ZlTable } from '@zl-ui-kit/components'
|
|
|
6000
6337
|
|
|
6001
6338
|
**props**
|
|
6002
6339
|
|
|
6003
|
-
| 属性 | 类型
|
|
6004
|
-
| -------------- |
|
|
6005
|
-
| `columns` | `TableColumn[]
|
|
6006
|
-
| `data` | `any[] \| Record<string, any>`
|
|
6007
|
-
| `dataKey` | `string`
|
|
6008
|
-
| `expandAction` | `boolean`
|
|
6009
|
-
| `pagination` | `Record<string, any> \| boolean`
|
|
6010
|
-
| `loading` | `boolean`
|
|
6340
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
6341
|
+
| -------------- | -------------------------------------------- | -------- | ---- | -------------------- | ---------------------------------------------------------------------------- |
|
|
6342
|
+
| `columns` | `TableColumn[]`<br>— 条目字段见下「columns」 | — | 是 | `:columns="columns"` | 表格列配置，定义字段、标题与渲染方式 |
|
|
6343
|
+
| `data` | `any[] \| Record<string, any>` | — | 是 | `:data="data"` | 数组（本地数据）或 { [dataKey]: rows, pageNum, pageSize, total }（分页数据） |
|
|
6344
|
+
| `dataKey` | `string` | `'rows'` | 否 | `data-key="rows"` | 分页数据中的行数组字段名 |
|
|
6345
|
+
| `expandAction` | `boolean` | `false` | 否 | `expand-action` | actions 列宽加宽（参考实现 expandAction 语义） |
|
|
6346
|
+
| `pagination` | `Record<string, any> \| boolean` | — | 否 | `:pagination="{}"` | 分页配置，设为 false 时隐藏分页 |
|
|
6347
|
+
| `loading` | `boolean` | `false` | 否 | `loading` | 表格 loading（作用于表格区） |
|
|
6348
|
+
|
|
6349
|
+
**`columns` 条目字段（`TableColumn`）**
|
|
6350
|
+
|
|
6351
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
6352
|
+
| ------------- | --------------------- | ---- | -------------------------------------------------- |
|
|
6353
|
+
| `label` | `string` | 否 | 列标题（优先于 title） |
|
|
6354
|
+
| `title` | `string` | 否 | 列标题（兼容 arco/antd 写法，label 缺省时生效） |
|
|
6355
|
+
| `prop` | `string` | 否 | 取值字段名（优先于 dataIndex） |
|
|
6356
|
+
| `dataIndex` | `string` | 否 | 取值字段名（兼容 arco/antd 写法，prop 缺省时生效） |
|
|
6357
|
+
| `slot` | `string \| boolean` | 否 | 单元格插槽名（缺省用 prop） |
|
|
6358
|
+
| `columnSlot` | `boolean` | 否 | 启用表头插槽（header-{prop}） |
|
|
6359
|
+
| `actions` | `ActionItem[]` | 否 | 操作列（渲染 ZlActionList） |
|
|
6360
|
+
| `actionProps` | `Record<string, any>` | 否 | 透传给操作列 ZlActionList 的 props |
|
|
6011
6361
|
|
|
6012
6362
|
> 暴露对象是 `Proxy`：下表为显式实现的能力，**未列出的键会运行时下钻到内部实例**（不建议依赖，请用上表的实例 getter 取原生对象）
|
|
6013
6363
|
> 把 `$attrs` 透传给 `el-table`，未列出的属性会继续下传
|
|
@@ -6086,13 +6436,22 @@ import { ZlTabs } from '@zl-ui-kit/components'
|
|
|
6086
6436
|
|
|
6087
6437
|
**props**
|
|
6088
6438
|
|
|
6089
|
-
| 属性 | 类型
|
|
6090
|
-
| ------------ |
|
|
6091
|
-
| `tabs` | `
|
|
6092
|
-
| `modelValue` | `[String, Number]`
|
|
6093
|
-
| `border` | `boolean`
|
|
6094
|
-
| `fit` | `boolean`
|
|
6095
|
-
| `darkNav` | `boolean`
|
|
6439
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
6440
|
+
| ------------ | ------------------------------------- | ----------- | ---- | ------------------- | ------------------------------------------------------------------------- |
|
|
6441
|
+
| `tabs` | `TabItem[]`<br>— 条目字段见下「tabs」 | `() => []` | 否 | `:tabs="tabs"` | 页签配置列表，以 key 关联内容插槽 |
|
|
6442
|
+
| `modelValue` | `[String, Number]` | `undefined` | 否 | `v-model="value"` | 当前激活页签的 key，可用 v-model 双向绑定 |
|
|
6443
|
+
| `border` | `boolean` | `false` | 否 | `border` | 是否显示页签导航分隔线，默认不显示（需要导航下那条细线时显式传 `border`） |
|
|
6444
|
+
| `fit` | `boolean` | — | 否 | `fit` | 是否撑满容器并让内容区滚动 |
|
|
6445
|
+
| `darkNav` | `boolean` | `true` | 否 | `:dark-nav="false"` | 是否启用导航背景色（取主题卡片底色 `--zl-bg-2`，light 为白底），默认启用 |
|
|
6446
|
+
|
|
6447
|
+
**`tabs` 条目字段（`TabItem`）**
|
|
6448
|
+
|
|
6449
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
6450
|
+
| ---------- | --------- | ---- | -------------------------------------------------------------------------- |
|
|
6451
|
+
| `key` | `string` | 是 | 页签唯一键（必填），同时作为内容插槽名（`#<key>`）与 `el-tab-pane` 的 name |
|
|
6452
|
+
| `title` | `string` | 否 | 页签标题 |
|
|
6453
|
+
| `lazy` | `boolean` | 否 | 是否懒挂载，默认 true；与 arco 风 `lazyLoad` 二选一 |
|
|
6454
|
+
| `lazyLoad` | `boolean` | 否 | arco 风懒挂载开关（`lazy` 的别名，二选一） |
|
|
6096
6455
|
|
|
6097
6456
|
> 选项式组件（`defineComponent`），props 定义在 `props: {}` 中
|
|
6098
6457
|
> 把 `$attrs` 透传给内部组件，未列出的属性会继续下传
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { PropType } from 'vue';
|
|
2
|
+
import { IComponent } from './types';
|
|
1
3
|
/**
|
|
2
4
|
* 动态组件渲染引擎（schema → VNode）
|
|
3
5
|
* schema 见 types.ts；组件名支持全局注册名或组件对象；默认 el-input
|
|
@@ -15,7 +17,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
15
17
|
};
|
|
16
18
|
/** 待渲染组件的 schema 描述，缺省渲染 el-input */
|
|
17
19
|
component: {
|
|
18
|
-
type:
|
|
20
|
+
type: PropType<IComponent>;
|
|
19
21
|
default: () => {
|
|
20
22
|
component: string;
|
|
21
23
|
};
|
|
@@ -40,7 +42,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
40
42
|
};
|
|
41
43
|
/** 待渲染组件的 schema 描述，缺省渲染 el-input */
|
|
42
44
|
component: {
|
|
43
|
-
type:
|
|
45
|
+
type: PropType<IComponent>;
|
|
44
46
|
default: () => {
|
|
45
47
|
component: string;
|
|
46
48
|
};
|
|
@@ -49,7 +51,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
49
51
|
onInput?: ((_value: any, ..._values: any[]) => any) | undefined;
|
|
50
52
|
"onUpdate:modelValue"?: ((_value: any) => any) | undefined;
|
|
51
53
|
}>, {
|
|
52
|
-
component:
|
|
54
|
+
component: IComponent;
|
|
53
55
|
model: Record<string, any>;
|
|
54
56
|
value: string | number | boolean | unknown[];
|
|
55
57
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
@@ -1,3 +1,16 @@
|
|
|
1
|
+
import { PropType } from 'vue';
|
|
2
|
+
/** 页签配置项：`key` 同时作为插槽名（`#tab.key`）与 `el-tab-pane` 的 name */
|
|
3
|
+
export interface TabItem {
|
|
4
|
+
/** 页签唯一键（必填），同时作为内容插槽名（`#<key>`）与 `el-tab-pane` 的 name */
|
|
5
|
+
key: string;
|
|
6
|
+
/** 页签标题 */
|
|
7
|
+
title?: string;
|
|
8
|
+
/** 是否懒挂载，默认 true；与 arco 风 `lazyLoad` 二选一 */
|
|
9
|
+
lazy?: boolean;
|
|
10
|
+
/** arco 风懒挂载开关（`lazy` 的别名，二选一） */
|
|
11
|
+
lazyLoad?: boolean;
|
|
12
|
+
[key: string]: any;
|
|
13
|
+
}
|
|
1
14
|
/**
|
|
2
15
|
* 标签页（el-tabs 封装）：tabs schema 驱动，每 tab 内容经具名插槽（#tab.key）渲染
|
|
3
16
|
* EP 映射：tab.key→el-tab-pane name、tab.title→label、tab.lazyLoad|tab.lazy→lazy
|
|
@@ -21,7 +34,7 @@
|
|
|
21
34
|
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
|
22
35
|
/** 页签配置列表，以 key 关联内容插槽 */
|
|
23
36
|
tabs: {
|
|
24
|
-
type:
|
|
37
|
+
type: PropType<TabItem[]>;
|
|
25
38
|
default: () => never[];
|
|
26
39
|
};
|
|
27
40
|
/** 当前激活页签的 key，可用 v-model 双向绑定 */
|
|
@@ -49,7 +62,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
49
62
|
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
50
63
|
/** 页签配置列表，以 key 关联内容插槽 */
|
|
51
64
|
tabs: {
|
|
52
|
-
type:
|
|
65
|
+
type: PropType<TabItem[]>;
|
|
53
66
|
default: () => never[];
|
|
54
67
|
};
|
|
55
68
|
/** 当前激活页签的 key，可用 v-model 双向绑定 */
|
|
@@ -75,7 +88,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
75
88
|
border: boolean;
|
|
76
89
|
modelValue: string | number;
|
|
77
90
|
fit: boolean;
|
|
78
|
-
tabs:
|
|
91
|
+
tabs: TabItem[];
|
|
79
92
|
darkNav: boolean;
|
|
80
93
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
81
94
|
export default _default;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zl-ui-kit/components",
|
|
3
|
-
"version": "0.18.
|
|
3
|
+
"version": "0.18.8",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "ZL UI 业务组件库（Element Plus 体系，Zl 前缀）——首批：Icon/AutoTooltip/Tag/CornerTag/Text/Title/Copy/Empty/Pagination/DictTag",
|
|
6
6
|
"license": "MIT",
|
|
@@ -39,9 +39,9 @@
|
|
|
39
39
|
"file-type": "^20.4.1",
|
|
40
40
|
"dt-sql-parser": "^4.3.1",
|
|
41
41
|
"sql-formatter": "^15.4.2",
|
|
42
|
-
"@zl-ui-kit/utils": "0.18.
|
|
43
|
-
"@zl-ui-kit/
|
|
44
|
-
"@zl-ui-kit/
|
|
42
|
+
"@zl-ui-kit/utils": "0.18.8",
|
|
43
|
+
"@zl-ui-kit/composables": "0.18.8",
|
|
44
|
+
"@zl-ui-kit/icons": "0.18.8"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"@vueuse/core": "^12.3.0 || ^13.0.0 || ^14.0.0 || ^15.0.0",
|
|
@@ -98,10 +98,10 @@
|
|
|
98
98
|
"@vue-office/pdf": "^2.0.10",
|
|
99
99
|
"@vue-office/pptx": "1.0.1",
|
|
100
100
|
"echarts": "^5.6.0",
|
|
101
|
-
"@jichuang/eslint-config": "1.0.0",
|
|
102
101
|
"@jichuang/tsconfig": "1.0.0",
|
|
103
|
-
"@
|
|
104
|
-
"@
|
|
102
|
+
"@zl-ui-kit/theme": "0.18.8",
|
|
103
|
+
"@jichuang/eslint-config": "1.0.0",
|
|
104
|
+
"@jichuang/vite-config": "1.0.0"
|
|
105
105
|
},
|
|
106
106
|
"repository": {
|
|
107
107
|
"type": "git",
|