@zl-ui-kit/components 0.18.6 → 0.18.7
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
|
@@ -3815,6 +3815,8 @@ const { i18n } = useLocale({ messages })
|
|
|
3815
3815
|
>
|
|
3816
3816
|
> **每个 prop / 每个插槽都有示例**：`props` 表的「示例」列是该属性的**可直接粘贴写法**（`v-model` 用简写，布尔值按默认值给反例，字面量联合取首个取值，数组 / 对象 / 函数给空字面量占位）；`插槽` 表的「示例」列是对应的 `<template #name>` 片段。想直接改原始代码，用上面的「用法示例 / 插槽用法」块。
|
|
3817
3817
|
>
|
|
3818
|
+
> **schema 条目字段**：类型为 `Xxx[]` 的 prop（如 `ZlGrid.grid: IGridItem[]`）在 props 表下方附「`prop` 条目字段（`Xxx`）」子表，列出该条目接口的**完整字段**（含 `extends` 合并）。字段来自源码定义（内嵌 `export interface` / `types.ts` / `DictItem` 跨包）。
|
|
3819
|
+
>
|
|
3818
3820
|
> 同一次生成还会写出 `apps/playground/src/data/component-api.json`，playground 的 **UI 组件使用手册**（`/#/manual`）页直接渲染它 —— 可检索、可复制 `import`，内容与本章一致。
|
|
3819
3821
|
|
|
3820
3822
|
### 组件索引
|
|
@@ -3941,14 +3943,29 @@ import { ZlActionList } from '@zl-ui-kit/components'
|
|
|
3941
3943
|
|
|
3942
3944
|
**props**
|
|
3943
3945
|
|
|
3944
|
-
| 属性 | 类型
|
|
3945
|
-
| ------------- |
|
|
3946
|
-
| `actions` | `ActionItem[]
|
|
3947
|
-
| `actionArgs` | `any[]`
|
|
3948
|
-
| `visibleArgs` | `any[]`
|
|
3949
|
-
| `listCount` | `number`
|
|
3950
|
-
| `iconMore` | `boolean \| Record<string, any>`
|
|
3951
|
-
| `separator` | `boolean`
|
|
3946
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
3947
|
+
| ------------- | ------------------------------------------- | ---------- | ---- | ----------------------- | ------------------------------------------------ |
|
|
3948
|
+
| `actions` | `ActionItem[]`<br>— 条目字段见下「actions」 | `() => []` | 否 | `:actions="actions"` | 操作项配置，按顺序渲染为文字或图标按钮 |
|
|
3949
|
+
| `actionArgs` | `any[]` | `() => []` | 否 | `:action-args="[]"` | 点击时透传给 `action` 事件与 handler 的参数 |
|
|
3950
|
+
| `visibleArgs` | `any[]` | `() => []` | 否 | `:visible-args="[]"` | 传给每项 `visible` 判定函数的参数 |
|
|
3951
|
+
| `listCount` | `number` | `2` | 否 | `:list-count="1"` | 直接展示的操作数，超出收入"更多"下拉 |
|
|
3952
|
+
| `iconMore` | `boolean \| Record<string, any>` | — | 否 | `:icon-more="iconMore"` | 为 true 时把"更多"换成图标，对象则作为图标 props |
|
|
3953
|
+
| `separator` | `boolean` | — | 否 | `separator` | 各操作之间是否插入竖线分隔符 |
|
|
3954
|
+
|
|
3955
|
+
**`actions` 条目字段（`ActionItem`）**
|
|
3956
|
+
|
|
3957
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
3958
|
+
| ------------ | ------------------------------------------ | ---- | ------------------------------------------------------------------------------------------------------------------------------ |
|
|
3959
|
+
| `label` | `string` | 是 | 操作文案 |
|
|
3960
|
+
| `icon` | `string` | 否 | 图标（`zl:` 前缀走 ZlIcon，其余按 iconify/EP 规则） |
|
|
3961
|
+
| `iconProps` | `Record<string, any>` | 否 | 传给图标组件的 props |
|
|
3962
|
+
| `iconClass` | `string` | 否 | 图标自定义类名 |
|
|
3963
|
+
| `tooltip` | `boolean \| string` | 否 | 提示词：`true` 用 `label` 作为提示；传字符串则直接作为提示词（无需同时配置 `label`）。 仅对纯图标操作项生效（配置了 `icon`）。 |
|
|
3964
|
+
| `disabled` | `boolean` | 否 | 禁用（点击无响应） |
|
|
3965
|
+
| `divided` | `boolean` | 否 | 与下一项之间显示分割线 |
|
|
3966
|
+
| `permission` | `string \| string[]` | 否 | 权限键（三段式，经 usePermission 校验） |
|
|
3967
|
+
| `visible` | `boolean \| ((...args: any[]) => boolean)` | 否 | 显隐控制：布尔值直接判定；函数接收 `visibleArgs`（末尾追加 action 自身）后判定。 与权限取交集：两者都通过才展示。 |
|
|
3968
|
+
| `handler` | `(...args: any[]) => void` | 否 | 点击处理（接收 actionArgs） |
|
|
3952
3969
|
|
|
3953
3970
|
**事件（emits）**
|
|
3954
3971
|
|
|
@@ -4091,11 +4108,20 @@ import { ZlAppMenu } from '@zl-ui-kit/components'
|
|
|
4091
4108
|
|
|
4092
4109
|
**props**
|
|
4093
4110
|
|
|
4094
|
-
| 属性 | 类型
|
|
4095
|
-
| ----------- |
|
|
4096
|
-
| `collapsed` | `boolean`
|
|
4097
|
-
| `layout` | `'vertical' \| 'horizontal'`
|
|
4098
|
-
| `menus` | `MenuItem[]
|
|
4111
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
4112
|
+
| ----------- | --------------------------------------- | ------------ | ---- | ------------------- | ----------------------------------- |
|
|
4113
|
+
| `collapsed` | `boolean` | `false` | 否 | `collapsed` | 菜单是否收起为图标，侧栏折叠时用 |
|
|
4114
|
+
| `layout` | `'vertical' \| 'horizontal'` | `'vertical'` | 否 | `layout="vertical"` | el-menu 模式：vertical / horizontal |
|
|
4115
|
+
| `menus` | `MenuItem[]`<br>— 条目字段见下「menus」 | `() => []` | 否 | `:menus="menus"` | 菜单树数据，递归渲染为多级菜单项 |
|
|
4116
|
+
|
|
4117
|
+
**`menus` 条目字段（`MenuItem`）**
|
|
4118
|
+
|
|
4119
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
4120
|
+
| ---------- | ------------ | ---- | ------ |
|
|
4121
|
+
| `name` | `string` | 是 | 唯一键 |
|
|
4122
|
+
| `title` | `string` | 是 | — |
|
|
4123
|
+
| `icon` | `string` | 否 | — |
|
|
4124
|
+
| `children` | `MenuItem[]` | 否 | — |
|
|
4099
4125
|
|
|
4100
4126
|
**事件（emits）**
|
|
4101
4127
|
|
|
@@ -4320,12 +4346,29 @@ import { ZlCardPage } from '@zl-ui-kit/components'
|
|
|
4320
4346
|
| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ---- | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
4321
4347
|
| `immediate` | `boolean` | `true` | 否 | `:immediate="false"` | 无查询条件时是否立即发起首次请求 |
|
|
4322
4348
|
| `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[]
|
|
4349
|
+
| `queryItems` | `SearchItem[]`<br>— 条目字段见下「queryItems」 | `() => []` | 否 | `:query-items="queryItems"` | 搜索表单项配置，为空则不渲染搜索栏 |
|
|
4324
4350
|
| `hideEmptyLabel` | `boolean` | `false` | 否 | `hide-empty-label` | 搜索项 label 为空时是否不渲染 label 占位，透传给 ZlSearch / ZlForm 的 hideEmptyLabel |
|
|
4325
4351
|
| `pagination` | `Record<string, any> \| boolean` | `true` | 否 | `:pagination="{}"` | 分页配置，false 关闭分页，对象则透传 |
|
|
4326
4352
|
| `itemKey` | `string` | `'id'` | 否 | `item-key="id"` | 卡片数据的唯一键字段名，默认 id |
|
|
4327
4353
|
| `cardMinWidth` | `string` | — | 否 | `card-min-width="280px"` | 卡片最小宽度，决定单行能放几列 |
|
|
4328
4354
|
|
|
4355
|
+
**`queryItems` 条目字段（`SearchItem`）**
|
|
4356
|
+
|
|
4357
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
4358
|
+
| --------------- | ---------------------------------------------------------------------- | ---- | --------------------------------------------------- |
|
|
4359
|
+
| `model` | `string` | 是 | 字段名（必填） |
|
|
4360
|
+
| `label` | `string` | 否 | 标签文案（缺省用 model） |
|
|
4361
|
+
| `component` | `string \| any` | 否 | 动态组件名/组件对象（如 'el-input'、ElSelect） |
|
|
4362
|
+
| `props` | `Record<string, any>` | 否 | 组件 props（自动包装 update:modelValue 回写 model） |
|
|
4363
|
+
| `slots` | `Record<string, any>` | 否 | 组件插槽 |
|
|
4364
|
+
| `defaultValue` | `any` | 否 | 默认值 |
|
|
4365
|
+
| `slot` | `boolean` | 否 | 是否启用具名插槽（#model）自定义渲染 |
|
|
4366
|
+
| `formItemProps` | `Record<string, any>` | 否 | el-form-item 其余属性（rules 等） |
|
|
4367
|
+
| `tooltip` | `string` | 否 | 标签旁的问号提示文案 |
|
|
4368
|
+
| `visible` | `boolean \| ((model: Record<string, any>, item: FormItem) => boolean)` | 否 | 显隐控制：布尔值或判定函数 |
|
|
4369
|
+
| `toLabel` | `(value: any) => any` | 否 | 值 → 条件标签文本 |
|
|
4370
|
+
| `toParams` | `(value: any, acc: Record<string, any>) => Record<string, any>` | 否 | 值 → 查询参数（返回对象合并入 params） |
|
|
4371
|
+
|
|
4329
4372
|
**事件（emits）**
|
|
4330
4373
|
|
|
4331
4374
|
| 事件 | 参数 | 说明 |
|
|
@@ -4372,10 +4415,18 @@ import { ZlCheckAll } from '@zl-ui-kit/components'
|
|
|
4372
4415
|
|
|
4373
4416
|
**props**
|
|
4374
4417
|
|
|
4375
|
-
| 属性 | 类型
|
|
4376
|
-
| --------- |
|
|
4377
|
-
| `options` | `CheckAllOption[]
|
|
4378
|
-
| `model` | `Array<string \| number>`
|
|
4418
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
4419
|
+
| --------- | ----------------------------------------------- | ---------- | ---- | ----------------------- | ---------------------------------------- |
|
|
4420
|
+
| `options` | `CheckAllOption[]`<br>— 条目字段见下「options」 | `() => []` | 否 | `:options="options"` | 全选管理的可选项，每项渲染成一个复选框 |
|
|
4421
|
+
| `model` | `Array<string \| number>` | `() => []` | 否 | `v-model:model="value"` | 已勾选的 value 集合，用 v-model 双向绑定 |
|
|
4422
|
+
|
|
4423
|
+
**`options` 条目字段（`CheckAllOption`）**
|
|
4424
|
+
|
|
4425
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
4426
|
+
| ---------- | ------------------ | ---- | ---- |
|
|
4427
|
+
| `label` | `string` | 是 | — |
|
|
4428
|
+
| `value` | `string \| number` | 是 | — |
|
|
4429
|
+
| `disabled` | `boolean` | 否 | — |
|
|
4379
4430
|
|
|
4380
4431
|
**事件（emits）**
|
|
4381
4432
|
|
|
@@ -4413,15 +4464,25 @@ import { ZlCheckboxTag } from '@zl-ui-kit/components'
|
|
|
4413
4464
|
|
|
4414
4465
|
**props**
|
|
4415
4466
|
|
|
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'`
|
|
4467
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
4468
|
+
| ------------ | -------------------------------------------------- | ---------- | ---- | -------------------- | ----------------------------------------------------------------------------------------- |
|
|
4469
|
+
| `modelValue` | `any` | — | 否 | `v-model="value"` | `v-model` 绑定的值（`defineModel` 隐式声明） |
|
|
4470
|
+
| `options` | `CheckboxTagOption[]`<br>— 条目字段见下「options」 | `() => []` | 否 | `:options="options"` | 标签候选列表，每项可配图标与互斥组 |
|
|
4471
|
+
| `single` | `boolean` | — | 否 | `single` | 单选模式（值为单值） |
|
|
4472
|
+
| `rounded` | `boolean \| number \| string` | `true` | 否 | `:rounded="rounded"` | 是否圆角显示，默认开启；也可为具体圆角值（数字 px 或 CSS 长度），false 关闭（直角/small） |
|
|
4473
|
+
| `bordered` | `boolean` | `true` | 否 | `:bordered="false"` | 是否显示边框，默认开启 |
|
|
4474
|
+
| `fill` | `boolean` | `true` | 否 | `:fill="false"` | 是否填充背景色，默认开启 |
|
|
4475
|
+
| `size` | `'mini' \| 'small' \| 'medium'` | `'small'` | 否 | `size="mini"` | 标签尺寸档位，默认 small |
|
|
4476
|
+
|
|
4477
|
+
**`options` 条目字段（`CheckboxTagOption`）**
|
|
4478
|
+
|
|
4479
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
4480
|
+
| ----------- | ------------------- | ---- | -------------------------------------------------------------- |
|
|
4481
|
+
| `label` | `string` | 是 | — |
|
|
4482
|
+
| `value` | `string \| number` | 是 | — |
|
|
4483
|
+
| `icon` | `string` | 否 | — |
|
|
4484
|
+
| `disabled` | `boolean` | 否 | — |
|
|
4485
|
+
| `exclusive` | `boolean \| string` | 否 | 互斥项：true 单互斥组；string 为互斥组名（同组互斥、跨组替换） |
|
|
4425
4486
|
|
|
4426
4487
|
**事件（emits）**
|
|
4427
4488
|
|
|
@@ -4512,12 +4573,24 @@ import { ZlDescription } from '@zl-ui-kit/components'
|
|
|
4512
4573
|
|
|
4513
4574
|
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
4514
4575
|
| -------------- | ----------------------------------------------------------------- | -------------------------------------- | ---- | --------------------------- | -------------------------------------------------------------------- |
|
|
4515
|
-
| `items` | `DescriptionItem[]
|
|
4576
|
+
| `items` | `DescriptionItem[]`<br>— 条目字段见下「items」 | — | 是 | `:items="items"` | 展示项列表，决定字段顺序、取值与显隐 |
|
|
4516
4577
|
| `data` | `Record<string, any>` | `() => ({})` | 否 | `:data="{}"` | 取值来源对象，缺省按各项 key 取字段 |
|
|
4517
4578
|
| `emptyChecker` | `(value: any, key: string, data: Record<string, any>) => boolean` | `(val: any) => !val && !isNumber(val)` | 否 | `:empty-checker="() => {}"` | 判断值是否为空，为空时改显示占位文案 |
|
|
4518
4579
|
| `emptyText` | `string` | — | 否 | `empty-text="暂无数据"` | 空值占位文案（缺省走 i18n zl.description.empty，未接入时兜底"暂无"） |
|
|
4519
4580
|
| `secondary` | `boolean` | — | 否 | `secondary` | 次要形态：灰底并显示字段间分隔线 |
|
|
4520
4581
|
|
|
4582
|
+
**`items` 条目字段（`DescriptionItem`）**
|
|
4583
|
+
|
|
4584
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
4585
|
+
| ---------- | ------------------------------------------------------------------------------ | ---- | ------------------------------------- |
|
|
4586
|
+
| `label` | `string` | 是 | — |
|
|
4587
|
+
| `key` | `string` | 是 | — |
|
|
4588
|
+
| `icon` | `string` | 否 | — |
|
|
4589
|
+
| `getValue` | `(data: Record<string, any>, key: string, item: DescriptionItem) => any` | 否 | 取值函数（缺省取 data[key]） |
|
|
4590
|
+
| `dict` | `string \| Record<string, any>` | 否 | 字典（string 视为 dictKey） |
|
|
4591
|
+
| `visible` | `boolean \| ((value: any, key: string, data: Record<string, any>) => boolean)` | 否 | 显隐（false 或函数返回 false 时跳过） |
|
|
4592
|
+
| `slot` | `boolean` | 否 | 是否启用具名插槽（#key）渲染值 |
|
|
4593
|
+
|
|
4521
4594
|
**插槽（slots）**
|
|
4522
4595
|
|
|
4523
4596
|
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
@@ -4613,7 +4686,7 @@ import { ZlDictTag } from '@zl-ui-kit/components'
|
|
|
4613
4686
|
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
4614
4687
|
| ------------- | ------------------------------------------------------------------------- | ----------- | ---- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
4615
4688
|
| `dictKey` | `string` | — | 是 | `dict-key="gender"` | 字典键（对应全局字典缓存的键；外部直传数据也以该键写入共享缓存）。 ⚠️ 直传 `dict` 会**覆盖全局同名 key**，不要在列表里逐行传不同的 `dict`（最后一行会污染全站）， 行级字典请用独立 key（如 `` `resourceType.${row.id}` ``）。 |
|
|
4616
|
-
| `dict` | `DictItem[]
|
|
4689
|
+
| `dict` | `DictItem[]`<br>— 条目字段见下「dict」 | — | 否 | `:dict="dict"` | 外部直传字典数据：无需依赖全局数据源即可翻译。格式同 `DictItem[]`（`{ label, value, icon?, color?, type? }`）。 `color` 可以是主题色名，也可以是 `#ff7d45` 这类原生 CSS 颜色值（角标上按纯色渲染，不自动渐变） |
|
|
4617
4690
|
| `corner` | `boolean \| 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` | `false` | 否 | `corner="top-left"` | 是否渲染成角标并指定方位，true 时为右上角 |
|
|
4618
4691
|
| `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
4692
|
| `value` | `string` | — | 否 | `value="1"` | 待翻译的字典值，匹配不到时原样展示。 与字典项的 `value` 做**严格相等**比较，后端返回数字状态码时要先转成字符串 （`:value="String(row.status)"`，或在字典数据源里归一）。 |
|
|
@@ -4623,6 +4696,16 @@ import { ZlDictTag } from '@zl-ui-kit/components'
|
|
|
4623
4696
|
| `fill` | `boolean` | `false` | 否 | `fill` | 是否使用填充背景（配合字典项 `color`/`type` 显示浅色底色，如 `--zl-<色>-1`），透传给内部 ZlTag |
|
|
4624
4697
|
| `rounded` | `boolean` | `false` | 否 | `rounded` | 是否使用全圆角样式，透传给内部 ZlTag |
|
|
4625
4698
|
|
|
4699
|
+
**`dict` 条目字段（`DictItem`）**
|
|
4700
|
+
|
|
4701
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
4702
|
+
| ------- | -------- | ---- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
4703
|
+
| `label` | `string` | 是 | — |
|
|
4704
|
+
| `value` | `string` | 是 | 字典值。与业务侧传入的 `value` 做**严格相等**比较， 业务数据是数字码（如 `status: 1`）时必须先 `String()` 归一，否则匹配不到。 |
|
|
4705
|
+
| `icon` | `string` | 否 | 标签前置图标名，须是 `@zl-ui-kit/icons` 里真实存在的名字（未注册则渲染空白） |
|
|
4706
|
+
| `color` | `string` | 否 | 标签主题色名。作用于 `ZlTag` 的 `color`，只认**色名**（`primary` / `success` / `warning` / `danger` / `gray` / `red` …），不是 CSS 颜色值；传 `#67C23A` 会拼成非法 class 而静默无样式。 |
|
|
4707
|
+
| `type` | `string` | 否 | 兼容 Element Plus / arco 写法的语义色名，等价于 `color`（两者同传时 `color` 优先）。 其中 `info` 在本库色板里没有对应色名，会映射为 `gray`。 |
|
|
4708
|
+
|
|
4626
4709
|
> 把 `$attrs` 透传给 `zl-corner-tag`，未列出的属性会继续下传
|
|
4627
4710
|
|
|
4628
4711
|
#### `ZlDrawer`
|
|
@@ -4705,11 +4788,27 @@ import { ZlDynamicComponent } from '@zl-ui-kit/components'
|
|
|
4705
4788
|
|
|
4706
4789
|
**props**
|
|
4707
4790
|
|
|
4708
|
-
| 属性 | 类型
|
|
4709
|
-
| ----------- |
|
|
4710
|
-
| `model` | `Record<string, any>`
|
|
4711
|
-
| `value` | `[String, Number, Array, Boolean]`
|
|
4712
|
-
| `component` | `
|
|
4791
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
4792
|
+
| ----------- | ------------------------------------------- | ----------------------------------- | ---- | ------------------------ | ------------------------------------------- |
|
|
4793
|
+
| `model` | `Record<string, any>` | `() => ({})` | 否 | `:model="{}"` | 共享的数据对象，子组件按 model 字段读写值 |
|
|
4794
|
+
| `value` | `[String, Number, Array, Boolean]` | `null` | 否 | `:value="value"` | type 为 vModel 时透传给子组件的值 |
|
|
4795
|
+
| `component` | `IComponent`<br>— 条目字段见下「component」 | `() => ({ component: 'el-input' })` | 否 | `:component="component"` | 待渲染组件的 schema 描述，缺省渲染 el-input |
|
|
4796
|
+
|
|
4797
|
+
**`component` 条目字段（`IComponent`）**
|
|
4798
|
+
|
|
4799
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
4800
|
+
| ----------- | ------------------------------------------------------------------------------- | ---- | ---- |
|
|
4801
|
+
| `component` | `string \| any` | 是 | — |
|
|
4802
|
+
| `class` | `string \| Record<string, boolean> \| Array<string \| Record<string, boolean>>` | 否 | — |
|
|
4803
|
+
| `style` | `string \| Record<string, boolean> \| Array<string \| Record<string, boolean>>` | 否 | — |
|
|
4804
|
+
| `model` | `string` | 否 | — |
|
|
4805
|
+
| `props` | `Record<string, any>` | 否 | — |
|
|
4806
|
+
| `domProps` | `Record<string, any>` | 否 | — |
|
|
4807
|
+
| `on` | `Record<string, (...args: any[]) => any>` | 否 | — |
|
|
4808
|
+
| `nativeOn` | `Record<string, (...args: any[]) => any>` | 否 | — |
|
|
4809
|
+
| `slots` | `IComponentSlot[]` | 否 | — |
|
|
4810
|
+
| `children` | `string \| VNode \| Array<string \| VNode>` | 否 | — |
|
|
4811
|
+
| `refInFor` | `boolean` | 否 | — |
|
|
4713
4812
|
|
|
4714
4813
|
> 选项式组件（`defineComponent`），props 定义在 `props: {}` 中
|
|
4715
4814
|
|
|
@@ -4783,7 +4882,15 @@ import { ZlLogin } from '@zl-ui-kit/components'
|
|
|
4783
4882
|
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
4784
4883
|
| ---------- | ------------------------------------------------------ | ------------ | ---- | ----------------------------- | -------------------------------------- |
|
|
4785
4884
|
| `onSubmit` | `(form: Record<string, any>) => Promise<void> \| void` | — | 否 | `:on-submit="async () => {}"` | 表单提交回调，接收用户填写的登录信息 |
|
|
4786
|
-
| `config` | `ZlLoginConfig
|
|
4885
|
+
| `config` | `ZlLoginConfig`<br>— 条目字段见下「config」 | `() => ({})` | 否 | `:config="config"` | 标题、背景（图片或视频）与整体布局形态 |
|
|
4886
|
+
|
|
4887
|
+
**`config` 条目字段（`ZlLoginConfig`）**
|
|
4888
|
+
|
|
4889
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
4890
|
+
| ------- | ---------- | ---- | -------------------------------------------------- |
|
|
4891
|
+
| `title` | `string` | 否 | 系统标题 |
|
|
4892
|
+
| `bg` | `string` | 否 | 背景（图片或 mp4/webm 视频）地址，默认内置动效背景 |
|
|
4893
|
+
| `type` | `'center'` | 否 | 布局形态：右置（默认）/ center 居中 |
|
|
4787
4894
|
|
|
4788
4895
|
**插槽（slots）**
|
|
4789
4896
|
|
|
@@ -4897,11 +5004,26 @@ import { ZlForm } from '@zl-ui-kit/components'
|
|
|
4897
5004
|
|
|
4898
5005
|
**props**
|
|
4899
5006
|
|
|
4900
|
-
| 属性 | 类型
|
|
4901
|
-
| ---------------- |
|
|
4902
|
-
| `items` | `FormItem[]
|
|
4903
|
-
| `model` | `Record<string, any>`
|
|
4904
|
-
| `hideEmptyLabel` | `boolean`
|
|
5007
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
5008
|
+
| ---------------- | --------------------------------------- | ---------- | ---- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
5009
|
+
| `items` | `FormItem[]`<br>— 条目字段见下「items」 | `() => []` | 否 | `:items="items"` | 表单字段 schema，决定渲染哪些表单项 |
|
|
5010
|
+
| `model` | `Record<string, any>` | — | 否 | `:model="{}"` | 表单值对象，不传时由组件内部自建 |
|
|
5011
|
+
| `hideEmptyLabel` | `boolean` | — | 否 | `hide-empty-label` | 表单项 `label` 为空字符串/缺省时不渲染 label 占位（控件直接顶到最左）。 默认 false：即使 label 为空，EP 也会因 #label 插槽存在而保留 label 列占位 |
|
|
5012
|
+
|
|
5013
|
+
**`items` 条目字段（`FormItem`）**
|
|
5014
|
+
|
|
5015
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
5016
|
+
| --------------- | ---------------------------------------------------------------------- | ---- | --------------------------------------------------- |
|
|
5017
|
+
| `model` | `string` | 是 | 字段名（必填） |
|
|
5018
|
+
| `label` | `string` | 否 | 标签文案（缺省用 model） |
|
|
5019
|
+
| `component` | `string \| any` | 否 | 动态组件名/组件对象（如 'el-input'、ElSelect） |
|
|
5020
|
+
| `props` | `Record<string, any>` | 否 | 组件 props（自动包装 update:modelValue 回写 model） |
|
|
5021
|
+
| `slots` | `Record<string, any>` | 否 | 组件插槽 |
|
|
5022
|
+
| `defaultValue` | `any` | 否 | 默认值 |
|
|
5023
|
+
| `slot` | `boolean` | 否 | 是否启用具名插槽（#model）自定义渲染 |
|
|
5024
|
+
| `formItemProps` | `Record<string, any>` | 否 | el-form-item 其余属性（rules 等） |
|
|
5025
|
+
| `tooltip` | `string` | 否 | 标签旁的问号提示文案 |
|
|
5026
|
+
| `visible` | `boolean \| ((model: Record<string, any>, item: FormItem) => boolean)` | 否 | 显隐控制：布尔值或判定函数 |
|
|
4905
5027
|
|
|
4906
5028
|
> 暴露对象是 `Proxy`：下表为显式实现的能力，**未列出的键会运行时下钻到内部实例**（不建议依赖，请用上表的实例 getter 取原生对象）
|
|
4907
5029
|
> 把 `$attrs` 透传给 `el-form`，未列出的属性会继续下传
|
|
@@ -5036,7 +5158,7 @@ import { ZlGrid } from '@zl-ui-kit/components'
|
|
|
5036
5158
|
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
5037
5159
|
| --------------- | ----------------------------------------------------------------- | ------------ | ---- | --------------------------- | ------------------------------------------------------------- |
|
|
5038
5160
|
| `data` | `Record<string, any>` | `() => ({})` | 否 | `:data="{}"` | 数据源对象，每项按 key 或 getValue 取值 |
|
|
5039
|
-
| `grid` | `IGridItem[]
|
|
5161
|
+
| `grid` | `IGridItem[]`<br>— 条目字段见下「grid」 | `() => []` | 否 | `:grid="grid"` | 描述项 schema：决定展示哪些字段与顺序 |
|
|
5040
5162
|
| `cols` | `number` | `3` | 否 | `:cols="1"` | 每行显示的描述项列数，默认 3 |
|
|
5041
5163
|
| `border` | `boolean` | — | 否 | `border` | 是否显示边框，呈表格式的网格线 |
|
|
5042
5164
|
| `emptyChecker` | `(value: any, key: string, data: Record<string, any>) => boolean` | — | 否 | `:empty-checker="() => {}"` | 自定义空值判定；默认 0 以外的假值都算空 |
|
|
@@ -5045,6 +5167,19 @@ import { ZlGrid } from '@zl-ui-kit/components'
|
|
|
5045
5167
|
| `labelPosition` | `'left' \| 'top' \| 'right'` | `'left'` | 否 | `label-position="left"` | 标签位置；top 时标签与值上下堆叠 |
|
|
5046
5168
|
| `emptyText` | `string` | — | 否 | `empty-text="暂无数据"` | 空值占位文案（缺省走 i18n zl.grid.empty，未接入时兜底"暂无"） |
|
|
5047
5169
|
|
|
5170
|
+
**`grid` 条目字段（`IGridItem`）**
|
|
5171
|
+
|
|
5172
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
5173
|
+
| ---------- | ---------------------------------------------------------------------------------- | ---- | ---------------------------------------------------------------------------- |
|
|
5174
|
+
| `label` | `string` | 是 | 字段标签 |
|
|
5175
|
+
| `key` | `string` | 是 | 取值字段名（同时作为插槽名 `#key`） |
|
|
5176
|
+
| `size` | `number \| 'auto'` | 否 | 跨列数（'auto' 占满剩余列） |
|
|
5177
|
+
| `getValue` | `(data: Record<string, any>, key: string, item: IGridItem) => any` | 否 | 自定义取值（缺省按 key 从 data 取） |
|
|
5178
|
+
| `visible` | `boolean \| ((value: unknown, key: string, data: Record<string, any>) => boolean)` | 否 | 显隐判定 |
|
|
5179
|
+
| `dict` | `string \| { dictKey: string; simple?: boolean; showType?: boolean }` | 否 | 字典：字典 key，或 `{ dictKey, simple, showType }` 配置（走 ZlDictTag 翻译） |
|
|
5180
|
+
| `slot` | `boolean` | 否 | 是否启用具名插槽（#key）渲染 |
|
|
5181
|
+
| `ellipsis` | `number \| boolean` | 否 | 溢出省略行数（悬浮提示） |
|
|
5182
|
+
|
|
5048
5183
|
**插槽（slots）**
|
|
5049
5184
|
|
|
5050
5185
|
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
@@ -5084,12 +5219,23 @@ import { ZlHorizontalTable } from '@zl-ui-kit/components'
|
|
|
5084
5219
|
|
|
5085
5220
|
**props**
|
|
5086
5221
|
|
|
5087
|
-
| 属性 | 类型
|
|
5088
|
-
| ------------ |
|
|
5089
|
-
| `items` | `HorizontalTableItem[]
|
|
5090
|
-
| `span` | `number \| string`
|
|
5091
|
-
| `labelWidth` | `string`
|
|
5092
|
-
| `labelAlign` | `string`
|
|
5222
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
5223
|
+
| ------------ | -------------------------------------------------- | ---------- | ---- | --------------------- | --------------------------------------------- |
|
|
5224
|
+
| `items` | `HorizontalTableItem[]`<br>— 条目字段见下「items」 | `() => []` | 否 | `:items="items"` | 单元格配置列表：标签、取值与跨列 |
|
|
5225
|
+
| `span` | `number \| string` | `24` | 否 | `:span="span"` | 统一的栅格跨度，默认 24（可被单项 span 覆盖） |
|
|
5226
|
+
| `labelWidth` | `string` | `'88px'` | 否 | `label-width="100px"` | 标签单元格宽度，默认 88px |
|
|
5227
|
+
| `labelAlign` | `string` | `'center'` | 否 | `label-align="left"` | 标签文案的水平对齐方式，默认居中 |
|
|
5228
|
+
|
|
5229
|
+
**`items` 条目字段（`HorizontalTableItem`）**
|
|
5230
|
+
|
|
5231
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
5232
|
+
| ------------ | --------- | ---- | -------------------------- |
|
|
5233
|
+
| `label` | `string` | 是 | — |
|
|
5234
|
+
| `value` | `any` | 否 | — |
|
|
5235
|
+
| `span` | `number` | 否 | 栅格跨度（24 栅格） |
|
|
5236
|
+
| `slot` | `string` | 否 | 具名插槽名（渲染自定义值） |
|
|
5237
|
+
| `tooltip` | `boolean` | 否 | 值过长时悬浮提示 |
|
|
5238
|
+
| `noEllipsis` | `boolean` | 否 | 关闭省略 |
|
|
5093
5239
|
|
|
5094
5240
|
**插槽（slots）**
|
|
5095
5241
|
|
|
@@ -5555,11 +5701,20 @@ import { ZlRadioTag } from '@zl-ui-kit/components'
|
|
|
5555
5701
|
|
|
5556
5702
|
**props**
|
|
5557
5703
|
|
|
5558
|
-
| 属性 | 类型
|
|
5559
|
-
| ------------ |
|
|
5560
|
-
| `modelValue` | `string \| number \| undefined`
|
|
5561
|
-
| `options` | `RadioTagOption[]
|
|
5562
|
-
| `size` | `'mini' \| 'small' \| 'medium'`
|
|
5704
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
5705
|
+
| ------------ | ----------------------------------------------- | ---------- | ---- | -------------------- | -------------------------------- |
|
|
5706
|
+
| `modelValue` | `string \| number \| undefined` | — | 否 | `v-model="value"` | 选中项的 value，`v-model` 绑定 |
|
|
5707
|
+
| `options` | `RadioTagOption[]`<br>— 条目字段见下「options」 | `() => []` | 否 | `:options="options"` | 标签选项列表，`value` 作为选中值 |
|
|
5708
|
+
| `size` | `'mini' \| 'small' \| 'medium'` | `'small'` | 否 | `size="mini"` | 标签尺寸，默认 small |
|
|
5709
|
+
|
|
5710
|
+
**`options` 条目字段（`RadioTagOption`）**
|
|
5711
|
+
|
|
5712
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
5713
|
+
| ---------- | ------------------ | ---- | ---- |
|
|
5714
|
+
| `label` | `string` | 是 | — |
|
|
5715
|
+
| `value` | `string \| number` | 是 | — |
|
|
5716
|
+
| `icon` | `string` | 否 | — |
|
|
5717
|
+
| `disabled` | `boolean` | 否 | — |
|
|
5563
5718
|
|
|
5564
5719
|
**事件（emits）**
|
|
5565
5720
|
|
|
@@ -5608,15 +5763,32 @@ import { ZlSearch } from '@zl-ui-kit/components'
|
|
|
5608
5763
|
|
|
5609
5764
|
**props**
|
|
5610
5765
|
|
|
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`
|
|
5766
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
5767
|
+
| ---------------- | ----------------------------------------- | ----------- | ---- | -------------------- | -------------------------------------------------------------------------------------------- |
|
|
5768
|
+
| `items` | `SearchItem[]`<br>— 条目字段见下「items」 | `() => []` | 否 | `:items="items"` | 查询项定义（SearchItem[]），按数组顺序排列 |
|
|
5769
|
+
| `model` | `Record<string, any>` | — | 否 | `:model="{}"` | 表单数据。传入时组件直接读写该对象（受控）； 不传则用内部副本，`params` / 标签行仍可正常工作 |
|
|
5770
|
+
| `immediate` | `boolean` | `true` | 否 | `:immediate="false"` | 挂载后立即执行一次查询（默认 true） |
|
|
5771
|
+
| `disabled` | `boolean` | `false` | 否 | `disabled` | 禁用全部查询项 |
|
|
5772
|
+
| `labelsVisible` | `boolean` | `undefined` | 否 | `labels-visible` | 是否展示「筛选条件」标签行；不传时按「是否发生溢出」自动判定 |
|
|
5773
|
+
| `hideEmptyLabel` | `boolean` | `false` | 否 | `hide-empty-label` | 表单项 label 为空时是否不渲染 label 占位，透传给 ZlForm 的 hideEmptyLabel |
|
|
5774
|
+
| `showLabels` | `boolean` | `undefined` | 否 | `show-labels` | 已废弃，请用 `labelsVisible` |
|
|
5775
|
+
|
|
5776
|
+
**`items` 条目字段（`SearchItem`）**
|
|
5777
|
+
|
|
5778
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
5779
|
+
| --------------- | ---------------------------------------------------------------------- | ---- | --------------------------------------------------- |
|
|
5780
|
+
| `model` | `string` | 是 | 字段名（必填） |
|
|
5781
|
+
| `label` | `string` | 否 | 标签文案（缺省用 model） |
|
|
5782
|
+
| `component` | `string \| any` | 否 | 动态组件名/组件对象（如 'el-input'、ElSelect） |
|
|
5783
|
+
| `props` | `Record<string, any>` | 否 | 组件 props（自动包装 update:modelValue 回写 model） |
|
|
5784
|
+
| `slots` | `Record<string, any>` | 否 | 组件插槽 |
|
|
5785
|
+
| `defaultValue` | `any` | 否 | 默认值 |
|
|
5786
|
+
| `slot` | `boolean` | 否 | 是否启用具名插槽（#model）自定义渲染 |
|
|
5787
|
+
| `formItemProps` | `Record<string, any>` | 否 | el-form-item 其余属性（rules 等） |
|
|
5788
|
+
| `tooltip` | `string` | 否 | 标签旁的问号提示文案 |
|
|
5789
|
+
| `visible` | `boolean \| ((model: Record<string, any>, item: FormItem) => boolean)` | 否 | 显隐控制：布尔值或判定函数 |
|
|
5790
|
+
| `toLabel` | `(value: any) => any` | 否 | 值 → 条件标签文本 |
|
|
5791
|
+
| `toParams` | `(value: any, acc: Record<string, any>) => Record<string, any>` | 否 | 值 → 查询参数（返回对象合并入 params） |
|
|
5620
5792
|
|
|
5621
5793
|
**事件（emits）**
|
|
5622
5794
|
|
|
@@ -5685,11 +5857,41 @@ import { ZlSearchTable } from '@zl-ui-kit/components'
|
|
|
5685
5857
|
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------- | ---------- | ---- | --------------------------- | ------------------------------------------------------------------------------------ |
|
|
5686
5858
|
| `immediate` | `boolean` | `true` | 否 | `:immediate="false"` | 挂载后立即请求首屏数据，默认 true |
|
|
5687
5859
|
| `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[]
|
|
5860
|
+
| `columns` | `TableColumn[]`<br>— 条目字段见下「columns」 | `() => []` | 否 | `:columns="columns"` | 表格列定义，决定有哪些列及其渲染方式 |
|
|
5861
|
+
| `queryItems` | `SearchItem[]`<br>— 条目字段见下「queryItems」 | `() => []` | 否 | `:query-items="queryItems"` | 查询区的表单项；为空且不传 search-actions 插槽时不渲染查询条 |
|
|
5690
5862
|
| `pagination` | `Record<string, any> \| boolean` | — | 否 | `:pagination="{}"` | 分页配置；传 false 关闭分页 |
|
|
5691
5863
|
| `hideEmptyLabel` | `boolean` | `false` | 否 | `hide-empty-label` | 查询项 label 为空时是否不渲染 label 占位，透传给 ZlSearch / ZlForm 的 hideEmptyLabel |
|
|
5692
5864
|
|
|
5865
|
+
**`columns` 条目字段（`TableColumn`）**
|
|
5866
|
+
|
|
5867
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
5868
|
+
| ------------- | --------------------- | ---- | -------------------------------------------------- |
|
|
5869
|
+
| `label` | `string` | 否 | 列标题（优先于 title） |
|
|
5870
|
+
| `title` | `string` | 否 | 列标题（兼容 arco/antd 写法，label 缺省时生效） |
|
|
5871
|
+
| `prop` | `string` | 否 | 取值字段名（优先于 dataIndex） |
|
|
5872
|
+
| `dataIndex` | `string` | 否 | 取值字段名（兼容 arco/antd 写法，prop 缺省时生效） |
|
|
5873
|
+
| `slot` | `string \| boolean` | 否 | 单元格插槽名（缺省用 prop） |
|
|
5874
|
+
| `columnSlot` | `boolean` | 否 | 启用表头插槽（header-{prop}） |
|
|
5875
|
+
| `actions` | `ActionItem[]` | 否 | 操作列（渲染 ZlActionList） |
|
|
5876
|
+
| `actionProps` | `Record<string, any>` | 否 | 透传给操作列 ZlActionList 的 props |
|
|
5877
|
+
|
|
5878
|
+
**`queryItems` 条目字段（`SearchItem`）**
|
|
5879
|
+
|
|
5880
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
5881
|
+
| --------------- | ---------------------------------------------------------------------- | ---- | --------------------------------------------------- |
|
|
5882
|
+
| `model` | `string` | 是 | 字段名（必填） |
|
|
5883
|
+
| `label` | `string` | 否 | 标签文案（缺省用 model） |
|
|
5884
|
+
| `component` | `string \| any` | 否 | 动态组件名/组件对象（如 'el-input'、ElSelect） |
|
|
5885
|
+
| `props` | `Record<string, any>` | 否 | 组件 props（自动包装 update:modelValue 回写 model） |
|
|
5886
|
+
| `slots` | `Record<string, any>` | 否 | 组件插槽 |
|
|
5887
|
+
| `defaultValue` | `any` | 否 | 默认值 |
|
|
5888
|
+
| `slot` | `boolean` | 否 | 是否启用具名插槽（#model）自定义渲染 |
|
|
5889
|
+
| `formItemProps` | `Record<string, any>` | 否 | el-form-item 其余属性（rules 等） |
|
|
5890
|
+
| `tooltip` | `string` | 否 | 标签旁的问号提示文案 |
|
|
5891
|
+
| `visible` | `boolean \| ((model: Record<string, any>, item: FormItem) => boolean)` | 否 | 显隐控制：布尔值或判定函数 |
|
|
5892
|
+
| `toLabel` | `(value: any) => any` | 否 | 值 → 条件标签文本 |
|
|
5893
|
+
| `toParams` | `(value: any, acc: Record<string, any>) => Record<string, any>` | 否 | 值 → 查询参数（返回对象合并入 params） |
|
|
5894
|
+
|
|
5693
5895
|
> 把 `$attrs` 透传给 `ZlTable`，未列出的属性会继续下传
|
|
5694
5896
|
|
|
5695
5897
|
**事件（emits）**
|
|
@@ -5836,10 +6038,17 @@ import { ZlSorterList } from '@zl-ui-kit/components'
|
|
|
5836
6038
|
|
|
5837
6039
|
**props**
|
|
5838
6040
|
|
|
5839
|
-
| 属性 | 类型
|
|
5840
|
-
| ---------- |
|
|
5841
|
-
| `sorters` | `SorterItem[]
|
|
5842
|
-
| `multiple` | `boolean`
|
|
6041
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
6042
|
+
| ---------- | ------------------------------------------- | ---------- | ---- | -------------------- | ---------------------------------------------- |
|
|
6043
|
+
| `sorters` | `SorterItem[]`<br>— 条目字段见下「sorters」 | `() => []` | 否 | `:sorters="sorters"` | 可排序字段列表，model 为字段名 |
|
|
6044
|
+
| `multiple` | `boolean` | `false` | 否 | `multiple` | 允许多字段同时排序；关闭时只保留最后点击的字段 |
|
|
6045
|
+
|
|
6046
|
+
**`sorters` 条目字段（`SorterItem`）**
|
|
6047
|
+
|
|
6048
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
6049
|
+
| ------- | -------- | ---- | ---- |
|
|
6050
|
+
| `label` | `string` | 否 | — |
|
|
6051
|
+
| `model` | `string` | 是 | — |
|
|
5843
6052
|
|
|
5844
6053
|
**事件（emits）**
|
|
5845
6054
|
|
|
@@ -5885,7 +6094,7 @@ import { ZlStep } from '@zl-ui-kit/components'
|
|
|
5885
6094
|
|
|
5886
6095
|
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
5887
6096
|
| --------------------- | --------------------------------------------------------- | -------------- | ---- | ---------------------------- | ------------------------------------------------------- |
|
|
5888
|
-
| `steps` | `StepItem[]
|
|
6097
|
+
| `steps` | `StepItem[]`<br>— 条目字段见下「steps」 | `() => []` | 否 | `:steps="steps"` | 步骤列表，决定步骤数量、顺序与内容 |
|
|
5889
6098
|
| `current` | `number` | `0` | 否 | `:current="1"` | 当前步骤下标（从 0 开始） |
|
|
5890
6099
|
| `direction` | `'horizontal' \| 'vertical'` | `'horizontal'` | 否 | `direction="horizontal"` | 排列方向：横向或纵向 |
|
|
5891
6100
|
| `processStatus` | `'process' \| 'finish' \| 'error'` | `'process'` | 否 | `process-status="process"` | 当前步骤呈现的状态 |
|
|
@@ -5896,6 +6105,16 @@ import { ZlStep } from '@zl-ui-kit/components'
|
|
|
5896
6105
|
| `titleFontSize` | `number` | — | 否 | `:title-font-size="1"` | 标题字号（px） |
|
|
5897
6106
|
| `descriptionFontSize` | `number` | — | 否 | `:description-font-size="1"` | 描述字号（px） |
|
|
5898
6107
|
|
|
6108
|
+
**`steps` 条目字段（`StepItem`）**
|
|
6109
|
+
|
|
6110
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
6111
|
+
| ------------- | --------------------------------------------------------- | ---- | -------------------------------------------------------------------------- |
|
|
6112
|
+
| `title` | `string` | 否 | 步骤标题；可用 title 插槽覆盖 |
|
|
6113
|
+
| `description` | `string` | 否 | 步骤描述；可用 description 插槽覆盖 |
|
|
6114
|
+
| `icon` | `string` | 否 | 步骤图标（图标名字符串，经 ZlIcon 渲染）；可用 icon 插槽覆盖 |
|
|
6115
|
+
| `status` | `'wait' \| 'process' \| 'finish' \| 'error' \| 'success'` | 否 | 该步骤状态；缺省由 current 自动推算（finish/process/wait），显式指定则覆盖 |
|
|
6116
|
+
| `disabled` | `boolean` | 否 | 是否禁用该步骤 |
|
|
6117
|
+
|
|
5899
6118
|
**插槽（slots）**
|
|
5900
6119
|
|
|
5901
6120
|
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
@@ -6000,14 +6219,27 @@ import { ZlTable } from '@zl-ui-kit/components'
|
|
|
6000
6219
|
|
|
6001
6220
|
**props**
|
|
6002
6221
|
|
|
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`
|
|
6222
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
6223
|
+
| -------------- | -------------------------------------------- | -------- | ---- | -------------------- | ---------------------------------------------------------------------------- |
|
|
6224
|
+
| `columns` | `TableColumn[]`<br>— 条目字段见下「columns」 | — | 是 | `:columns="columns"` | 表格列配置，定义字段、标题与渲染方式 |
|
|
6225
|
+
| `data` | `any[] \| Record<string, any>` | — | 是 | `:data="data"` | 数组（本地数据）或 { [dataKey]: rows, pageNum, pageSize, total }（分页数据） |
|
|
6226
|
+
| `dataKey` | `string` | `'rows'` | 否 | `data-key="rows"` | 分页数据中的行数组字段名 |
|
|
6227
|
+
| `expandAction` | `boolean` | `false` | 否 | `expand-action` | actions 列宽加宽（参考实现 expandAction 语义） |
|
|
6228
|
+
| `pagination` | `Record<string, any> \| boolean` | — | 否 | `:pagination="{}"` | 分页配置，设为 false 时隐藏分页 |
|
|
6229
|
+
| `loading` | `boolean` | `false` | 否 | `loading` | 表格 loading（作用于表格区） |
|
|
6230
|
+
|
|
6231
|
+
**`columns` 条目字段（`TableColumn`）**
|
|
6232
|
+
|
|
6233
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
6234
|
+
| ------------- | --------------------- | ---- | -------------------------------------------------- |
|
|
6235
|
+
| `label` | `string` | 否 | 列标题（优先于 title） |
|
|
6236
|
+
| `title` | `string` | 否 | 列标题（兼容 arco/antd 写法，label 缺省时生效） |
|
|
6237
|
+
| `prop` | `string` | 否 | 取值字段名（优先于 dataIndex） |
|
|
6238
|
+
| `dataIndex` | `string` | 否 | 取值字段名（兼容 arco/antd 写法，prop 缺省时生效） |
|
|
6239
|
+
| `slot` | `string \| boolean` | 否 | 单元格插槽名（缺省用 prop） |
|
|
6240
|
+
| `columnSlot` | `boolean` | 否 | 启用表头插槽（header-{prop}） |
|
|
6241
|
+
| `actions` | `ActionItem[]` | 否 | 操作列（渲染 ZlActionList） |
|
|
6242
|
+
| `actionProps` | `Record<string, any>` | 否 | 透传给操作列 ZlActionList 的 props |
|
|
6011
6243
|
|
|
6012
6244
|
> 暴露对象是 `Proxy`：下表为显式实现的能力，**未列出的键会运行时下钻到内部实例**（不建议依赖，请用上表的实例 getter 取原生对象）
|
|
6013
6245
|
> 把 `$attrs` 透传给 `el-table`，未列出的属性会继续下传
|
|
@@ -6086,13 +6318,22 @@ import { ZlTabs } from '@zl-ui-kit/components'
|
|
|
6086
6318
|
|
|
6087
6319
|
**props**
|
|
6088
6320
|
|
|
6089
|
-
| 属性 | 类型
|
|
6090
|
-
| ------------ |
|
|
6091
|
-
| `tabs` | `
|
|
6092
|
-
| `modelValue` | `[String, Number]`
|
|
6093
|
-
| `border` | `boolean`
|
|
6094
|
-
| `fit` | `boolean`
|
|
6095
|
-
| `darkNav` | `boolean`
|
|
6321
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
6322
|
+
| ------------ | ------------------------------------- | ----------- | ---- | ------------------- | ------------------------------------------------------------------------- |
|
|
6323
|
+
| `tabs` | `TabItem[]`<br>— 条目字段见下「tabs」 | `() => []` | 否 | `:tabs="tabs"` | 页签配置列表，以 key 关联内容插槽 |
|
|
6324
|
+
| `modelValue` | `[String, Number]` | `undefined` | 否 | `v-model="value"` | 当前激活页签的 key，可用 v-model 双向绑定 |
|
|
6325
|
+
| `border` | `boolean` | `false` | 否 | `border` | 是否显示页签导航分隔线，默认不显示（需要导航下那条细线时显式传 `border`） |
|
|
6326
|
+
| `fit` | `boolean` | — | 否 | `fit` | 是否撑满容器并让内容区滚动 |
|
|
6327
|
+
| `darkNav` | `boolean` | `true` | 否 | `:dark-nav="false"` | 是否启用导航背景色（取主题卡片底色 `--zl-bg-2`，light 为白底），默认启用 |
|
|
6328
|
+
|
|
6329
|
+
**`tabs` 条目字段（`TabItem`）**
|
|
6330
|
+
|
|
6331
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
6332
|
+
| ---------- | --------- | ---- | -------------------------------------------------------------------------- |
|
|
6333
|
+
| `key` | `string` | 是 | 页签唯一键（必填），同时作为内容插槽名（`#<key>`）与 `el-tab-pane` 的 name |
|
|
6334
|
+
| `title` | `string` | 否 | 页签标题 |
|
|
6335
|
+
| `lazy` | `boolean` | 否 | 是否懒挂载，默认 true；与 arco 风 `lazyLoad` 二选一 |
|
|
6336
|
+
| `lazyLoad` | `boolean` | 否 | arco 风懒挂载开关（`lazy` 的别名，二选一） |
|
|
6096
6337
|
|
|
6097
6338
|
> 选项式组件（`defineComponent`），props 定义在 `props: {}` 中
|
|
6098
6339
|
> 把 `$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.7",
|
|
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/
|
|
43
|
-
"@zl-ui-kit/icons": "0.18.
|
|
44
|
-
"@zl-ui-kit/
|
|
42
|
+
"@zl-ui-kit/composables": "0.18.7",
|
|
43
|
+
"@zl-ui-kit/icons": "0.18.7",
|
|
44
|
+
"@zl-ui-kit/utils": "0.18.7"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"@vueuse/core": "^12.3.0 || ^13.0.0 || ^14.0.0 || ^15.0.0",
|
|
@@ -101,7 +101,7 @@
|
|
|
101
101
|
"@jichuang/eslint-config": "1.0.0",
|
|
102
102
|
"@jichuang/tsconfig": "1.0.0",
|
|
103
103
|
"@jichuang/vite-config": "1.0.0",
|
|
104
|
-
"@zl-ui-kit/theme": "0.18.
|
|
104
|
+
"@zl-ui-kit/theme": "0.18.7"
|
|
105
105
|
},
|
|
106
106
|
"repository": {
|
|
107
107
|
"type": "git",
|