@zl-ui-kit/components 0.8.0 → 0.8.2
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 +571 -423
- package/dist/components/ZlAction/List.vue.d.ts +5 -0
- package/dist/components/ZlAddSub/index.css +1 -1
- package/dist/components/ZlAddSub/index.vue.d.ts +1 -0
- package/dist/components/ZlAddSub/index.vue.mjs +2 -2
- package/dist/components/ZlAppLayout/index.vue.d.ts +2 -0
- package/dist/components/ZlAppLayout/index.vue.mjs +1 -0
- package/dist/components/ZlAppMenu/AppMenu.vue.d.ts +2 -0
- package/dist/components/ZlAppSlogan/index.vue.d.ts +3 -0
- package/dist/components/ZlAutoTooltip/index.css +1 -1
- package/dist/components/ZlAutoTooltip/index.vue.mjs +2 -2
- package/dist/components/ZlAvatar/Group.css +1 -1
- package/dist/components/ZlAvatar/Group.vue.d.ts +2 -0
- package/dist/components/ZlAvatar/Group.vue.mjs +2 -2
- package/dist/components/ZlAvatar/index.css +1 -1
- package/dist/components/ZlAvatar/index.vue.d.ts +2 -0
- package/dist/components/ZlAvatar/index.vue.mjs +2 -2
- package/dist/components/ZlCard/index.vue.d.ts +1 -0
- package/dist/components/ZlCardPage/index.vue.d.ts +10 -1
- package/dist/components/ZlCheckAll/index.css +1 -1
- package/dist/components/ZlCheckAll/index.vue.d.ts +2 -0
- package/dist/components/ZlCheckAll/index.vue.mjs +2 -2
- package/dist/components/ZlCheckboxTag/index.vue.d.ts +5 -0
- package/dist/components/ZlCopy/index.css +1 -1
- package/dist/components/ZlCopy/index.vue.d.ts +2 -0
- package/dist/components/ZlCopy/index.vue.mjs +2 -2
- package/dist/components/ZlDescription/index.vue.d.ts +4 -0
- package/dist/components/ZlDictTag/index.vue.d.ts +7 -1
- package/dist/components/ZlDrawer/index.vue.d.ts +5 -0
- package/dist/components/ZlDynamicComponent/index.vue.d.ts +6 -0
- package/dist/components/ZlDynamicComponent/index.vue.mjs +3 -0
- package/dist/components/ZlEditor/ZlSqlEditor.vue.d.ts +2 -0
- package/dist/components/ZlEditor/index.vue.d.ts +2 -0
- package/dist/components/ZlFilePreview/index.vue.d.ts +1 -0
- package/dist/components/ZlFileViewer/index.css +1 -1
- package/dist/components/ZlFileViewer/index.vue.d.ts +1 -0
- package/dist/components/ZlFileViewer/index.vue.mjs +2 -2
- package/dist/components/ZlForm/ZlFormChild.vue.d.ts +2 -0
- package/dist/components/ZlForm/ZlFormChild.vue.mjs +4 -1
- package/dist/components/ZlForm/index.vue.d.ts +2 -0
- package/dist/components/ZlGrid/ZlGridItem.vue.d.ts +1 -0
- package/dist/components/ZlGrid/index.vue.d.ts +8 -0
- package/dist/components/ZlHorizontalTable/index.css +1 -1
- package/dist/components/ZlHorizontalTable/index.vue.d.ts +4 -0
- package/dist/components/ZlHorizontalTable/index.vue.mjs +2 -2
- package/dist/components/ZlIcon/index.css +1 -1
- package/dist/components/ZlIcon/index.vue.mjs +2 -2
- package/dist/components/ZlLayoutSwitch/index.css +1 -1
- package/dist/components/ZlLayoutSwitch/index.vue.d.ts +1 -0
- package/dist/components/ZlLayoutSwitch/index.vue.mjs +2 -2
- package/dist/components/ZlLogin/components/LoginForm.css +1 -1
- package/dist/components/ZlLogin/components/LoginForm.vue.d.ts +1 -0
- package/dist/components/ZlLogin/components/LoginForm.vue.mjs +1 -1
- package/dist/components/ZlLogin/index.vue.d.ts +2 -0
- package/dist/components/ZlPdfViewer/index.vue.d.ts +2 -0
- package/dist/components/ZlPopconfirm/index.vue.d.ts +4 -0
- package/dist/components/ZlRadioTag/index.vue.d.ts +2 -0
- package/dist/components/ZlSearch/index.vue.d.ts +5 -1
- package/dist/components/ZlSearchTable/index.vue.d.ts +4 -0
- package/dist/components/ZlSection/index.vue.d.ts +1 -0
- package/dist/components/ZlSorter/ZlSorterList.css +1 -1
- package/dist/components/ZlSorter/ZlSorterList.vue.d.ts +2 -0
- package/dist/components/ZlSorter/ZlSorterList.vue.mjs +2 -2
- package/dist/components/ZlSorter/index.css +1 -1
- package/dist/components/ZlSorter/index.vue.d.ts +1 -0
- package/dist/components/ZlSorter/index.vue.mjs +1 -1
- package/dist/components/ZlSwitch/index.vue.d.ts +6 -0
- package/dist/components/ZlTable/index.vue.d.ts +6 -0
- package/dist/components/ZlTabs/index.vue.d.ts +8 -0
- package/dist/components/ZlTabs/index.vue.mjs +6 -0
- package/dist/components/ZlTag/ZlCornerTag.vue.d.ts +3 -0
- package/dist/components/ZlTag/index.vue.d.ts +30 -0
- package/dist/components/ZlTag/index.vue.mjs +15 -0
- package/dist/components/ZlText/index.css +1 -1
- package/dist/components/ZlText/index.vue.d.ts +1 -0
- package/dist/components/ZlText/index.vue.mjs +2 -2
- package/dist/components/ZlTitle/index.css +1 -1
- package/dist/components/ZlTitle/index.vue.d.ts +5 -0
- package/dist/components/ZlTitle/index.vue.mjs +2 -2
- package/dist/components/ZlTree/index.vue.d.ts +1 -0
- package/dist/components/ZlTreeSelect/index.css +1 -1
- package/dist/components/ZlTreeSelect/index.vue.d.ts +1 -0
- package/dist/components/ZlTreeSelect/index.vue.mjs +3 -3
- package/dist/components/ZlUpload/index.css +1 -1
- package/dist/components/ZlUpload/index.vue.d.ts +5 -2
- package/dist/components/ZlUpload/index.vue.mjs +2 -2
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -6,6 +6,84 @@ ZL UI 业务组件库 —— Element Plus 体系，`Zl` 前缀，47 个业务组
|
|
|
6
6
|
|
|
7
7
|
> 本文档即 UI 组件的**权威文档**，直接在本文件维护；npm 官网包页面渲染的就是它，改完随下一次发版对外生效。
|
|
8
8
|
|
|
9
|
+
## 目录
|
|
10
|
+
|
|
11
|
+
<!-- TOC:START -->
|
|
12
|
+
|
|
13
|
+
- [1. 简介与包结构](#1-简介与包结构)
|
|
14
|
+
- [1.1 在业务项目中安装（npm 发布版）](#11-在业务项目中安装npm-发布版)
|
|
15
|
+
- [1.2 宿主接入清单（从零到跑起来）](#12-宿主接入清单从零到跑起来)
|
|
16
|
+
- [2. 环境准备与运行示例](#2-环境准备与运行示例)
|
|
17
|
+
- [2.1 运行环境](#21-运行环境)
|
|
18
|
+
- [2.2 启动 playground（组件示例与联调）](#22-启动-playground组件示例与联调)
|
|
19
|
+
- [2.3 主题快速接入（宿主项目）](#23-主题快速接入宿主项目)
|
|
20
|
+
- [2.4 示例页面索引](#24-示例页面索引)
|
|
21
|
+
- [3. 组件总览（47 个业务组件）](#3-组件总览47-个业务组件)
|
|
22
|
+
- [3.1 通用展示组件](#31-通用展示组件)
|
|
23
|
+
- [3.2 数据型组件](#32-数据型组件)
|
|
24
|
+
- [3.3 表单与交互组件](#33-表单与交互组件)
|
|
25
|
+
- [3.4 布局与权限](#34-布局与权限)
|
|
26
|
+
- [3.5 文件与编辑](#35-文件与编辑)
|
|
27
|
+
- [3.6 国际化基础设施（独立于 47 个业务组件）](#36-国际化基础设施独立于-47-个业务组件)
|
|
28
|
+
- [3.7 内部子组件（不对外导出，随父组件使用）](#37-内部子组件不对外导出随父组件使用)
|
|
29
|
+
- [4. 图标组件 `ZlIcon`](#4-图标组件-zlicon)
|
|
30
|
+
- [4.1 必须先注册图标集（否则一个图标都不显示）](#41-必须先注册图标集否则一个图标都不显示)
|
|
31
|
+
- [5. 通用展示组件](#5-通用展示组件)
|
|
32
|
+
- [ZlTitle — 区块标题](#zltitle-区块标题)
|
|
33
|
+
- [ZlTag — 标签](#zltag-标签)
|
|
34
|
+
- [ZlCopy — 一键复制](#zlcopy-一键复制)
|
|
35
|
+
- [ZlEmpty — 空状态](#zlempty-空状态)
|
|
36
|
+
- [ZlDictTag — 字典标签](#zldicttag-字典标签)
|
|
37
|
+
- [ZlCard / ZlPagination — 卡片与分页的视觉约定](#zlcard-zlpagination-卡片与分页的视觉约定)
|
|
38
|
+
- [其余](#其余)
|
|
39
|
+
- [6. 数据型组件 + useRequest 体系（核心）](#6-数据型组件-userequest-体系核心)
|
|
40
|
+
- [6.1 useRequest 三件套](#61-userequest-三件套)
|
|
41
|
+
- [6.2 Mock 模块（playground 离线联调）](#62-mock-模块playground-离线联调)
|
|
42
|
+
- [6.3 组件对接实战（对应 `/use-request` 页面）](#63-组件对接实战对应-use-request-页面)
|
|
43
|
+
- [6.4 常见坑位](#64-常见坑位)
|
|
44
|
+
- [7. 表单与交互组件](#7-表单与交互组件)
|
|
45
|
+
- [ZlForm —— schema 驱动](#zlform-schema-驱动)
|
|
46
|
+
- [ZlSearch —— 查询条](#zlsearch-查询条)
|
|
47
|
+
- [ZlDrawer / ZlPopconfirm / ZlSwitch](#zldrawer-zlpopconfirm-zlswitch)
|
|
48
|
+
- [ZlAction / ZlActionList —— 操作列与操作列表](#zlaction-zlactionlist-操作列与操作列表)
|
|
49
|
+
- [ZlRadioTag / ZlCheckboxTag / ZlCheckAll / ZlSorter / ZlAddSub / ZlLayoutSwitch](#zlradiotag-zlcheckboxtag-zlcheckall-zlsorter-zladdsub-zllayoutswitch)
|
|
50
|
+
- [ZlTabs / ZlDynamicComponent / ZlGrid](#zltabs-zldynamiccomponent-zlgrid)
|
|
51
|
+
- [8. 布局与权限](#8-布局与权限)
|
|
52
|
+
- [ZlAppLayout / ZlAppMenu](#zlapplayout-zlappmenu)
|
|
53
|
+
- [ZlPermission](#zlpermission)
|
|
54
|
+
- [ZlHorizontalTable](#zlhorizontaltable)
|
|
55
|
+
- [9. 文件与编辑](#9-文件与编辑)
|
|
56
|
+
- [9.1 `ZlEditor`：monaco worker 配置与首屏治理](#91-zleditormonaco-worker-配置与首屏治理)
|
|
57
|
+
- [10. 主题定制（@zl-ui-kit/theme）](#10-主题定制zl-ui-kittheme)
|
|
58
|
+
- [L1 变量直覆（小幅微调）](#l1-变量直覆小幅微调)
|
|
59
|
+
- [L2 运行时定义主题（换肤/多租户推荐）](#l2-运行时定义主题换肤多租户推荐)
|
|
60
|
+
- [变量速查（改样式时最常用）](#变量速查改样式时最常用)
|
|
61
|
+
- [主题状态与 `useGlobalData().theme` 的关系（容易踩）](#主题状态与-useglobaldatatheme-的关系容易踩)
|
|
62
|
+
- [换肤不生效？按这个顺序查](#换肤不生效按这个顺序查)
|
|
63
|
+
- [L3 构建时生成主题（深度定制，规划中）](#l3-构建时生成主题深度定制规划中)
|
|
64
|
+
- [SCSS 工具（编译期定制）](#scss-工具编译期定制)
|
|
65
|
+
- [11. 调试与常见问题](#11-调试与常见问题)
|
|
66
|
+
- [各包常用命令](#各包常用命令)
|
|
67
|
+
- [文档维护位置](#文档维护位置)
|
|
68
|
+
- [常见问题](#常见问题)
|
|
69
|
+
- [12. 公共 Hooks 与 Utils 方法](#12-公共-hooks-与-utils-方法)
|
|
70
|
+
- [12.1 `@zl-ui-kit/composables` —— 公共 Hooks](#121-zl-ui-kitcomposables-公共-hooks)
|
|
71
|
+
- [12.2 `@zl-ui-kit/utils` —— 工具方法](#122-zl-ui-kitutils-工具方法)
|
|
72
|
+
- [13. 国际化接入（i18n）](#13-国际化接入i18n)
|
|
73
|
+
- [13.1 三层结构](#131-三层结构)
|
|
74
|
+
- [13.2 宿主接入（main.ts，推荐 `createZlI18n`）](#132-宿主接入maints推荐-createzli18n)
|
|
75
|
+
- [13.3 根容器挂载（App.vue）](#133-根容器挂载appvue)
|
|
76
|
+
- [13.4 组件内渐进式翻译 `useZlT`](#134-组件内渐进式翻译-usezlt)
|
|
77
|
+
- [13.5 useLocale 注册修复说明](#135-uselocale-注册修复说明)
|
|
78
|
+
- [13.6 消费者定制 i18n（与主题对齐）](#136-消费者定制-i18n与主题对齐)
|
|
79
|
+
- [14. 组件 API 参考（自动生成）](#14-组件-api-参考自动生成)
|
|
80
|
+
- [组件索引](#组件索引)
|
|
81
|
+
- [14.1 主入口组件（`@zl-ui-kit/components`）](#141-主入口组件zl-ui-kitcomponents)
|
|
82
|
+
- [14.2 子路径入口组件（重型依赖，需单独安装）](#142-子路径入口组件重型依赖需单独安装)
|
|
83
|
+
- [14.3 公共类型声明（schema 用）](#143-公共类型声明schema-用)
|
|
84
|
+
|
|
85
|
+
<!-- TOC:END -->
|
|
86
|
+
|
|
9
87
|
---
|
|
10
88
|
|
|
11
89
|
## 1. 简介与包结构
|
|
@@ -345,7 +423,7 @@ setTheme('dark') // 切换主题（light/dark/red-light/red-dark/blue）
|
|
|
345
423
|
|
|
346
424
|
### 3.1 通用展示组件
|
|
347
425
|
|
|
348
|
-
`ZlIcon` · `ZlTitle` · `ZlTag` · `ZlCornerTag` · `ZlText` · `ZlCopy` · `ZlAutoTooltip` · `ZlEmpty` · `ZlDictTag` · `ZlDescription` · `ZlSection` · `ZlCard` · `ZlAvatar` · `ZlAppSlogan` · `ZlIconLabel` · `ZlIconHover`
|
|
426
|
+
`ZlIcon` · `ZlTitle` · `ZlTag` · `ZlCornerTag` · `ZlText` · `ZlCopy` · `ZlAutoTooltip` · `ZlEmpty` · `ZlDictTag` · `ZlDescription` · `ZlSection` · `ZlCard` · `ZlAvatar` · `ZlAvatarGroup` · `ZlAppSlogan` · `ZlIconLabel` · `ZlIconHover`
|
|
349
427
|
|
|
350
428
|
### 3.2 数据型组件
|
|
351
429
|
|
|
@@ -353,15 +431,15 @@ setTheme('dark') // 切换主题（light/dark/red-light/red-dark/blue）
|
|
|
353
431
|
|
|
354
432
|
### 3.3 表单与交互组件
|
|
355
433
|
|
|
356
|
-
`ZlForm` · `ZlSearch` · `ZlDrawer` · `ZlPopconfirm` · `ZlSwitch` · `ZlAction` · `ZlActionList` · `ZlRadioTag` · `ZlCheckboxTag` · `ZlCheckAll` · `ZlSorter` · `ZlAddSub` · `ZlLayoutSwitch` · `ZlTabs` · `ZlDynamicComponent` · `ZlGrid`
|
|
434
|
+
`ZlForm` · `ZlFormChild` · `ZlSearch` · `ZlDrawer` · `ZlPopconfirm` · `ZlSwitch` · `ZlAction` · `ZlActionList` · `ZlRadioTag` · `ZlCheckboxTag` · `ZlCheckAll` · `ZlSorter` · `ZlSorterList` · `ZlAddSub` · `ZlLayoutSwitch` · `ZlTabs` · `ZlDynamicComponent` · `ZlGrid` · `ZlGridItem`
|
|
357
435
|
|
|
358
436
|
### 3.4 布局与权限
|
|
359
437
|
|
|
360
|
-
`ZlAppLayout` · `ZlAppMenu` · `ZlPermission` · `ZlHorizontalTable`
|
|
438
|
+
`ZlAppLayout` · `ZlHorizontalLayout` · `ZlVerticalLayout` · `ZlAppMenu` · `ZlAppMenuItem` · `ZlPermission` · `ZlHorizontalTable`
|
|
361
439
|
|
|
362
440
|
### 3.5 文件与编辑
|
|
363
441
|
|
|
364
|
-
`ZlFilePreview` · `ZlFileViewer` · `ZlPdfViewer` · `ZlEditor` · `ZlSqlEditor` · `ZlLogin`
|
|
442
|
+
`ZlFilePreview` · `ZlFileFetchError` · `ZlFileViewer` · `ZlPdfViewer` · `ZlEditor` · `ZlSqlEditor` · `ZlLogin`
|
|
365
443
|
|
|
366
444
|
> 页签/微前端类组件（`ZlMicroPage`/`ZlAppTabs`/`ZlPageTabs`/`ZlDevMenu`）与配套 composables（`usePageTabs` 等）均已移除，`0.5.0` 起组件库不含任何微前端能力。
|
|
367
445
|
|
|
@@ -369,6 +447,70 @@ setTheme('dark') // 切换主题（light/dark/red-light/red-dark/blue）
|
|
|
369
447
|
|
|
370
448
|
`ZlI18nProvider` —— 国际化根容器，将 Element Plus 语言包经 `<el-config-provider>` 挂载到 Element Plus（详见第 13 章）。
|
|
371
449
|
|
|
450
|
+
### 3.7 内部子组件（不对外导出，随父组件使用）
|
|
451
|
+
|
|
452
|
+
下面 4 个组件被父组件内部递归/分发渲染，主入口**不导出**，因此不在 §14 的自动生成范围里。
|
|
453
|
+
这里单独给出 props 与插槽的可粘贴示例。
|
|
454
|
+
|
|
455
|
+
#### `ZlAppMenuItem` —— 菜单项（供 `ZlAppMenu` 递归渲染）
|
|
456
|
+
|
|
457
|
+
| prop | 类型 | 必填 | 示例 |
|
|
458
|
+
| ------ | ---------- | ---- | ---------------------------------------------------------- |
|
|
459
|
+
| `menu` | `MenuItem` | 是 | `:menu="{ name: 'home', title: '首页', icon: 'zl:home' }"` |
|
|
460
|
+
|
|
461
|
+
| 事件 | 说明 | 示例 |
|
|
462
|
+
| ----------------- | -------------------- | ----------------------------------------------------- |
|
|
463
|
+
| `menu-item-click` | 点击叶子菜单项时触发 | `@menu-item-click="(menu) => router.push(menu.name)"` |
|
|
464
|
+
|
|
465
|
+
`menu.children` 非空时渲染 `el-sub-menu` 并递归自身，否则渲染 `el-menu-item`。日常不需要手写——
|
|
466
|
+
把 `menus` 传给 `ZlAppMenu` 即可（见 §8）。
|
|
467
|
+
|
|
468
|
+
#### `ZlHorizontalLayout` / `ZlVerticalLayout` —— 布局形态（供 `ZlAppLayout` 分发）
|
|
469
|
+
|
|
470
|
+
由 `ZlAppLayout` 的 `horizontal` 布尔值二选一渲染，不单独使用。插槽用法（写在 `ZlAppLayout` 标签内）：
|
|
471
|
+
|
|
472
|
+
```vue
|
|
473
|
+
<ZlAppLayout :menus="menus" :horizontal="true">
|
|
474
|
+
<template #logo>
|
|
475
|
+
<img src="/logo.svg" />
|
|
476
|
+
</template>
|
|
477
|
+
<template #menu>
|
|
478
|
+
<!-- horizontal 形态下自行放菜单 -->
|
|
479
|
+
</template>
|
|
480
|
+
<template #breadcrumb>
|
|
481
|
+
<el-breadcrumb />
|
|
482
|
+
</template>
|
|
483
|
+
<template #header>
|
|
484
|
+
<span>顶部操作区</span>
|
|
485
|
+
</template>
|
|
486
|
+
<!-- 默认插槽：页面主体 -->
|
|
487
|
+
<RouterView />
|
|
488
|
+
</ZlAppLayout>
|
|
489
|
+
```
|
|
490
|
+
|
|
491
|
+
| 插槽 | 适用形态 | 作用域 | 示例 |
|
|
492
|
+
| ------------ | ----------- | --------------------------- | --------------------------------- |
|
|
493
|
+
| `logo` | 两者 | vertical 传 `{ collapsed }` | `<template #logo>` |
|
|
494
|
+
| `menu` | 两者 | vertical 传 `{ collapsed }` | `<template #menu>` |
|
|
495
|
+
| `header` | 两者 | — | `<template #header>` |
|
|
496
|
+
| `breadcrumb` | 两者 | — | `<template #breadcrumb>` |
|
|
497
|
+
| `footer` | 仅 vertical | — | `<template #footer>` |
|
|
498
|
+
| `default` | 两者 | — | 直接写页面内容（不写 `#default`） |
|
|
499
|
+
|
|
500
|
+
vertical 形态的 `logo` / `menu` 插槽会收到 `{ collapsed }`，可据此在折叠态隐藏文字：
|
|
501
|
+
|
|
502
|
+
```vue
|
|
503
|
+
<template #logo="{ collapsed }">
|
|
504
|
+
<img src="/logo.svg" />
|
|
505
|
+
<span v-if="!collapsed">数据空间</span>
|
|
506
|
+
</template>
|
|
507
|
+
```
|
|
508
|
+
|
|
509
|
+
#### `ZlFileFetchError` —— 文件获取失败占位（供 `ZlFilePreview` 内部渲染）
|
|
510
|
+
|
|
511
|
+
无 props、无插槽。文案走 i18n key `zl.filePreview.fetchError`（中文「文件获取失败」），
|
|
512
|
+
消费方可通过 `createZlI18n({ messages })` 覆盖（见第 13 章）。
|
|
513
|
+
|
|
372
514
|
---
|
|
373
515
|
|
|
374
516
|
## 4. 图标组件 `ZlIcon`
|
|
@@ -1458,66 +1600,64 @@ const { i18n } = useLocale({ messages })
|
|
|
1458
1600
|
|
|
1459
1601
|
### 组件索引
|
|
1460
1602
|
|
|
1461
|
-
| 组件
|
|
1462
|
-
|
|
|
1463
|
-
| `ZlAction`
|
|
1464
|
-
| `ZlActionList`
|
|
1465
|
-
| `ZlAddSub`
|
|
1466
|
-
| `ZlAppLayout`
|
|
1467
|
-
| `ZlAppMenu`
|
|
1468
|
-
| `ZlAppSlogan`
|
|
1469
|
-
| `ZlAutoTooltip`
|
|
1470
|
-
| `ZlAvatar`
|
|
1471
|
-
| `ZlAvatarGroup`
|
|
1472
|
-
| `ZlCard`
|
|
1473
|
-
| `ZlCardPage`
|
|
1474
|
-
| `ZlCheckAll`
|
|
1475
|
-
| `ZlCheckboxTag`
|
|
1476
|
-
| `ZlCopy`
|
|
1477
|
-
| `ZlDescription`
|
|
1478
|
-
| `ZlDictTag`
|
|
1479
|
-
| `ZlDrawer`
|
|
1480
|
-
| `ZlDynamicComponent` | 主入口 | 3 | 2 | 0 | 0 |
|
|
1481
|
-
| `ZlPdfViewer`
|
|
1482
|
-
| `ZlLogin`
|
|
1483
|
-
| `ZlLoginForm`
|
|
1484
|
-
| `ZlEmpty`
|
|
1485
|
-
| `ZlForm`
|
|
1486
|
-
| `ZlFormChild`
|
|
1487
|
-
| `ZlGridItem`
|
|
1488
|
-
| `ZlGrid`
|
|
1489
|
-
| `ZlHorizontalTable`
|
|
1490
|
-
| `ZlIcon`
|
|
1491
|
-
| `ZlI18nProvider`
|
|
1492
|
-
| `ZlIconHover`
|
|
1493
|
-
| `ZlIconLabel`
|
|
1494
|
-
| `ZlCornerTag`
|
|
1495
|
-
| `ZlLayoutSwitch`
|
|
1496
|
-
| `ZlPagination`
|
|
1497
|
-
| `ZlPermission`
|
|
1498
|
-
| `ZlPopconfirm`
|
|
1499
|
-
| `ZlRadioTag`
|
|
1500
|
-
| `ZlSearch`
|
|
1501
|
-
| `ZlSearchTable`
|
|
1502
|
-
| `ZlSection`
|
|
1503
|
-
| `ZlSorter`
|
|
1504
|
-
| `ZlSorterList`
|
|
1505
|
-
| `ZlSwitch`
|
|
1506
|
-
| `ZlTable`
|
|
1507
|
-
| `ZlTabs`
|
|
1508
|
-
| `ZlTag`
|
|
1509
|
-
| `ZlText`
|
|
1510
|
-
| `ZlTitle`
|
|
1511
|
-
| `ZlUpload`
|
|
1512
|
-
| `ZlTree`
|
|
1513
|
-
| `ZlTreeSelect`
|
|
1514
|
-
| `ZlChart`
|
|
1515
|
-
| `ZlEditor`
|
|
1516
|
-
| `ZlSqlEditor`
|
|
1517
|
-
| `ZlFilePreview`
|
|
1518
|
-
| `ZlFileViewer`
|
|
1519
|
-
|
|
1520
|
-
> 说明列为 `—` 表示该属性在源码里没写 `/** */` 注释（当前 134/194 个）；补完注释重跑 `pnpm docs:api` 即可同步。
|
|
1603
|
+
| 组件 | 入口 | props | 事件 | 插槽 | 暴露 |
|
|
1604
|
+
| ------------------------------------------- | ------------------- | ----- | ---- | ---- | ---- |
|
|
1605
|
+
| [`ZlAction`](#zlaction) | 主入口 | 0 | 0 | 0 | 0 |
|
|
1606
|
+
| [`ZlActionList`](#zlactionlist) | 主入口 | 6 | 1 | 1 | 0 |
|
|
1607
|
+
| [`ZlAddSub`](#zladdsub) | 主入口 | 2 | 1 | 1 | 0 |
|
|
1608
|
+
| [`ZlAppLayout`](#zlapplayout) | 主入口 | 1 | 0 | 1 | 0 |
|
|
1609
|
+
| [`ZlAppMenu`](#zlappmenu) | 主入口 | 3 | 1 | 0 | 0 |
|
|
1610
|
+
| [`ZlAppSlogan`](#zlappslogan) | 主入口 | 3 | 0 | 0 | 0 |
|
|
1611
|
+
| [`ZlAutoTooltip`](#zlautotooltip) | 主入口 | 0 | 0 | 1 | 0 |
|
|
1612
|
+
| [`ZlAvatar`](#zlavatar) | 主入口 | 3 | 0 | 0 | 0 |
|
|
1613
|
+
| [`ZlAvatarGroup`](#zlavatargroup) | 主入口 | 3 | 0 | 0 | 0 |
|
|
1614
|
+
| [`ZlCard`](#zlcard) | 主入口 | 1 | 0 | 8 | 0 |
|
|
1615
|
+
| [`ZlCardPage`](#zlcardpage) | 主入口 | 6 | 1 | 3 | 3 |
|
|
1616
|
+
| [`ZlCheckAll`](#zlcheckall) | 主入口 | 2 | 1 | 0 | 0 |
|
|
1617
|
+
| [`ZlCheckboxTag`](#zlcheckboxtag) | 主入口 | 7 | 1 | 1 | 0 |
|
|
1618
|
+
| [`ZlCopy`](#zlcopy) | 主入口 | 2 | 0 | 2 | 0 |
|
|
1619
|
+
| [`ZlDescription`](#zldescription) | 主入口 | 5 | 0 | 1 | 0 |
|
|
1620
|
+
| [`ZlDictTag`](#zldicttag) | 主入口 | 7 | 0 | 0 | 0 |
|
|
1621
|
+
| [`ZlDrawer`](#zldrawer) | 主入口 | 6 | 1 | 2 | 0 |
|
|
1622
|
+
| [`ZlDynamicComponent`](#zldynamiccomponent) | 主入口 | 3 | 2 | 0 | 0 |
|
|
1623
|
+
| [`ZlPdfViewer`](#zlpdfviewer) | 主入口 | 2 | 0 | 0 | 0 |
|
|
1624
|
+
| [`ZlLogin`](#zllogin) | 主入口 | 2 | 0 | 2 | 0 |
|
|
1625
|
+
| [`ZlLoginForm`](#zlloginform) | 主入口 | 1 | 0 | 1 | 0 |
|
|
1626
|
+
| [`ZlEmpty`](#zlempty) | 主入口 | 2 | 0 | 0 | 0 |
|
|
1627
|
+
| [`ZlForm`](#zlform) | 主入口 | 2 | 0 | 3 | 0 |
|
|
1628
|
+
| [`ZlFormChild`](#zlformchild) | 主入口 | 1 | 0 | 0 | 0 |
|
|
1629
|
+
| [`ZlGridItem`](#zlgriditem) | 主入口 | 1 | 0 | 1 | 0 |
|
|
1630
|
+
| [`ZlGrid`](#zlgrid) | 主入口 | 9 | 0 | 2 | 0 |
|
|
1631
|
+
| [`ZlHorizontalTable`](#zlhorizontaltable) | 主入口 | 4 | 0 | 1 | 0 |
|
|
1632
|
+
| [`ZlIcon`](#zlicon) | 主入口 | 1 | 0 | 1 | 0 |
|
|
1633
|
+
| [`ZlI18nProvider`](#zli18nprovider) | 主入口 | 0 | 0 | 1 | 0 |
|
|
1634
|
+
| [`ZlIconHover`](#zliconhover) | 主入口 | 0 | 0 | 0 | 0 |
|
|
1635
|
+
| [`ZlIconLabel`](#zliconlabel) | 主入口 | 1 | 1 | 1 | 0 |
|
|
1636
|
+
| [`ZlCornerTag`](#zlcornertag) | 主入口 | 3 | 0 | 1 | 0 |
|
|
1637
|
+
| [`ZlLayoutSwitch`](#zllayoutswitch) | 主入口 | 2 | 1 | 0 | 0 |
|
|
1638
|
+
| [`ZlPagination`](#zlpagination) | 主入口 | 4 | 3 | 0 | 0 |
|
|
1639
|
+
| [`ZlPermission`](#zlpermission) | 主入口 | 1 | 0 | 1 | 0 |
|
|
1640
|
+
| [`ZlPopconfirm`](#zlpopconfirm) | 主入口 | 4 | 2 | 3 | 0 |
|
|
1641
|
+
| [`ZlRadioTag`](#zlradiotag) | 主入口 | 3 | 1 | 1 | 0 |
|
|
1642
|
+
| [`ZlSearch`](#zlsearch) | 主入口 | 6 | 2 | 2 | 3 |
|
|
1643
|
+
| [`ZlSearchTable`](#zlsearchtable) | 主入口 | 5 | 1 | 3 | 4 |
|
|
1644
|
+
| [`ZlSection`](#zlsection) | 主入口 | 4 | 0 | 3 | 0 |
|
|
1645
|
+
| [`ZlSorter`](#zlsorter) | 主入口 | 2 | 2 | 1 | 0 |
|
|
1646
|
+
| [`ZlSorterList`](#zlsorterlist) | 主入口 | 2 | 1 | 0 | 0 |
|
|
1647
|
+
| [`ZlSwitch`](#zlswitch) | 主入口 | 6 | 1 | 2 | 0 |
|
|
1648
|
+
| [`ZlTable`](#zltable) | 主入口 | 6 | 3 | 3 | 0 |
|
|
1649
|
+
| [`ZlTabs`](#zltabs) | 主入口 | 4 | 0 | 3 | 0 |
|
|
1650
|
+
| [`ZlTag`](#zltag) | 主入口 | 15 | 4 | 1 | 0 |
|
|
1651
|
+
| [`ZlText`](#zltext) | 主入口 | 1 | 0 | 1 | 0 |
|
|
1652
|
+
| [`ZlTitle`](#zltitle) | 主入口 | 5 | 0 | 3 | 0 |
|
|
1653
|
+
| [`ZlUpload`](#zlupload) | 主入口 | 13 | 1 | 1 | 0 |
|
|
1654
|
+
| [`ZlTree`](#zltree) | 主入口 | 5 | 0 | 3 | 0 |
|
|
1655
|
+
| [`ZlTreeSelect`](#zltreeselect) | 主入口 | 6 | 1 | 0 | 0 |
|
|
1656
|
+
| [`ZlChart`](#zlchart) | 子入口 chart | 2 | 0 | 0 | 1 |
|
|
1657
|
+
| [`ZlEditor`](#zleditor) | 子入口 editor | 3 | 1 | 0 | 0 |
|
|
1658
|
+
| [`ZlSqlEditor`](#zlsqleditor) | 子入口 editor | 4 | 1 | 0 | 0 |
|
|
1659
|
+
| [`ZlFilePreview`](#zlfilepreview) | 子入口 file-preview | 1 | 0 | 0 | 0 |
|
|
1660
|
+
| [`ZlFileViewer`](#zlfileviewer) | 子入口 file-preview | 1 | 0 | 0 | 0 |
|
|
1521
1661
|
|
|
1522
1662
|
### 14.1 主入口组件（`@zl-ui-kit/components`）
|
|
1523
1663
|
|
|
@@ -1577,14 +1717,14 @@ import { ZlActionList } from '@zl-ui-kit/components'
|
|
|
1577
1717
|
|
|
1578
1718
|
**props**
|
|
1579
1719
|
|
|
1580
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
1581
|
-
| ------------- | -------------------------------- | ---------- | ---- | ----------------------- |
|
|
1582
|
-
| `actions` | `ActionItem[]` | `() => []` | 否 | `:actions="actions"` |
|
|
1583
|
-
| `actionArgs` | `any[]` | `() => []` | 否 | `:action-args="[]"` |
|
|
1584
|
-
| `visibleArgs` | `any[]` | `() => []` | 否 | `:visible-args="[]"` |
|
|
1585
|
-
| `listCount` | `number` | `2` | 否 | `:list-count="1"` | 直接展示的操作数，超出收入"更多"下拉
|
|
1586
|
-
| `iconMore` | `boolean \| Record<string, any>` | — | 否 | `:icon-more="iconMore"` |
|
|
1587
|
-
| `separator` | `boolean` | — | 否 | `separator` |
|
|
1720
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
1721
|
+
| ------------- | -------------------------------- | ---------- | ---- | ----------------------- | ------------------------------------------------ |
|
|
1722
|
+
| `actions` | `ActionItem[]` | `() => []` | 否 | `:actions="actions"` | 操作项配置，按顺序渲染为文字或图标按钮 |
|
|
1723
|
+
| `actionArgs` | `any[]` | `() => []` | 否 | `:action-args="[]"` | 点击时透传给 `action` 事件与 handler 的参数 |
|
|
1724
|
+
| `visibleArgs` | `any[]` | `() => []` | 否 | `:visible-args="[]"` | 传给每项 `visible` 判定函数的参数 |
|
|
1725
|
+
| `listCount` | `number` | `2` | 否 | `:list-count="1"` | 直接展示的操作数，超出收入"更多"下拉 |
|
|
1726
|
+
| `iconMore` | `boolean \| Record<string, any>` | — | 否 | `:icon-more="iconMore"` | 为 true 时把"更多"换成图标，对象则作为图标 props |
|
|
1727
|
+
| `separator` | `boolean` | — | 否 | `separator` | 各操作之间是否插入竖线分隔符 |
|
|
1588
1728
|
|
|
1589
1729
|
**事件（emits）**
|
|
1590
1730
|
|
|
@@ -1594,9 +1734,9 @@ import { ZlActionList } from '@zl-ui-kit/components'
|
|
|
1594
1734
|
|
|
1595
1735
|
**插槽（slots）**
|
|
1596
1736
|
|
|
1597
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
1598
|
-
| ------ | ---------- | ------------------------------ |
|
|
1599
|
-
| `more` | — | `<template #more>…</template>` |
|
|
1737
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
1738
|
+
| ------ | ---------- | ------------------------------ | ---------------------------------------------- |
|
|
1739
|
+
| `more` | — | `<template #more>…</template>` | "更多"下拉的触发区域，默认显示图标或"更多"文案 |
|
|
1600
1740
|
|
|
1601
1741
|
**完整示例**：见 §7 表单与交互组件 › ZlAction / ZlActionList —— 操作列与操作列表
|
|
1602
1742
|
|
|
@@ -1632,10 +1772,10 @@ import { ZlAddSub } from '@zl-ui-kit/components'
|
|
|
1632
1772
|
|
|
1633
1773
|
**props**
|
|
1634
1774
|
|
|
1635
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
1636
|
-
| ------------ | ----------------- | ---------- | ---- | --------------------------- |
|
|
1637
|
-
| `model` | `any[]` | `() => []` | 否 | `v-model:model="value"` |
|
|
1638
|
-
| `defaultVal` | `any[] \| string` | `() => []` | 否 | `:default-val="defaultVal"` | 新增项的默认值
|
|
1775
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
1776
|
+
| ------------ | ----------------- | ---------- | ---- | --------------------------- | ---------------------------------------------- |
|
|
1777
|
+
| `model` | `any[]` | `() => []` | 否 | `v-model:model="value"` | 列表数据（`v-model:model` 绑定），决定渲染几行 |
|
|
1778
|
+
| `defaultVal` | `any[] \| string` | `() => []` | 否 | `:default-val="defaultVal"` | 新增项的默认值 |
|
|
1639
1779
|
|
|
1640
1780
|
**事件（emits）**
|
|
1641
1781
|
|
|
@@ -1645,9 +1785,9 @@ import { ZlAddSub } from '@zl-ui-kit/components'
|
|
|
1645
1785
|
|
|
1646
1786
|
**插槽（slots）**
|
|
1647
1787
|
|
|
1648
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
1649
|
-
| ----- | ---------- | ----------------------------------------- |
|
|
1650
|
-
| `add` | `index` | `<template #add="{ index }">…</template>` |
|
|
1788
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
1789
|
+
| ----- | ---------- | ----------------------------------------- | --------------------------------------------- |
|
|
1790
|
+
| `add` | `index` | `<template #add="{ index }">…</template>` | 每一行的自定义内容，作用域参数 index 为行下标 |
|
|
1651
1791
|
|
|
1652
1792
|
**完整示例**：见 §7 表单与交互组件 › ZlRadioTag / ZlCheckboxTag / ZlCheckAll / ZlSorter / ZlAddSub / ZlLayoutSwitch
|
|
1653
1793
|
|
|
@@ -1655,6 +1795,8 @@ import { ZlAddSub } from '@zl-ui-kit/components'
|
|
|
1655
1795
|
|
|
1656
1796
|
<sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlAppLayout/index.vue`</sub>
|
|
1657
1797
|
|
|
1798
|
+
**简介**：布局形态（供 分发）
|
|
1799
|
+
|
|
1658
1800
|
**接口概览**：1 props · 1 插槽
|
|
1659
1801
|
|
|
1660
1802
|
**用法示例**
|
|
@@ -1681,9 +1823,9 @@ import { ZlAppLayout } from '@zl-ui-kit/components'
|
|
|
1681
1823
|
|
|
1682
1824
|
**props**
|
|
1683
1825
|
|
|
1684
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
1685
|
-
| -------- | ---------------------------- | -------------- | ---- | --------------------- |
|
|
1686
|
-
| `layout` | `'horizontal' \| 'vertical'` | `'horizontal'` | 否 | `layout="horizontal"` |
|
|
1826
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
1827
|
+
| -------- | ---------------------------- | -------------- | ---- | --------------------- | ---------------------------------------- |
|
|
1828
|
+
| `layout` | `'horizontal' \| 'vertical'` | `'horizontal'` | 否 | `layout="horizontal"` | 布局方向：横向用顶部菜单，纵向用侧边菜单 |
|
|
1687
1829
|
|
|
1688
1830
|
> 选项式组件（`defineComponent`），props 定义在 `props: {}` 中
|
|
1689
1831
|
> 把 `$attrs` 透传给内部组件，未列出的属性会继续下传
|
|
@@ -1694,12 +1836,14 @@ import { ZlAppLayout } from '@zl-ui-kit/components'
|
|
|
1694
1836
|
| --------- | ---------- | --------------------------------- | ------------------------------------------- |
|
|
1695
1837
|
| `default` | — | `<template #default>…</template>` | 整个 `slots` 对象原样透传，插槽由子组件决定 |
|
|
1696
1838
|
|
|
1697
|
-
**完整示例**：见 §
|
|
1839
|
+
**完整示例**：见 §3 组件总览（47 个业务组件） › ZlHorizontalLayout / ZlVerticalLayout —— 布局形态（供 ZlAppLayout 分发）
|
|
1698
1840
|
|
|
1699
1841
|
#### `ZlAppMenu`
|
|
1700
1842
|
|
|
1701
1843
|
<sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlAppMenu/AppMenu.vue`</sub>
|
|
1702
1844
|
|
|
1845
|
+
**简介**：菜单项（供 递归渲染）
|
|
1846
|
+
|
|
1703
1847
|
**接口概览**：3 props · 1 事件
|
|
1704
1848
|
|
|
1705
1849
|
**用法示例**
|
|
@@ -1720,9 +1864,9 @@ import { ZlAppMenu } from '@zl-ui-kit/components'
|
|
|
1720
1864
|
|
|
1721
1865
|
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
1722
1866
|
| ----------- | ---------------------------- | ------------ | ---- | ------------------- | ----------------------------------- |
|
|
1723
|
-
| `collapsed` | `boolean` | `false` | 否 | `collapsed` |
|
|
1867
|
+
| `collapsed` | `boolean` | `false` | 否 | `collapsed` | 菜单是否收起为图标，侧栏折叠时用 |
|
|
1724
1868
|
| `layout` | `'vertical' \| 'horizontal'` | `'vertical'` | 否 | `layout="vertical"` | el-menu 模式：vertical / horizontal |
|
|
1725
|
-
| `menus` | `MenuItem[]` | `() => []` | 否 | `:menus="menus"` |
|
|
1869
|
+
| `menus` | `MenuItem[]` | `() => []` | 否 | `:menus="menus"` | 菜单树数据，递归渲染为多级菜单项 |
|
|
1726
1870
|
|
|
1727
1871
|
**事件（emits）**
|
|
1728
1872
|
|
|
@@ -1730,7 +1874,7 @@ import { ZlAppMenu } from '@zl-ui-kit/components'
|
|
|
1730
1874
|
| ----------------- | ---------- | ---- |
|
|
1731
1875
|
| `menu-item-click` | `MenuItem` | — |
|
|
1732
1876
|
|
|
1733
|
-
**完整示例**：见 §
|
|
1877
|
+
**完整示例**：见 §3 组件总览（47 个业务组件） › ZlAppMenuItem —— 菜单项（供 ZlAppMenu 递归渲染）
|
|
1734
1878
|
|
|
1735
1879
|
#### `ZlAppSlogan`
|
|
1736
1880
|
|
|
@@ -1754,11 +1898,11 @@ import { ZlAppSlogan } from '@zl-ui-kit/components'
|
|
|
1754
1898
|
|
|
1755
1899
|
**props**
|
|
1756
1900
|
|
|
1757
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
1758
|
-
| ----------- | --------- | ------ | ---- | ------------------------------------- |
|
|
1759
|
-
| `collapsed` | `boolean` | — | 否 | `collapsed` |
|
|
1760
|
-
| `logo` | `string` | — | 否 | `logo="https://example.com/logo.png"` |
|
|
1761
|
-
| `title` | `string` | — | 否 | `title="标题"` |
|
|
1901
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
1902
|
+
| ----------- | --------- | ------ | ---- | ------------------------------------- | ------------------------------- |
|
|
1903
|
+
| `collapsed` | `boolean` | — | 否 | `collapsed` | 为 true 时只显示 Logo，隐藏标题 |
|
|
1904
|
+
| `logo` | `string` | — | 否 | `logo="https://example.com/logo.png"` | 品牌 Logo 的图片地址 |
|
|
1905
|
+
| `title` | `string` | — | 否 | `title="标题"` | 应用标题文案，折叠时隐藏 |
|
|
1762
1906
|
|
|
1763
1907
|
#### `ZlAutoTooltip`
|
|
1764
1908
|
|
|
@@ -1792,9 +1936,9 @@ import { ZlAutoTooltip } from '@zl-ui-kit/components'
|
|
|
1792
1936
|
|
|
1793
1937
|
**插槽（slots）**
|
|
1794
1938
|
|
|
1795
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
1796
|
-
| --------- | ---------- | --------------------------------- |
|
|
1797
|
-
| `default` | — | `<template #default>…</template>` |
|
|
1939
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
1940
|
+
| --------- | ---------- | --------------------------------- | -------------------------------- |
|
|
1941
|
+
| `default` | — | `<template #default>…</template>` | 需要省略并在溢出时提示的文本内容 |
|
|
1798
1942
|
|
|
1799
1943
|
#### `ZlAvatar`
|
|
1800
1944
|
|
|
@@ -1816,11 +1960,11 @@ import { ZlAvatar } from '@zl-ui-kit/components'
|
|
|
1816
1960
|
|
|
1817
1961
|
**props**
|
|
1818
1962
|
|
|
1819
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
1820
|
-
| ---------- | -------- | -------- | ---- | -------------------------------------------- |
|
|
1821
|
-
| `imageUrl` | `string` | — | 否 | `image-url="https://example.com/avatar.png"` |
|
|
1822
|
-
| `label` | `string` | — | 否 | `label="标签"` |
|
|
1823
|
-
| `size` | `string` | `'20px'` | 否 | `size="24px"` | 尺寸（CSS 长度）
|
|
1963
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
1964
|
+
| ---------- | -------- | -------- | ---- | -------------------------------------------- | ------------------------------------------ |
|
|
1965
|
+
| `imageUrl` | `string` | — | 否 | `image-url="https://example.com/avatar.png"` | 头像图片地址，加载成功后显示图片 |
|
|
1966
|
+
| `label` | `string` | — | 否 | `label="标签"` | 图片未加载时显示的首字，同时作为悬浮 title |
|
|
1967
|
+
| `size` | `string` | `'20px'` | 否 | `size="24px"` | 尺寸（CSS 长度） |
|
|
1824
1968
|
|
|
1825
1969
|
#### `ZlAvatarGroup`
|
|
1826
1970
|
|
|
@@ -1844,11 +1988,11 @@ import { ZlAvatarGroup } from '@zl-ui-kit/components'
|
|
|
1844
1988
|
|
|
1845
1989
|
**props**
|
|
1846
1990
|
|
|
1847
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
1848
|
-
| ------- | --------------------------------------- | -------------------------------------------------- | ---- | -------------- |
|
|
1849
|
-
| `list` | `Array<Record<string, any>>` | — | 是 | `:list="list"` |
|
|
1850
|
-
| `props` | `{ imageUrl?: string; label?: string }` | `() => ({ imageUrl: 'imageUrl', label: 'label' })` | 否 | `:props="{}"` | 字段映射（imageUrl/label 的取值键）
|
|
1851
|
-
| `size` | `string` | — | 否 | `size="24px"` |
|
|
1991
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
1992
|
+
| ------- | --------------------------------------- | -------------------------------------------------- | ---- | -------------- | ------------------------------------ |
|
|
1993
|
+
| `list` | `Array<Record<string, any>>` | — | 是 | `:list="list"` | 头像数据列表，首项单独展示，其余层叠 |
|
|
1994
|
+
| `props` | `{ imageUrl?: string; label?: string }` | `() => ({ imageUrl: 'imageUrl', label: 'label' })` | 否 | `:props="{}"` | 字段映射（imageUrl/label 的取值键） |
|
|
1995
|
+
| `size` | `string` | — | 否 | `size="24px"` | 每个头像的尺寸（CSS 长度） |
|
|
1852
1996
|
|
|
1853
1997
|
#### `ZlCard`
|
|
1854
1998
|
|
|
@@ -1892,22 +2036,22 @@ import { ZlCard } from '@zl-ui-kit/components'
|
|
|
1892
2036
|
|
|
1893
2037
|
**props**
|
|
1894
2038
|
|
|
1895
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
1896
|
-
| ----------- | --------- | ------ | ---- | -------------------- |
|
|
1897
|
-
| `hoverable` | `boolean` | `true` | 否 | `:hoverable="false"` |
|
|
2039
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
2040
|
+
| ----------- | --------- | ------ | ---- | -------------------- | -------------------------------- |
|
|
2041
|
+
| `hoverable` | `boolean` | `true` | 否 | `:hoverable="false"` | 鼠标悬停时是否高亮边框并加深阴影 |
|
|
1898
2042
|
|
|
1899
2043
|
**插槽（slots）**
|
|
1900
2044
|
|
|
1901
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
1902
|
-
| ---------------- | ---------- | ---------------------------------------- |
|
|
1903
|
-
| `icon` | — | `<template #icon>…</template>` |
|
|
1904
|
-
| `title` | — | `<template #title>…</template>` |
|
|
1905
|
-
| `title-append` | — | `<template #title-append>…</template>` |
|
|
1906
|
-
| `subtitle` | — | `<template #subtitle>…</template>` |
|
|
1907
|
-
| `default` | — | `<template #default>…</template>` |
|
|
1908
|
-
| `footer-prepend` | — | `<template #footer-prepend>…</template>` |
|
|
1909
|
-
| `footer` | — | `<template #footer>…</template>` |
|
|
1910
|
-
| `extra` | — | `<template #extra>…</template>` |
|
|
2045
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
2046
|
+
| ---------------- | ---------- | ---------------------------------------- | ---------------------------------- |
|
|
2047
|
+
| `icon` | — | `<template #icon>…</template>` | 卡片头部左侧的图标区 |
|
|
2048
|
+
| `title` | — | `<template #title>…</template>` | 卡片标题文案 |
|
|
2049
|
+
| `title-append` | — | `<template #title-append>…</template>` | 标题右侧的附加内容 |
|
|
2050
|
+
| `subtitle` | — | `<template #subtitle>…</template>` | 标题下方的副标题 |
|
|
2051
|
+
| `default` | — | `<template #default>…</template>` | 卡片主体内容，有内容才渲染该区域 |
|
|
2052
|
+
| `footer-prepend` | — | `<template #footer-prepend>…</template>` | 卡片底部左侧内容 |
|
|
2053
|
+
| `footer` | — | `<template #footer>…</template>` | 卡片底部右侧内容 |
|
|
2054
|
+
| `extra` | — | `<template #extra>…</template>` | 卡片主体之外的自由区域，如展开面板 |
|
|
1911
2055
|
|
|
1912
2056
|
**完整示例**：见 §5 通用展示组件 › ZlCard / ZlPagination — 卡片与分页的视觉约定
|
|
1913
2057
|
|
|
@@ -1949,12 +2093,12 @@ import { ZlCardPage } from '@zl-ui-kit/components'
|
|
|
1949
2093
|
|
|
1950
2094
|
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
1951
2095
|
| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ---- | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
1952
|
-
| `immediate` | `boolean` | `true` | 否 | `:immediate="false"` |
|
|
2096
|
+
| `immediate` | `boolean` | `true` | 否 | `:immediate="false"` | 无查询条件时是否立即发起首次请求 |
|
|
1953
2097
|
| `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） |
|
|
1954
|
-
| `queryItems` | `SearchItem[]` | `() => []` | 否 | `:query-items="queryItems"` |
|
|
1955
|
-
| `pagination` | `Record<string, any> \| boolean` | `true` | 否 | `:pagination="{}"` |
|
|
1956
|
-
| `itemKey` | `string` | `'id'` | 否 | `item-key="id"` |
|
|
1957
|
-
| `cardMinWidth` | `string` | — | 否 | `card-min-width="280px"` |
|
|
2098
|
+
| `queryItems` | `SearchItem[]` | `() => []` | 否 | `:query-items="queryItems"` | 搜索表单项配置，为空则不渲染搜索栏 |
|
|
2099
|
+
| `pagination` | `Record<string, any> \| boolean` | `true` | 否 | `:pagination="{}"` | 分页配置，false 关闭分页，对象则透传 |
|
|
2100
|
+
| `itemKey` | `string` | `'id'` | 否 | `item-key="id"` | 卡片数据的唯一键字段名，默认 id |
|
|
2101
|
+
| `cardMinWidth` | `string` | — | 否 | `card-min-width="280px"` | 卡片最小宽度，决定单行能放几列 |
|
|
1958
2102
|
|
|
1959
2103
|
**事件（emits）**
|
|
1960
2104
|
|
|
@@ -1964,11 +2108,11 @@ import { ZlCardPage } from '@zl-ui-kit/components'
|
|
|
1964
2108
|
|
|
1965
2109
|
**插槽（slots）**
|
|
1966
2110
|
|
|
1967
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
1968
|
-
| ------------------ | ------------------------------ | -------------------------------------------------- |
|
|
1969
|
-
| `search-actions` | — | `<template #search-actions>…</template>` |
|
|
1970
|
-
| `[search-${slot}]` | `v-bind="scope"` 展开 | `<template #[search-${slot}]="scope">…</template>` |
|
|
1971
|
-
| `default` | `v-bind="{ data: item }"` 展开 | `<template #default="{ data }">…</template>` |
|
|
2111
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
2112
|
+
| ------------------ | ------------------------------ | -------------------------------------------------- | ------------------------------------------ |
|
|
2113
|
+
| `search-actions` | — | `<template #search-actions>…</template>` | 搜索栏右侧的操作按钮区 |
|
|
2114
|
+
| `[search-${slot}]` | `v-bind="scope"` 展开 | `<template #[search-${slot}]="scope">…</template>` | 自定义搜索项，插槽名 search- 加字段名 |
|
|
2115
|
+
| `default` | `v-bind="{ data: item }"` 展开 | `<template #default="{ data }">…</template>` | 单个卡片内容，作用域参数 data 为当前项数据 |
|
|
1972
2116
|
|
|
1973
2117
|
**暴露（defineExpose）**
|
|
1974
2118
|
|
|
@@ -2004,10 +2148,10 @@ import { ZlCheckAll } from '@zl-ui-kit/components'
|
|
|
2004
2148
|
|
|
2005
2149
|
**props**
|
|
2006
2150
|
|
|
2007
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
2008
|
-
| --------- | ------------------------- | ---------- | ---- | ----------------------- |
|
|
2009
|
-
| `options` | `CheckAllOption[]` | `() => []` | 否 | `:options="options"` |
|
|
2010
|
-
| `model` | `Array<string \| number>` | `() => []` | 否 | `v-model:model="value"` |
|
|
2151
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
2152
|
+
| --------- | ------------------------- | ---------- | ---- | ----------------------- | ---------------------------------------- |
|
|
2153
|
+
| `options` | `CheckAllOption[]` | `() => []` | 否 | `:options="options"` | 全选管理的可选项，每项渲染成一个复选框 |
|
|
2154
|
+
| `model` | `Array<string \| number>` | `() => []` | 否 | `v-model:model="value"` | 已勾选的 value 集合，用 v-model 双向绑定 |
|
|
2011
2155
|
|
|
2012
2156
|
**事件（emits）**
|
|
2013
2157
|
|
|
@@ -2050,12 +2194,12 @@ import { ZlCheckboxTag } from '@zl-ui-kit/components'
|
|
|
2050
2194
|
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
2051
2195
|
| ------------ | ------------------------------- | ---------- | ---- | -------------------- | -------------------------------------------- |
|
|
2052
2196
|
| `modelValue` | `any` | — | 否 | `v-model="value"` | `v-model` 绑定的值（`defineModel` 隐式声明） |
|
|
2053
|
-
| `options` | `CheckboxTagOption[]` | `() => []` | 否 | `:options="options"` |
|
|
2197
|
+
| `options` | `CheckboxTagOption[]` | `() => []` | 否 | `:options="options"` | 标签候选列表，每项可配图标与互斥组 |
|
|
2054
2198
|
| `single` | `boolean` | — | 否 | `single` | 单选模式（值为单值） |
|
|
2055
|
-
| `rounded` | `boolean` | `true` | 否 | `:rounded="false"` |
|
|
2056
|
-
| `bordered` | `boolean` | `true` | 否 | `:bordered="false"` |
|
|
2057
|
-
| `fill` | `boolean` | `true` | 否 | `:fill="false"` |
|
|
2058
|
-
| `size` | `'mini' \| 'small' \| 'medium'` | `'small'` | 否 | `size="mini"` |
|
|
2199
|
+
| `rounded` | `boolean` | `true` | 否 | `:rounded="false"` | 是否圆角显示，默认开启 |
|
|
2200
|
+
| `bordered` | `boolean` | `true` | 否 | `:bordered="false"` | 选中时是否显示边框，默认开启 |
|
|
2201
|
+
| `fill` | `boolean` | `true` | 否 | `:fill="false"` | 是否填充背景色，默认开启 |
|
|
2202
|
+
| `size` | `'mini' \| 'small' \| 'medium'` | `'small'` | 否 | `size="mini"` | 标签尺寸档位，默认 small |
|
|
2059
2203
|
|
|
2060
2204
|
**事件（emits）**
|
|
2061
2205
|
|
|
@@ -2065,9 +2209,9 @@ import { ZlCheckboxTag } from '@zl-ui-kit/components'
|
|
|
2065
2209
|
|
|
2066
2210
|
**插槽（slots）**
|
|
2067
2211
|
|
|
2068
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
2069
|
-
| --------- | ------------------------------------------------------------- | ----------------------------------------------------- |
|
|
2070
|
-
| `default` | `v-bind="{ item, checked: checkedSet.has(item.value) }"` 展开 | `<template #default="{ item, checked }">…</template>` |
|
|
2212
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
2213
|
+
| --------- | ------------------------------------------------------------- | ----------------------------------------------------- | ---------------------------------------- |
|
|
2214
|
+
| `default` | `v-bind="{ item, checked: checkedSet.has(item.value) }"` 展开 | `<template #default="{ item, checked }">…</template>` | 单个标签的展示内容，默认取该选项的 label |
|
|
2071
2215
|
|
|
2072
2216
|
**完整示例**：见 §7 表单与交互组件 › ZlRadioTag / ZlCheckboxTag / ZlCheckAll / ZlSorter / ZlAddSub / ZlLayoutSwitch
|
|
2073
2217
|
|
|
@@ -2104,17 +2248,17 @@ import { ZlCopy } from '@zl-ui-kit/components'
|
|
|
2104
2248
|
|
|
2105
2249
|
**props**
|
|
2106
2250
|
|
|
2107
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
2108
|
-
| ---------- | -------- | ------ | ---- | ---------------------- |
|
|
2109
|
-
| `text` | `string` | — | 否 | `text="文本"` |
|
|
2110
|
-
| `copyText` | `string` | — | 否 | `copy-text="复制内容"` |
|
|
2251
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
2252
|
+
| ---------- | -------- | ------ | ---- | ---------------------- | -------------------------------------------- |
|
|
2253
|
+
| `text` | `string` | — | 否 | `text="文本"` | 展示的文本，未传 copyText 时点击复制的就是它 |
|
|
2254
|
+
| `copyText` | `string` | — | 否 | `copy-text="复制内容"` | 实际写入剪贴板的内容，优先级高于 text |
|
|
2111
2255
|
|
|
2112
2256
|
**插槽（slots）**
|
|
2113
2257
|
|
|
2114
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
2115
|
-
| --------- | ---------- | -------------------------------------------- |
|
|
2116
|
-
| `default` | — | `<template #default>…</template>` |
|
|
2117
|
-
| `trigger` | `copy` | `<template #trigger="{ copy }">…</template>` |
|
|
2258
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
2259
|
+
| --------- | ---------- | -------------------------------------------- | -------------------------------------- |
|
|
2260
|
+
| `default` | — | `<template #default>…</template>` | 复制内容展示区，缺省渲染 text |
|
|
2261
|
+
| `trigger` | `copy` | `<template #trigger="{ copy }">…</template>` | 自定义复制触发器，作用域提供 copy 方法 |
|
|
2118
2262
|
|
|
2119
2263
|
**完整示例**：见 §5 通用展示组件 › ZlCopy — 一键复制
|
|
2120
2264
|
|
|
@@ -2152,17 +2296,17 @@ import { ZlDescription } from '@zl-ui-kit/components'
|
|
|
2152
2296
|
|
|
2153
2297
|
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
2154
2298
|
| -------------- | ----------------------------------------------------------------- | -------------------------------------- | ---- | --------------------------- | -------------------------------------------------------------------- |
|
|
2155
|
-
| `items` | `DescriptionItem[]` | — | 是 | `:items="items"` |
|
|
2156
|
-
| `data` | `Record<string, any>` | `() => ({})` | 否 | `:data="{}"` |
|
|
2157
|
-
| `emptyChecker` | `(value: any, key: string, data: Record<string, any>) => boolean` | `(val: any) => !val && !isNumber(val)` | 否 | `:empty-checker="() => {}"` |
|
|
2299
|
+
| `items` | `DescriptionItem[]` | — | 是 | `:items="items"` | 展示项列表，决定字段顺序、取值与显隐 |
|
|
2300
|
+
| `data` | `Record<string, any>` | `() => ({})` | 否 | `:data="{}"` | 取值来源对象，缺省按各项 key 取字段 |
|
|
2301
|
+
| `emptyChecker` | `(value: any, key: string, data: Record<string, any>) => boolean` | `(val: any) => !val && !isNumber(val)` | 否 | `:empty-checker="() => {}"` | 判断值是否为空，为空时改显示占位文案 |
|
|
2158
2302
|
| `emptyText` | `string` | — | 否 | `empty-text="暂无数据"` | 空值占位文案（缺省走 i18n zl.description.empty，未接入时兜底"暂无"） |
|
|
2159
|
-
| `secondary` | `boolean` | — | 否 | `secondary` |
|
|
2303
|
+
| `secondary` | `boolean` | — | 否 | `secondary` | 次要形态：灰底并显示字段间分隔线 |
|
|
2160
2304
|
|
|
2161
2305
|
**插槽（slots）**
|
|
2162
2306
|
|
|
2163
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
2164
|
-
| ------------ | ---------- | ------------------------------------ |
|
|
2165
|
-
| `[item.key]` | — | `<template #[item.key]>…</template>` |
|
|
2307
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
2308
|
+
| ------------ | ---------- | ------------------------------------ | -------------------------------------------- |
|
|
2309
|
+
| `[item.key]` | — | `<template #[item.key]>…</template>` | 按 item.key 命名，仅在该项开启 slot 时才渲染 |
|
|
2166
2310
|
|
|
2167
2311
|
#### `ZlDictTag`
|
|
2168
2312
|
|
|
@@ -2192,11 +2336,11 @@ import { ZlDictTag } from '@zl-ui-kit/components'
|
|
|
2192
2336
|
| ------------- | ------------------------------------------------------------------------- | ----------- | ---- | ------------------- | ------------------------------------------------------------------------------------------------- |
|
|
2193
2337
|
| `dictKey` | `string` | — | 是 | `dict-key="gender"` | 字典键（对应全局字典缓存的键；外部直传数据也以该键写入共享缓存） |
|
|
2194
2338
|
| `dict` | `DictItem[]` | — | 否 | `:dict="dict"` | 外部直传字典数据：无需依赖全局数据源即可翻译。格式同 DictItem[]（{ label, value, icon?, type? }） |
|
|
2195
|
-
| `corner` | `boolean \| 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` | `false` | 否 | `corner="top-left"` |
|
|
2196
|
-
| `value` | `string` | — | 否 | `value="1"` |
|
|
2197
|
-
| `simple` | `boolean` | — | 否 | `simple` |
|
|
2339
|
+
| `corner` | `boolean \| 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` | `false` | 否 | `corner="top-left"` | 是否渲染成角标并指定方位，true 时为右上角 |
|
|
2340
|
+
| `value` | `string` | — | 否 | `value="1"` | 待翻译的字典值，匹配不到时原样展示 |
|
|
2341
|
+
| `simple` | `boolean` | — | 否 | `simple` | 忽略字典项自带的颜色，改用标签默认配色 |
|
|
2198
2342
|
| `iconVisible` | `boolean` | `undefined` | 否 | `icon-visible` | 是否展示字典项图标（默认 true） |
|
|
2199
|
-
| `hideIcon` | `boolean` | `undefined` | 否 | `hide-icon` |
|
|
2343
|
+
| `hideIcon` | `boolean` | `undefined` | 否 | `hide-icon` | 已废弃，请用 `iconVisible` 控制图标显隐 |
|
|
2200
2344
|
|
|
2201
2345
|
> 把 `$attrs` 透传给 `zl-corner-tag`，未列出的属性会继续下传
|
|
2202
2346
|
|
|
@@ -2236,11 +2380,11 @@ import { ZlDrawer } from '@zl-ui-kit/components'
|
|
|
2236
2380
|
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
2237
2381
|
| ----------------------- | --------------------------------------------------- | ------- | ---- | ----------------------------------- | -------------------------------------------- |
|
|
2238
2382
|
| `visible` | `boolean` | `false` | 否 | `v-model:visible="value"` | `v-model` 绑定的值（`defineModel` 隐式声明） |
|
|
2239
|
-
| `onCancel` | `() => boolean \| void \| Promise<boolean \| void>` | — | 否 | `:on-cancel="async () => {}"` |
|
|
2240
|
-
| `onOk` | `() => void \| Promise<void>` | — | 否 | `:on-ok="async () => {}"` |
|
|
2241
|
-
| `autoCloseAfterConfirm` | `boolean` | `true` | 否 | `:auto-close-after-confirm="false"` |
|
|
2242
|
-
| `readonly` | `boolean` | — | 否 | `readonly` |
|
|
2243
|
-
| `loading` | `boolean` | — | 否 | `loading` |
|
|
2383
|
+
| `onCancel` | `() => boolean \| void \| Promise<boolean \| void>` | — | 否 | `:on-cancel="async () => {}"` | 关闭前触发，返回 true 才会真正关闭 |
|
|
2384
|
+
| `onOk` | `() => void \| Promise<void>` | — | 否 | `:on-ok="async () => {}"` | 点击确定的回调，异步期间按钮保持 loading |
|
|
2385
|
+
| `autoCloseAfterConfirm` | `boolean` | `true` | 否 | `:auto-close-after-confirm="false"` | 确定回调结束后是否自动关闭抽屉，默认 true |
|
|
2386
|
+
| `readonly` | `boolean` | — | 否 | `readonly` | 只读模式：隐藏取消按钮，只留「关闭」 |
|
|
2387
|
+
| `loading` | `boolean` | — | 否 | `loading` | 内容区加载态，为 true 时显示遮罩 loading |
|
|
2244
2388
|
|
|
2245
2389
|
**事件（emits）**
|
|
2246
2390
|
|
|
@@ -2250,10 +2394,10 @@ import { ZlDrawer } from '@zl-ui-kit/components'
|
|
|
2250
2394
|
|
|
2251
2395
|
**插槽（slots）**
|
|
2252
2396
|
|
|
2253
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
2254
|
-
| --------- | ---------- | --------------------------------- |
|
|
2255
|
-
| `default` | — | `<template #default>…</template>` |
|
|
2256
|
-
| `footer` | — | `<template #footer>…</template>` |
|
|
2397
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
2398
|
+
| --------- | ---------- | --------------------------------- | ----------------------------------- |
|
|
2399
|
+
| `default` | — | `<template #default>…</template>` | 抽屉正文内容，位于底部按钮区之上 |
|
|
2400
|
+
| `footer` | — | `<template #footer>…</template>` | 自定义底部按钮区，缺省渲染取消/确定 |
|
|
2257
2401
|
|
|
2258
2402
|
**完整示例**：见 §7 表单与交互组件 › ZlDrawer / ZlPopconfirm / ZlSwitch
|
|
2259
2403
|
|
|
@@ -2279,11 +2423,11 @@ import { ZlDynamicComponent } from '@zl-ui-kit/components'
|
|
|
2279
2423
|
|
|
2280
2424
|
**props**
|
|
2281
2425
|
|
|
2282
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
2283
|
-
| ----------- | ---------------------------------- | ----------------------------------- | ---- | ----------------- |
|
|
2284
|
-
| `model` | `Record<string, any>` | `() => ({})` | 否 | `:model="{}"` |
|
|
2285
|
-
| `value` | `[String, Number, Array, Boolean]` | `null` | 否 | `:value="value"` |
|
|
2286
|
-
| `component` | `Record<string, any>` | `() => ({ component: 'el-input' })` | 否 | `:component="{}"` |
|
|
2426
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
2427
|
+
| ----------- | ---------------------------------- | ----------------------------------- | ---- | ----------------- | ------------------------------------------- |
|
|
2428
|
+
| `model` | `Record<string, any>` | `() => ({})` | 否 | `:model="{}"` | 共享的数据对象，子组件按 model 字段读写值 |
|
|
2429
|
+
| `value` | `[String, Number, Array, Boolean]` | `null` | 否 | `:value="value"` | type 为 vModel 时透传给子组件的值 |
|
|
2430
|
+
| `component` | `Record<string, any>` | `() => ({ component: 'el-input' })` | 否 | `:component="{}"` | 待渲染组件的 schema 描述，缺省渲染 el-input |
|
|
2287
2431
|
|
|
2288
2432
|
> 选项式组件（`defineComponent`），props 定义在 `props: {}` 中
|
|
2289
2433
|
|
|
@@ -2318,10 +2462,10 @@ import { ZlPdfViewer } from '@zl-ui-kit/components'
|
|
|
2318
2462
|
|
|
2319
2463
|
**props**
|
|
2320
2464
|
|
|
2321
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
2322
|
-
| ------- | ------------------ | ------ | ---- | ------------------------------------ |
|
|
2323
|
-
| `url` | `string` | — | 否 | `url="https://example.com/file.pdf"` |
|
|
2324
|
-
| `width` | `number \| string` | — | 否 | `:width="width"` |
|
|
2465
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
2466
|
+
| ------- | ------------------ | ------ | ---- | ------------------------------------ | -------------------------------------- |
|
|
2467
|
+
| `url` | `string` | — | 否 | `url="https://example.com/file.pdf"` | PDF 文件地址，渲染时自动隐藏内置工具栏 |
|
|
2468
|
+
| `width` | `number \| string` | — | 否 | `:width="width"` | 预览区宽度，直接透传给 object 元素 |
|
|
2325
2469
|
|
|
2326
2470
|
#### `ZlLogin`
|
|
2327
2471
|
|
|
@@ -2356,17 +2500,17 @@ import { ZlLogin } from '@zl-ui-kit/components'
|
|
|
2356
2500
|
|
|
2357
2501
|
**props**
|
|
2358
2502
|
|
|
2359
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
2360
|
-
| ---------- | ------------------------------------------------------ | ------------ | ---- | ----------------------------- |
|
|
2361
|
-
| `onSubmit` | `(form: Record<string, any>) => Promise<void> \| void` | — | 否 | `:on-submit="async () => {}"` |
|
|
2362
|
-
| `config` | `ZlLoginConfig` | `() => ({})` | 否 | `:config="config"` |
|
|
2503
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
2504
|
+
| ---------- | ------------------------------------------------------ | ------------ | ---- | ----------------------------- | -------------------------------------- |
|
|
2505
|
+
| `onSubmit` | `(form: Record<string, any>) => Promise<void> \| void` | — | 否 | `:on-submit="async () => {}"` | 表单提交回调，接收用户填写的登录信息 |
|
|
2506
|
+
| `config` | `ZlLoginConfig` | `() => ({})` | 否 | `:config="config"` | 标题、背景（图片或视频）与整体布局形态 |
|
|
2363
2507
|
|
|
2364
2508
|
**插槽（slots）**
|
|
2365
2509
|
|
|
2366
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
2367
|
-
| --------- | ---------- | --------------------------------- |
|
|
2368
|
-
| `slogan` | — | `<template #slogan>…</template>` |
|
|
2369
|
-
| `default` | — | `<template #default>…</template>` |
|
|
2510
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
2511
|
+
| --------- | ---------- | --------------------------------- | ---------------------------------- |
|
|
2512
|
+
| `slogan` | — | `<template #slogan>…</template>` | 左上角的标语/品牌区 |
|
|
2513
|
+
| `default` | — | `<template #default>…</template>` | 登录主体内容，缺省渲染内置登录表单 |
|
|
2370
2514
|
|
|
2371
2515
|
#### `ZlLoginForm`
|
|
2372
2516
|
|
|
@@ -2402,15 +2546,15 @@ import { ZlLoginForm } from '@zl-ui-kit/components'
|
|
|
2402
2546
|
|
|
2403
2547
|
**props**
|
|
2404
2548
|
|
|
2405
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
2406
|
-
| ---------- | ------------------------------------------------------ | ------ | ---- | ----------------------------- |
|
|
2407
|
-
| `onSubmit` | `(form: Record<string, any>) => Promise<void> \| void` | — | 否 | `:on-submit="async () => {}"` |
|
|
2549
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
2550
|
+
| ---------- | ------------------------------------------------------ | ------ | ---- | ----------------------------- | ---------------------------------------- |
|
|
2551
|
+
| `onSubmit` | `(form: Record<string, any>) => Promise<void> \| void` | — | 否 | `:on-submit="async () => {}"` | 校验通过后触发，回传用户名与密码等表单值 |
|
|
2408
2552
|
|
|
2409
2553
|
**插槽（slots）**
|
|
2410
2554
|
|
|
2411
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
2412
|
-
| -------- | ---------- | -------------------------------- |
|
|
2413
|
-
| `action` | — | `<template #action>…</template>` |
|
|
2555
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
2556
|
+
| -------- | ---------- | -------------------------------- | ------------------------ |
|
|
2557
|
+
| `action` | — | `<template #action>…</template>` | 登录按钮下方的扩展操作区 |
|
|
2414
2558
|
|
|
2415
2559
|
#### `ZlEmpty`
|
|
2416
2560
|
|
|
@@ -2477,20 +2621,20 @@ import { ZlForm } from '@zl-ui-kit/components'
|
|
|
2477
2621
|
|
|
2478
2622
|
**props**
|
|
2479
2623
|
|
|
2480
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
2481
|
-
| ------- | --------------------- | ---------- | ---- | ---------------- |
|
|
2482
|
-
| `items` | `FormItem[]` | `() => []` | 否 | `:items="items"` |
|
|
2483
|
-
| `model` | `Record<string, any>` | — | 否 | `:model="{}"` |
|
|
2624
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
2625
|
+
| ------- | --------------------- | ---------- | ---- | ---------------- | ----------------------------------- |
|
|
2626
|
+
| `items` | `FormItem[]` | `() => []` | 否 | `:items="items"` | 表单字段 schema，决定渲染哪些表单项 |
|
|
2627
|
+
| `model` | `Record<string, any>` | — | 否 | `:model="{}"` | 表单值对象，不传时由组件内部自建 |
|
|
2484
2628
|
|
|
2485
2629
|
> 把 `$attrs` 透传给 `el-form`，未列出的属性会继续下传
|
|
2486
2630
|
|
|
2487
2631
|
**插槽（slots）**
|
|
2488
2632
|
|
|
2489
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
2490
|
-
| -------------- | ------------------------------------------- | --------------------------------------------------------- |
|
|
2491
|
-
| `label` | `v-bind="{ label: item.label, item }"` 展开 | `<template #label="{ label, item }">…</template>` |
|
|
2492
|
-
| `[item.model]` | `model` / `field` | `<template #[item.model]="{ model, field }">…</template>` |
|
|
2493
|
-
| `default` | — | `<template #default>…</template>` |
|
|
2633
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
2634
|
+
| -------------- | ------------------------------------------- | --------------------------------------------------------- | -------------------------------------------------- |
|
|
2635
|
+
| `label` | `v-bind="{ label: item.label, item }"` 展开 | `<template #label="{ label, item }">…</template>` | 自定义表单项标签的渲染内容 |
|
|
2636
|
+
| `[item.model]` | `model` / `field` | `<template #[item.model]="{ model, field }">…</template>` | 按该项 model 命名，传出 model、field；覆盖默认控件 |
|
|
2637
|
+
| `default` | — | `<template #default>…</template>` | 追加在末尾的表单内容（如额外区块、按钮） |
|
|
2494
2638
|
|
|
2495
2639
|
**完整示例**：见 §7 表单与交互组件 › ZlForm —— schema 驱动
|
|
2496
2640
|
|
|
@@ -2516,9 +2660,9 @@ import { ZlFormChild } from '@zl-ui-kit/components'
|
|
|
2516
2660
|
|
|
2517
2661
|
**props**
|
|
2518
2662
|
|
|
2519
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
2520
|
-
| ------ | --------------------- | ------ | ---- | ------------ |
|
|
2521
|
-
| `item` | `Record<string, any>` | — | 是 | `:item="{}"` |
|
|
2663
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
2664
|
+
| ------ | --------------------- | ------ | ---- | ------------ | ---------------------------------------- |
|
|
2665
|
+
| `item` | `Record<string, any>` | — | 是 | `:item="{}"` | 由 ZlForm 传入：描述要渲染的控件及其入参 |
|
|
2522
2666
|
|
|
2523
2667
|
> 选项式组件（`defineComponent`），props 定义在 `props: {}` 中
|
|
2524
2668
|
|
|
@@ -2556,15 +2700,15 @@ import { ZlGridItem } from '@zl-ui-kit/components'
|
|
|
2556
2700
|
|
|
2557
2701
|
**props**
|
|
2558
2702
|
|
|
2559
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
2560
|
-
| ------ | --------------------------------------------------------------------------------- | ------ | ---- | -------------- |
|
|
2561
|
-
| `item` | `IGridItem & { text?: any; size?: number \| 'auto'; dict?: Record<string, any> }` | — | 是 | `:item="item"` |
|
|
2703
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
2704
|
+
| ------ | --------------------------------------------------------------------------------- | ------ | ---- | -------------- | ------------------------------------ |
|
|
2705
|
+
| `item` | `IGridItem & { text?: any; size?: number \| 'auto'; dict?: Record<string, any> }` | — | 是 | `:item="item"` | 单个描述项配置：标签、取值与渲染方式 |
|
|
2562
2706
|
|
|
2563
2707
|
**插槽（slots）**
|
|
2564
2708
|
|
|
2565
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
2566
|
-
| --------- | ---------- | --------------------------------- |
|
|
2567
|
-
| `default` | — | `<template #default>…</template>` |
|
|
2709
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
2710
|
+
| --------- | ---------- | --------------------------------- | ------------------------------------ |
|
|
2711
|
+
| `default` | — | `<template #default>…</template>` | 自定义该描述项的取值内容，替代纯文本 |
|
|
2568
2712
|
|
|
2569
2713
|
#### `ZlGrid`
|
|
2570
2714
|
|
|
@@ -2601,22 +2745,22 @@ import { ZlGrid } from '@zl-ui-kit/components'
|
|
|
2601
2745
|
|
|
2602
2746
|
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
2603
2747
|
| --------------- | ----------------------------------------------------------------- | ------------ | ---- | --------------------------- | ------------------------------------------------------------- |
|
|
2604
|
-
| `data` | `Record<string, any>` | `() => ({})` | 否 | `:data="{}"` |
|
|
2605
|
-
| `grid` | `IGridItem[]` | `() => []` | 否 | `:grid="grid"` |
|
|
2606
|
-
| `cols` | `number` | `3` | 否 | `:cols="1"` |
|
|
2607
|
-
| `border` | `boolean` | — | 否 | `border` |
|
|
2608
|
-
| `emptyChecker` | `(value: any, key: string, data: Record<string, any>) => boolean` | — | 否 | `:empty-checker="() => {}"` |
|
|
2609
|
-
| `labelWidth` | `string \| number` | `'auto'` | 否 | `:label-width="labelWidth"` |
|
|
2610
|
-
| `labelSuffix` | `string` | — | 否 | `label-suffix="："` |
|
|
2611
|
-
| `labelPosition` | `'left' \| 'top' \| 'right'` | `'left'` | 否 | `label-position="left"` |
|
|
2748
|
+
| `data` | `Record<string, any>` | `() => ({})` | 否 | `:data="{}"` | 数据源对象，每项按 key 或 getValue 取值 |
|
|
2749
|
+
| `grid` | `IGridItem[]` | `() => []` | 否 | `:grid="grid"` | 描述项 schema：决定展示哪些字段与顺序 |
|
|
2750
|
+
| `cols` | `number` | `3` | 否 | `:cols="1"` | 每行显示的描述项列数，默认 3 |
|
|
2751
|
+
| `border` | `boolean` | — | 否 | `border` | 是否显示边框，呈表格式的网格线 |
|
|
2752
|
+
| `emptyChecker` | `(value: any, key: string, data: Record<string, any>) => boolean` | — | 否 | `:empty-checker="() => {}"` | 自定义空值判定；默认 0 以外的假值都算空 |
|
|
2753
|
+
| `labelWidth` | `string \| number` | `'auto'` | 否 | `:label-width="labelWidth"` | 标签列宽度；auto 时按实测最宽标签对齐 |
|
|
2754
|
+
| `labelSuffix` | `string` | — | 否 | `label-suffix="："` | 标签后缀，如冒号或空格 |
|
|
2755
|
+
| `labelPosition` | `'left' \| 'top' \| 'right'` | `'left'` | 否 | `label-position="left"` | 标签位置；top 时标签与值上下堆叠 |
|
|
2612
2756
|
| `emptyText` | `string` | — | 否 | `empty-text="暂无数据"` | 空值占位文案（缺省走 i18n zl.grid.empty，未接入时兜底"暂无"） |
|
|
2613
2757
|
|
|
2614
2758
|
**插槽（slots）**
|
|
2615
2759
|
|
|
2616
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
2617
|
-
| ------------ | ---------- | ------------------------------------ |
|
|
2618
|
-
| `[item.key]` | — | `<template #[item.key]>…</template>` |
|
|
2619
|
-
| `default` | — | `<template #default>…</template>` |
|
|
2760
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
2761
|
+
| ------------ | ---------- | ------------------------------------ | ----------------------------------------- |
|
|
2762
|
+
| `[item.key]` | — | `<template #[item.key]>…</template>` | 按描述项的 key 命名，自定义该项的取值内容 |
|
|
2763
|
+
| `default` | — | `<template #default>…</template>` | 追加在所有描述项之后的自定义内容 |
|
|
2620
2764
|
|
|
2621
2765
|
**完整示例**：见 §7 表单与交互组件 › ZlTabs / ZlDynamicComponent / ZlGrid
|
|
2622
2766
|
|
|
@@ -2652,18 +2796,18 @@ import { ZlHorizontalTable } from '@zl-ui-kit/components'
|
|
|
2652
2796
|
|
|
2653
2797
|
**props**
|
|
2654
2798
|
|
|
2655
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
2656
|
-
| ------------ | ----------------------- | ---------- | ---- | --------------------- |
|
|
2657
|
-
| `items` | `HorizontalTableItem[]` | `() => []` | 否 | `:items="items"` |
|
|
2658
|
-
| `span` | `number \| string` | `24` | 否 | `:span="span"` |
|
|
2659
|
-
| `labelWidth` | `string` | `'88px'` | 否 | `label-width="100px"` |
|
|
2660
|
-
| `labelAlign` | `string` | `'center'` | 否 | `label-align="left"` |
|
|
2799
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
2800
|
+
| ------------ | ----------------------- | ---------- | ---- | --------------------- | --------------------------------------------- |
|
|
2801
|
+
| `items` | `HorizontalTableItem[]` | `() => []` | 否 | `:items="items"` | 单元格配置列表：标签、取值与跨列 |
|
|
2802
|
+
| `span` | `number \| string` | `24` | 否 | `:span="span"` | 统一的栅格跨度，默认 24（可被单项 span 覆盖） |
|
|
2803
|
+
| `labelWidth` | `string` | `'88px'` | 否 | `label-width="100px"` | 标签单元格宽度，默认 88px |
|
|
2804
|
+
| `labelAlign` | `string` | `'center'` | 否 | `label-align="left"` | 标签文案的水平对齐方式，默认居中 |
|
|
2661
2805
|
|
|
2662
2806
|
**插槽（slots）**
|
|
2663
2807
|
|
|
2664
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
2665
|
-
| ------------- | -------------------- | -------------------------------------------- |
|
|
2666
|
-
| `[item.slot]` | `v-bind="item"` 展开 | `<template #[item.slot]="item">…</template>` |
|
|
2808
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
2809
|
+
| ------------- | -------------------- | -------------------------------------------- | ------------------------------------ |
|
|
2810
|
+
| `[item.slot]` | `v-bind="item"` 展开 | `<template #[item.slot]="item">…</template>` | 名字取自 item.slot，传出该项完整配置 |
|
|
2667
2811
|
|
|
2668
2812
|
**完整示例**：见 §8 布局与权限 › ZlHorizontalTable
|
|
2669
2813
|
|
|
@@ -2703,9 +2847,9 @@ import { ZlIcon } from '@zl-ui-kit/components'
|
|
|
2703
2847
|
|
|
2704
2848
|
**插槽（slots）**
|
|
2705
2849
|
|
|
2706
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
2707
|
-
| --------- | ---------- | --------------------------------- |
|
|
2708
|
-
| `default` | — | `<template #default>…</template>` |
|
|
2850
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
2851
|
+
| --------- | ---------- | --------------------------------- | ------------------------------------ |
|
|
2852
|
+
| `default` | — | `<template #default>…</template>` | 自定义图标内容，覆盖 icon 的自动渲染 |
|
|
2709
2853
|
|
|
2710
2854
|
#### `ZlI18nProvider`
|
|
2711
2855
|
|
|
@@ -2739,9 +2883,9 @@ import { ZlI18nProvider } from '@zl-ui-kit/components'
|
|
|
2739
2883
|
|
|
2740
2884
|
**插槽（slots）**
|
|
2741
2885
|
|
|
2742
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
2743
|
-
| --------- | ---------- | --------------------------------- |
|
|
2744
|
-
| `default` | — | `<template #default>…</template>` |
|
|
2886
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
2887
|
+
| --------- | ---------- | --------------------------------- | -------------------------------------------- |
|
|
2888
|
+
| `default` | — | `<template #default>…</template>` | 被包住的应用内容，继承 Element Plus 当前语言 |
|
|
2745
2889
|
|
|
2746
2890
|
**完整示例**：见 §1 简介与包结构 › 1.2.2 App.vue：根组件包一层 ZlI18nProvider
|
|
2747
2891
|
|
|
@@ -2809,9 +2953,9 @@ import { ZlIconLabel } from '@zl-ui-kit/components'
|
|
|
2809
2953
|
|
|
2810
2954
|
**插槽（slots）**
|
|
2811
2955
|
|
|
2812
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
2813
|
-
| --------- | ---------- | --------------------------------- |
|
|
2814
|
-
| `default` | — | `<template #default>…</template>` |
|
|
2956
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
2957
|
+
| --------- | ---------- | --------------------------------- | ------------------------------------ |
|
|
2958
|
+
| `default` | — | `<template #default>…</template>` | 图标后的文案；不传时退化为纯图标按钮 |
|
|
2815
2959
|
|
|
2816
2960
|
#### `ZlCornerTag`
|
|
2817
2961
|
|
|
@@ -2845,17 +2989,17 @@ import { ZlCornerTag } from '@zl-ui-kit/components'
|
|
|
2845
2989
|
|
|
2846
2990
|
**props**
|
|
2847
2991
|
|
|
2848
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
2849
|
-
| ---------- | -------------------------------------------------------------- | ------------- | ---- | --------------------- |
|
|
2850
|
-
| `icon` | `string` | — | 否 | `icon="zl:search"` |
|
|
2851
|
-
| `color` | `string` | — | 否 | `color="#409eff"` |
|
|
2852
|
-
| `position` | `'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` | `'top-right'` | 否 | `position="top-left"` |
|
|
2992
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
2993
|
+
| ---------- | -------------------------------------------------------------- | ------------- | ---- | --------------------- | ------------------------------ |
|
|
2994
|
+
| `icon` | `string` | — | 否 | `icon="zl:search"` | 文案前的图标名，走 ZlIcon 渲染 |
|
|
2995
|
+
| `color` | `string` | — | 否 | `color="#409eff"` | 背景渐变的主色，取内置主题色名 |
|
|
2996
|
+
| `position` | `'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` | `'top-right'` | 否 | `position="top-left"` | 贴在容器的哪个角，默认右上角 |
|
|
2853
2997
|
|
|
2854
2998
|
**插槽（slots）**
|
|
2855
2999
|
|
|
2856
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
2857
|
-
| --------- | ---------- | --------------------------------- |
|
|
2858
|
-
| `default` | — | `<template #default>…</template>` |
|
|
3000
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
3001
|
+
| --------- | ---------- | --------------------------------- | ------------------------ |
|
|
3002
|
+
| `default` | — | `<template #default>…</template>` | 标签文案，显示在图标之后 |
|
|
2859
3003
|
|
|
2860
3004
|
#### `ZlLayoutSwitch`
|
|
2861
3005
|
|
|
@@ -2879,10 +3023,10 @@ import { ZlLayoutSwitch } from '@zl-ui-kit/components'
|
|
|
2879
3023
|
|
|
2880
3024
|
**props**
|
|
2881
3025
|
|
|
2882
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
2883
|
-
| ------------ | ------------------- | -------- | ---- | ----------------- |
|
|
2884
|
-
| `modelValue` | `'grid' \| 'table'` | — | 否 | `v-model="value"` |
|
|
2885
|
-
| `value` | `'grid' \| 'table'` | `'grid'` | 否 | `value="grid"` |
|
|
3026
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
3027
|
+
| ------------ | ------------------- | -------- | ---- | ----------------- | ------------------------------------------------------- |
|
|
3028
|
+
| `modelValue` | `'grid' \| 'table'` | — | 否 | `v-model="value"` | 当前布局，`v-model` 绑定；未绑定时回落 `value` |
|
|
3029
|
+
| `value` | `'grid' \| 'table'` | `'grid'` | 否 | `value="grid"` | 已废弃，请用 `modelValue`；仅在未双向绑定时作为当前布局 |
|
|
2886
3030
|
|
|
2887
3031
|
**事件（emits）**
|
|
2888
3032
|
|
|
@@ -2969,9 +3113,9 @@ import { ZlPermission } from '@zl-ui-kit/components'
|
|
|
2969
3113
|
|
|
2970
3114
|
**插槽（slots）**
|
|
2971
3115
|
|
|
2972
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
2973
|
-
| --------- | ---------- | --------------------------------- |
|
|
2974
|
-
| `default` | — | `<template #default>…</template>` |
|
|
3116
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
3117
|
+
| --------- | ---------- | --------------------------------- | ---------------------- |
|
|
3118
|
+
| `default` | — | `<template #default>…</template>` | 权限命中时才渲染的内容 |
|
|
2975
3119
|
|
|
2976
3120
|
**完整示例**：见 §8 布局与权限 › ZlPermission
|
|
2977
3121
|
|
|
@@ -3009,12 +3153,12 @@ import { ZlPopconfirm } from '@zl-ui-kit/components'
|
|
|
3009
3153
|
|
|
3010
3154
|
**props**
|
|
3011
3155
|
|
|
3012
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
3013
|
-
| ------------------- | -------- | ------ | ---- | -------------------------------------- |
|
|
3014
|
-
| `title` | `string` | — | 否 | `title="标题"` |
|
|
3015
|
-
| `content` | `string` | — | 否 | `content="删除后不可恢复，是否继续？"` |
|
|
3016
|
-
| `confirmButtonText` | `string` | — | 否 | `confirm-button-text="确定"` |
|
|
3017
|
-
| `cancelButtonText` | `string` | — | 否 | `cancel-button-text="取消"` |
|
|
3156
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
3157
|
+
| ------------------- | -------- | ------ | ---- | -------------------------------------- | ----------------------------------------------- |
|
|
3158
|
+
| `title` | `string` | — | 否 | `title="标题"` | 气泡标题文案；不传且无 title 插槽时不渲染标题行 |
|
|
3159
|
+
| `content` | `string` | — | 否 | `content="删除后不可恢复，是否继续？"` | 气泡正文文案，说明该操作的后果 |
|
|
3160
|
+
| `confirmButtonText` | `string` | — | 否 | `confirm-button-text="确定"` | 确认按钮文案；不传时取 i18n 默认值 |
|
|
3161
|
+
| `cancelButtonText` | `string` | — | 否 | `cancel-button-text="取消"` | 取消按钮文案；不传时取 i18n 默认值 |
|
|
3018
3162
|
|
|
3019
3163
|
> 把 `$attrs` 透传给 `el-popover`，未列出的属性会继续下传
|
|
3020
3164
|
|
|
@@ -3027,11 +3171,11 @@ import { ZlPopconfirm } from '@zl-ui-kit/components'
|
|
|
3027
3171
|
|
|
3028
3172
|
**插槽（slots）**
|
|
3029
3173
|
|
|
3030
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
3031
|
-
| --------- | ---------- | --------------------------------- |
|
|
3032
|
-
| `default` | — | `<template #default>…</template>` |
|
|
3033
|
-
| `title` | — | `<template #title>…</template>` |
|
|
3034
|
-
| `content` | — | `<template #content>…</template>` |
|
|
3174
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
3175
|
+
| --------- | ---------- | --------------------------------- | ------------------------------------- |
|
|
3176
|
+
| `default` | — | `<template #default>…</template>` | 触发气泡的元素，点击它才会弹出 |
|
|
3177
|
+
| `title` | — | `<template #title>…</template>` | 自定义标题行内容，缺省渲染 title 文案 |
|
|
3178
|
+
| `content` | — | `<template #content>…</template>` | 自定义正文内容，缺省渲染 content 文案 |
|
|
3035
3179
|
|
|
3036
3180
|
**完整示例**：见 §7 表单与交互组件 › ZlDrawer / ZlPopconfirm / ZlSwitch
|
|
3037
3181
|
|
|
@@ -3067,11 +3211,11 @@ import { ZlRadioTag } from '@zl-ui-kit/components'
|
|
|
3067
3211
|
|
|
3068
3212
|
**props**
|
|
3069
3213
|
|
|
3070
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
3071
|
-
| ------------ | ------------------------------- | ---------- | ---- | -------------------- |
|
|
3072
|
-
| `modelValue` | `string \| number \| undefined` | — | 否 | `v-model="value"` |
|
|
3073
|
-
| `options` | `RadioTagOption[]` | `() => []` | 否 | `:options="options"` |
|
|
3074
|
-
| `size` | `'mini' \| 'small' \| 'medium'` | `'small'` | 否 | `size="mini"` |
|
|
3214
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
3215
|
+
| ------------ | ------------------------------- | ---------- | ---- | -------------------- | -------------------------------- |
|
|
3216
|
+
| `modelValue` | `string \| number \| undefined` | — | 否 | `v-model="value"` | 选中项的 value，`v-model` 绑定 |
|
|
3217
|
+
| `options` | `RadioTagOption[]` | `() => []` | 否 | `:options="options"` | 标签选项列表，`value` 作为选中值 |
|
|
3218
|
+
| `size` | `'mini' \| 'small' \| 'medium'` | `'small'` | 否 | `size="mini"` | 标签尺寸，默认 small |
|
|
3075
3219
|
|
|
3076
3220
|
**事件（emits）**
|
|
3077
3221
|
|
|
@@ -3081,9 +3225,9 @@ import { ZlRadioTag } from '@zl-ui-kit/components'
|
|
|
3081
3225
|
|
|
3082
3226
|
**插槽（slots）**
|
|
3083
3227
|
|
|
3084
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
3085
|
-
| --------- | ------------------------------------------------------- | ----------------------------------------------------- |
|
|
3086
|
-
| `default` | `v-bind="{ item, checked: model === item.value }"` 展开 | `<template #default="{ item, checked }">…</template>` |
|
|
3228
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
3229
|
+
| --------- | ------------------------------------------------------- | ----------------------------------------------------- | ------------------------------------------ |
|
|
3230
|
+
| `default` | `v-bind="{ item, checked: model === item.value }"` 展开 | `<template #default="{ item, checked }">…</template>` | 单个标签的内容，可用 item / checked 自定义 |
|
|
3087
3231
|
|
|
3088
3232
|
**完整示例**：见 §7 表单与交互组件 › ZlRadioTag / ZlCheckboxTag / ZlCheckAll / ZlSorter / ZlAddSub / ZlLayoutSwitch
|
|
3089
3233
|
|
|
@@ -3129,7 +3273,7 @@ import { ZlSearch } from '@zl-ui-kit/components'
|
|
|
3129
3273
|
| `immediate` | `boolean` | `true` | 否 | `:immediate="false"` | 挂载后立即执行一次查询（默认 true） |
|
|
3130
3274
|
| `disabled` | `boolean` | `false` | 否 | `disabled` | 禁用全部查询项 |
|
|
3131
3275
|
| `labelsVisible` | `boolean` | `undefined` | 否 | `labels-visible` | 是否展示「筛选条件」标签行；不传时按「是否发生溢出」自动判定 |
|
|
3132
|
-
| `showLabels` | `boolean` | `undefined` | 否 | `show-labels` |
|
|
3276
|
+
| `showLabels` | `boolean` | `undefined` | 否 | `show-labels` | 已废弃，请用 `labelsVisible` |
|
|
3133
3277
|
|
|
3134
3278
|
**事件（emits）**
|
|
3135
3279
|
|
|
@@ -3140,10 +3284,10 @@ import { ZlSearch } from '@zl-ui-kit/components'
|
|
|
3140
3284
|
|
|
3141
3285
|
**插槽（slots）**
|
|
3142
3286
|
|
|
3143
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
3144
|
-
| --------- | --------------------- | ---------------------------------------- |
|
|
3145
|
-
| `[slot]` | `v-bind="scope"` 展开 | `<template #[slot]="scope">…</template>` |
|
|
3146
|
-
| `actions` | — | `<template #actions>…</template>` |
|
|
3287
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
3288
|
+
| --------- | --------------------- | ---------------------------------------- | ------------------------------------------------- |
|
|
3289
|
+
| `[slot]` | `v-bind="scope"` 展开 | `<template #[slot]="scope">…</template>` | 动态插槽：按查询项的 model 命名，替换该项默认控件 |
|
|
3290
|
+
| `actions` | — | `<template #actions>…</template>` | 查询条下方的自定义操作区 |
|
|
3147
3291
|
|
|
3148
3292
|
**暴露（defineExpose）**
|
|
3149
3293
|
|
|
@@ -3199,11 +3343,11 @@ import { ZlSearchTable } from '@zl-ui-kit/components'
|
|
|
3199
3343
|
|
|
3200
3344
|
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
3201
3345
|
| ------------ | ----------------------------------------------------------------------------------------------------------------------------- | ---------- | ---- | --------------------------- | --------------------------------------------------------------- |
|
|
3202
|
-
| `immediate` | `boolean` | `true` | 否 | `:immediate="false"` |
|
|
3346
|
+
| `immediate` | `boolean` | `true` | 否 | `:immediate="false"` | 挂载后立即请求首屏数据，默认 true |
|
|
3203
3347
|
| `request` | `\| ((...args: any[]) => Promise<any>) \| { service: (...args: any[]) => Promise<any>; options?: Record<string, any> }` | — | 是 | `:request="async () => {}"` | 请求函数，或 { service, options }（usePageableRequest options） |
|
|
3204
|
-
| `columns` | `TableColumn[]` | `() => []` | 否 | `:columns="columns"` |
|
|
3205
|
-
| `queryItems` | `SearchItem[]` | `() => []` | 否 | `:query-items="queryItems"` |
|
|
3206
|
-
| `pagination` | `Record<string, any> \| boolean` | — | 否 | `:pagination="{}"` |
|
|
3348
|
+
| `columns` | `TableColumn[]` | `() => []` | 否 | `:columns="columns"` | 表格列定义，决定有哪些列及其渲染方式 |
|
|
3349
|
+
| `queryItems` | `SearchItem[]` | `() => []` | 否 | `:query-items="queryItems"` | 查询区的表单项；为空且不传 search-actions 插槽时不渲染查询条 |
|
|
3350
|
+
| `pagination` | `Record<string, any> \| boolean` | — | 否 | `:pagination="{}"` | 分页配置；传 false 关闭分页 |
|
|
3207
3351
|
|
|
3208
3352
|
> 把 `$attrs` 透传给 `ZlTable`，未列出的属性会继续下传
|
|
3209
3353
|
|
|
@@ -3215,11 +3359,11 @@ import { ZlSearchTable } from '@zl-ui-kit/components'
|
|
|
3215
3359
|
|
|
3216
3360
|
**插槽（slots）**
|
|
3217
3361
|
|
|
3218
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
3219
|
-
| ---------------- | --------------------- | --------------------------------------------- |
|
|
3220
|
-
| `search-actions` | — | `<template #search-actions>…</template>` |
|
|
3221
|
-
| `[slot.slot]` | `v-bind="scope"` 展开 | `<template #[slot.slot]="scope">…</template>` |
|
|
3222
|
-
| `[slot]` | `v-bind="scope"` 展开 | `<template #[slot]="scope">…</template>` |
|
|
3362
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
3363
|
+
| ---------------- | --------------------- | --------------------------------------------- | ---------------------------------------------------- |
|
|
3364
|
+
| `search-actions` | — | `<template #search-actions>…</template>` | 查询条右侧的操作区，转发给 ZlSearch 的 actions |
|
|
3365
|
+
| `[slot.slot]` | `v-bind="scope"` 展开 | `<template #[slot.slot]="scope">…</template>` | 动态插槽：search- 前缀的插槽去前缀后透传给 ZlSearch |
|
|
3366
|
+
| `[slot]` | `v-bind="scope"` 展开 | `<template #[slot]="scope">…</template>` | 动态插槽：其余插槽按原名透传给 ZlTable，可作为列插槽 |
|
|
3223
3367
|
|
|
3224
3368
|
**暴露（defineExpose）**
|
|
3225
3369
|
|
|
@@ -3264,20 +3408,20 @@ import { ZlSection } from '@zl-ui-kit/components'
|
|
|
3264
3408
|
|
|
3265
3409
|
**props**
|
|
3266
3410
|
|
|
3267
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
3268
|
-
| ------------- | --------- | ------ | ---- | ------------------ |
|
|
3269
|
-
| `icon` | `string` | — | 否 | `icon="zl:search"` | 标题图标名（zl: 前缀自动补全）
|
|
3270
|
-
| `title` | `string` | — | 否 | `title="标题"` |
|
|
3271
|
-
| `block` | `boolean` | — | 否 | `block` | 块状布局（内容区滚动）
|
|
3272
|
-
| `blockHidden` | `boolean` | — | 否 | `block-hidden` | 块状布局且隐藏溢出
|
|
3411
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
3412
|
+
| ------------- | --------- | ------ | ---- | ------------------ | ------------------------------------------- |
|
|
3413
|
+
| `icon` | `string` | — | 否 | `icon="zl:search"` | 标题图标名（zl: 前缀自动补全） |
|
|
3414
|
+
| `title` | `string` | — | 否 | `title="标题"` | 标题文案；不传且无 actions 插槽时不渲染头部 |
|
|
3415
|
+
| `block` | `boolean` | — | 否 | `block` | 块状布局（内容区滚动） |
|
|
3416
|
+
| `blockHidden` | `boolean` | — | 否 | `block-hidden` | 块状布局且隐藏溢出 |
|
|
3273
3417
|
|
|
3274
3418
|
**插槽（slots）**
|
|
3275
3419
|
|
|
3276
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
3277
|
-
| --------------- | ---------- | --------------------------------------- |
|
|
3278
|
-
| `title-prepend` | — | `<template #title-prepend>…</template>` |
|
|
3279
|
-
| `actions` | — | `<template #actions>…</template>` |
|
|
3280
|
-
| `default` | — | `<template #default>…</template>` |
|
|
3420
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
3421
|
+
| --------------- | ---------- | --------------------------------------- | ---------------------------------------------- |
|
|
3422
|
+
| `title-prepend` | — | `<template #title-prepend>…</template>` | 标题文字之后的附加内容，如数量、角标 |
|
|
3423
|
+
| `actions` | — | `<template #actions>…</template>` | 头部右侧的操作区；传了它即使无标题也会渲染头部 |
|
|
3424
|
+
| `default` | — | `<template #default>…</template>` | 区块主体内容 |
|
|
3281
3425
|
|
|
3282
3426
|
#### `ZlSorter`
|
|
3283
3427
|
|
|
@@ -3311,10 +3455,10 @@ import { ZlSorter } from '@zl-ui-kit/components'
|
|
|
3311
3455
|
|
|
3312
3456
|
**props**
|
|
3313
3457
|
|
|
3314
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
3315
|
-
| ------------ | ----------------------- | ------ | ---- | ----------------- |
|
|
3316
|
-
| `modelValue` | `'' \| 'asc' \| 'desc'` | — | 否 | `v-model="value"` |
|
|
3317
|
-
| `label` | `string` | — | 否 | `label="标签"` |
|
|
3458
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
3459
|
+
| ------------ | ----------------------- | ------ | ---- | ----------------- | ----------------------------------------- |
|
|
3460
|
+
| `modelValue` | `'' \| 'asc' \| 'desc'` | — | 否 | `v-model="value"` | 当前排序状态，空串表示不排序（`v-model`） |
|
|
3461
|
+
| `label` | `string` | — | 否 | `label="标签"` | 字段文案；可被默认插槽覆盖 |
|
|
3318
3462
|
|
|
3319
3463
|
**事件（emits）**
|
|
3320
3464
|
|
|
@@ -3325,9 +3469,9 @@ import { ZlSorter } from '@zl-ui-kit/components'
|
|
|
3325
3469
|
|
|
3326
3470
|
**插槽（slots）**
|
|
3327
3471
|
|
|
3328
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
3329
|
-
| --------- | ---------- | --------------------------------- |
|
|
3330
|
-
| `default` | — | `<template #default>…</template>` |
|
|
3472
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
3473
|
+
| --------- | ---------- | --------------------------------- | ------------------------------ |
|
|
3474
|
+
| `default` | — | `<template #default>…</template>` | 自定义字段文案，缺省显示 label |
|
|
3331
3475
|
|
|
3332
3476
|
**完整示例**：见 §7 表单与交互组件 › ZlRadioTag / ZlCheckboxTag / ZlCheckAll / ZlSorter / ZlAddSub / ZlLayoutSwitch
|
|
3333
3477
|
|
|
@@ -3355,10 +3499,10 @@ import { ZlSorterList } from '@zl-ui-kit/components'
|
|
|
3355
3499
|
|
|
3356
3500
|
**props**
|
|
3357
3501
|
|
|
3358
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
3359
|
-
| ---------- | -------------- | ---------- | ---- | -------------------- |
|
|
3360
|
-
| `sorters` | `SorterItem[]` | `() => []` | 否 | `:sorters="sorters"` |
|
|
3361
|
-
| `multiple` | `boolean` | `false` | 否 | `multiple` |
|
|
3502
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
3503
|
+
| ---------- | -------------- | ---------- | ---- | -------------------- | ---------------------------------------------- |
|
|
3504
|
+
| `sorters` | `SorterItem[]` | `() => []` | 否 | `:sorters="sorters"` | 可排序字段列表，model 为字段名 |
|
|
3505
|
+
| `multiple` | `boolean` | `false` | 否 | `multiple` | 允许多字段同时排序；关闭时只保留最后点击的字段 |
|
|
3362
3506
|
|
|
3363
3507
|
**事件（emits）**
|
|
3364
3508
|
|
|
@@ -3399,14 +3543,14 @@ import { ZlSwitch } from '@zl-ui-kit/components'
|
|
|
3399
3543
|
|
|
3400
3544
|
**props**
|
|
3401
3545
|
|
|
3402
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
3403
|
-
| ---------------- | ----------------------------- | ------- | ---- | ----------------------------------- |
|
|
3404
|
-
| `modelValue` | `boolean \| string \| number` | — | 否 | `v-model="value"` |
|
|
3405
|
-
| `defaultChecked` | `boolean` | `false` | 否 | `default-checked` |
|
|
3406
|
-
| `checkedValue` | `boolean \| string \| number` | `true` | 否 | `:checked-value="checkedValue"` |
|
|
3407
|
-
| `uncheckedValue` | `boolean \| string \| number` | `false` | 否 | `:unchecked-value="uncheckedValue"` |
|
|
3408
|
-
| `checkedText` | `string` | — | 否 | `checked-text="开"` |
|
|
3409
|
-
| `uncheckedText` | `string` | — | 否 | `unchecked-text="关"` |
|
|
3546
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
3547
|
+
| ---------------- | ----------------------------- | ------- | ---- | ----------------------------------- | ---------------------------- |
|
|
3548
|
+
| `modelValue` | `boolean \| string \| number` | — | 否 | `v-model="value"` | 当前开关值，支持受控双向绑定 |
|
|
3549
|
+
| `defaultChecked` | `boolean` | `false` | 否 | `default-checked` | 非受控模式下的初始选中状态 |
|
|
3550
|
+
| `checkedValue` | `boolean \| string \| number` | `true` | 否 | `:checked-value="checkedValue"` | 选中状态对应的提交值 |
|
|
3551
|
+
| `uncheckedValue` | `boolean \| string \| number` | `false` | 否 | `:unchecked-value="uncheckedValue"` | 未选中状态对应的提交值 |
|
|
3552
|
+
| `checkedText` | `string` | — | 否 | `checked-text="开"` | 选中时显示的文案 |
|
|
3553
|
+
| `uncheckedText` | `string` | — | 否 | `unchecked-text="关"` | 未选中时显示的文案 |
|
|
3410
3554
|
|
|
3411
3555
|
> 把 `$attrs` 透传给 `el-switch`，未列出的属性会继续下传
|
|
3412
3556
|
|
|
@@ -3418,10 +3562,10 @@ import { ZlSwitch } from '@zl-ui-kit/components'
|
|
|
3418
3562
|
|
|
3419
3563
|
**插槽（slots）**
|
|
3420
3564
|
|
|
3421
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
3422
|
-
| ----------- | ---------- | ----------------------------------- |
|
|
3423
|
-
| `checked` | — | `<template #checked>…</template>` |
|
|
3424
|
-
| `unchecked` | — | `<template #unchecked>…</template>` |
|
|
3565
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
3566
|
+
| ----------- | ---------- | ----------------------------------- | ---------------------- |
|
|
3567
|
+
| `checked` | — | `<template #checked>…</template>` | 选中状态的自定义文案 |
|
|
3568
|
+
| `unchecked` | — | `<template #unchecked>…</template>` | 未选中状态的自定义文案 |
|
|
3425
3569
|
|
|
3426
3570
|
**完整示例**：见 §7 表单与交互组件 › ZlDrawer / ZlPopconfirm / ZlSwitch
|
|
3427
3571
|
|
|
@@ -3463,11 +3607,11 @@ import { ZlTable } from '@zl-ui-kit/components'
|
|
|
3463
3607
|
|
|
3464
3608
|
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
3465
3609
|
| -------------- | -------------------------------- | -------- | ---- | -------------------- | ---------------------------------------------------------------------------- |
|
|
3466
|
-
| `columns` | `TableColumn[]` | — | 是 | `:columns="columns"` |
|
|
3610
|
+
| `columns` | `TableColumn[]` | — | 是 | `:columns="columns"` | 表格列配置，定义字段、标题与渲染方式 |
|
|
3467
3611
|
| `data` | `any[] \| Record<string, any>` | — | 是 | `:data="data"` | 数组（本地数据）或 { [dataKey]: rows, pageNum, pageSize, total }（分页数据） |
|
|
3468
|
-
| `dataKey` | `string` | `'rows'` | 否 | `data-key="rows"` |
|
|
3612
|
+
| `dataKey` | `string` | `'rows'` | 否 | `data-key="rows"` | 分页数据中的行数组字段名 |
|
|
3469
3613
|
| `expandAction` | `boolean` | `false` | 否 | `expand-action` | actions 列宽加宽（参考实现 expandAction 语义） |
|
|
3470
|
-
| `pagination` | `Record<string, any> \| boolean` | — | 否 | `:pagination="{}"` |
|
|
3614
|
+
| `pagination` | `Record<string, any> \| boolean` | — | 否 | `:pagination="{}"` | 分页配置，设为 false 时隐藏分页 |
|
|
3471
3615
|
| `loading` | `boolean` | `false` | 否 | `loading` | 表格 loading（作用于表格区） |
|
|
3472
3616
|
|
|
3473
3617
|
> 把 `$attrs` 透传给 `el-table`，未列出的属性会继续下传
|
|
@@ -3482,11 +3626,11 @@ import { ZlTable } from '@zl-ui-kit/components'
|
|
|
3482
3626
|
|
|
3483
3627
|
**插槽（slots）**
|
|
3484
3628
|
|
|
3485
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
3486
|
-
| ------------------------- | --------------------- | --------------------------------------------------------- |
|
|
3487
|
-
| `expand` | `v-bind="scope"` 展开 | `<template #expand="scope">…</template>` |
|
|
3488
|
-
| `[column.headerSlotName]` | `v-bind="scope"` 展开 | `<template #[column.headerSlotName]="scope">…</template>` |
|
|
3489
|
-
| `[column.slotName]` | `v-bind="scope"` 展开 | `<template #[column.slotName]="scope">…</template>` |
|
|
3629
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
3630
|
+
| ------------------------- | --------------------- | --------------------------------------------------------- | ---------------------------------------- |
|
|
3631
|
+
| `expand` | `v-bind="scope"` 展开 | `<template #expand="scope">…</template>` | 展开行内容，参数为表格行上下文 |
|
|
3632
|
+
| `[column.headerSlotName]` | `v-bind="scope"` 展开 | `<template #[column.headerSlotName]="scope">…</template>` | 按列字段生成 header-* 名，参数为列上下文 |
|
|
3633
|
+
| `[column.slotName]` | `v-bind="scope"` 展开 | `<template #[column.slotName]="scope">…</template>` | 按 slot 或字段名生成，参数为单元格上下文 |
|
|
3490
3634
|
|
|
3491
3635
|
**完整示例**：见 §6 数据型组件 + useRequest 体系（核心） › ③ ZlTable + ZlPagination —— 自行 usePaginationRequest
|
|
3492
3636
|
|
|
@@ -3527,23 +3671,23 @@ import { ZlTabs } from '@zl-ui-kit/components'
|
|
|
3527
3671
|
|
|
3528
3672
|
**props**
|
|
3529
3673
|
|
|
3530
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
3531
|
-
| --------- | --------- | ---------- | ---- | ------------------- |
|
|
3532
|
-
| `tabs` | `any[]` | `() => []` | 否 | `:tabs="[]"` |
|
|
3533
|
-
| `border` | `boolean` | `true` | 否 | `:border="false"` |
|
|
3534
|
-
| `fit` | `boolean` | — | 否 | `fit` |
|
|
3535
|
-
| `darkNav` | `boolean` | `true` | 否 | `:dark-nav="false"` |
|
|
3674
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
3675
|
+
| --------- | --------- | ---------- | ---- | ------------------- | --------------------------------- |
|
|
3676
|
+
| `tabs` | `any[]` | `() => []` | 否 | `:tabs="[]"` | 页签配置列表，以 key 关联内容插槽 |
|
|
3677
|
+
| `border` | `boolean` | `true` | 否 | `:border="false"` | 是否显示页签导航分隔线，默认显示 |
|
|
3678
|
+
| `fit` | `boolean` | — | 否 | `fit` | 是否撑满容器并让内容区滚动 |
|
|
3679
|
+
| `darkNav` | `boolean` | `true` | 否 | `:dark-nav="false"` | 是否启用导航背景色，默认启用 |
|
|
3536
3680
|
|
|
3537
3681
|
> 选项式组件（`defineComponent`），props 定义在 `props: {}` 中
|
|
3538
3682
|
> 把 `$attrs` 透传给内部组件，未列出的属性会继续下传
|
|
3539
3683
|
|
|
3540
3684
|
**插槽（slots）**
|
|
3541
3685
|
|
|
3542
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
3543
|
-
| --------- | ---------- | --------------------------------- |
|
|
3544
|
-
| `[key]` | — | `<template #[key]>…</template>` |
|
|
3545
|
-
| `default` | — | `<template #default>…</template>` |
|
|
3546
|
-
| `extra` | — | `<template #extra>…</template>` |
|
|
3686
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
3687
|
+
| --------- | ---------- | --------------------------------- | ----------------------------------------------------------- |
|
|
3688
|
+
| `[key]` | — | `<template #[key]>…</template>` | 会对返回值调用 .some()，拿到单个 vnode 会直接抛 TypeError。 |
|
|
3689
|
+
| `default` | — | `<template #default>…</template>` | 追加在页签列表之后的内容（不在任何 ElTabPane 内） |
|
|
3690
|
+
| `extra` | — | `<template #extra>…</template>` | 页签栏右侧的附加操作区 |
|
|
3547
3691
|
|
|
3548
3692
|
**完整示例**：见 §7 表单与交互组件 › ZlTabs / ZlDynamicComponent / ZlGrid
|
|
3549
3693
|
|
|
@@ -3579,23 +3723,23 @@ import { ZlTag } from '@zl-ui-kit/components'
|
|
|
3579
3723
|
|
|
3580
3724
|
**props**
|
|
3581
3725
|
|
|
3582
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
3583
|
-
| ----------------- | ------------------------------- | ----------- | ---- | -------------------------- |
|
|
3584
|
-
| `size` | `'mini' \| 'small' \| 'medium'` | `undefined` | 否 | `size="mini"` |
|
|
3585
|
-
| `color` | `string` | `undefined` | 否 | `color="#409eff"` |
|
|
3586
|
-
| `bordered` | `boolean` | `false` | 否 | `bordered` |
|
|
3587
|
-
| `fill` | `boolean` | `false` | 否 | `fill` |
|
|
3588
|
-
| `disabled` | `boolean` | `false` | 否 | `disabled` |
|
|
3589
|
-
| `icon` | `string` | `undefined` | 否 | `icon="zl:search"` |
|
|
3590
|
-
| `dotIcon` | `boolean` | `false` | 否 | `dot-icon` |
|
|
3591
|
-
| `iconColor` | `string` | `undefined` | 否 | `icon-color="#409eff"` |
|
|
3592
|
-
| `closable` | `boolean` | `false` | 否 | `closable` |
|
|
3593
|
-
| `visible` | `boolean \| undefined` | `undefined` | 否 | `v-model:visible="value"` |
|
|
3594
|
-
| `defaultVisible` | `boolean` | `true` | 否 | `:default-visible="false"` |
|
|
3595
|
-
| `selectable` | `boolean` | `false` | 否 | `selectable` |
|
|
3596
|
-
| `selected` | `boolean \| undefined` | `undefined` | 否 | `v-model:selected="value"` |
|
|
3597
|
-
| `defaultSelected` | `boolean` | `false` | 否 | `default-selected` |
|
|
3598
|
-
| `rounded` | `boolean` | `false` | 否 | `rounded` |
|
|
3726
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
3727
|
+
| ----------------- | ------------------------------- | ----------- | ---- | -------------------------- | -------------------------------- |
|
|
3728
|
+
| `size` | `'mini' \| 'small' \| 'medium'` | `undefined` | 否 | `size="mini"` | 标签尺寸档位，默认 small |
|
|
3729
|
+
| `color` | `string` | `undefined` | 否 | `color="#409eff"` | 标签主题色名称 |
|
|
3730
|
+
| `bordered` | `boolean` | `false` | 否 | `bordered` | 是否显示标签边框 |
|
|
3731
|
+
| `fill` | `boolean` | `false` | 否 | `fill` | 是否显示填充背景，选择模式下无效 |
|
|
3732
|
+
| `disabled` | `boolean` | `false` | 否 | `disabled` | 是否应用禁用样式并隐藏关闭按钮 |
|
|
3733
|
+
| `icon` | `string` | `undefined` | 否 | `icon="zl:search"` | 标签前置图标名称 |
|
|
3734
|
+
| `dotIcon` | `boolean` | `false` | 否 | `dot-icon` | 是否使用圆点图标 |
|
|
3735
|
+
| `iconColor` | `string` | `undefined` | 否 | `icon-color="#409eff"` | 前置图标主题色名称 |
|
|
3736
|
+
| `closable` | `boolean` | `false` | 否 | `closable` | 是否显示关闭按钮 |
|
|
3737
|
+
| `visible` | `boolean \| undefined` | `undefined` | 否 | `v-model:visible="value"` | 受控模式下的显示状态 |
|
|
3738
|
+
| `defaultVisible` | `boolean` | `true` | 否 | `:default-visible="false"` | 非受控模式下的初始显示状态 |
|
|
3739
|
+
| `selectable` | `boolean` | `false` | 否 | `selectable` | 是否启用点击选择 |
|
|
3740
|
+
| `selected` | `boolean \| undefined` | `undefined` | 否 | `v-model:selected="value"` | 受控模式下的选中状态 |
|
|
3741
|
+
| `defaultSelected` | `boolean` | `false` | 否 | `default-selected` | 非受控模式下的初始选中状态 |
|
|
3742
|
+
| `rounded` | `boolean` | `false` | 否 | `rounded` | 是否使用全圆角样式 |
|
|
3599
3743
|
|
|
3600
3744
|
**事件（emits）**
|
|
3601
3745
|
|
|
@@ -3608,9 +3752,9 @@ import { ZlTag } from '@zl-ui-kit/components'
|
|
|
3608
3752
|
|
|
3609
3753
|
**插槽（slots）**
|
|
3610
3754
|
|
|
3611
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
3612
|
-
| --------- | ---------- | --------------------------------- |
|
|
3613
|
-
| `default` | — | `<template #default>…</template>` |
|
|
3755
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
3756
|
+
| --------- | ---------- | --------------------------------- | ------------ |
|
|
3757
|
+
| `default` | — | `<template #default>…</template>` | 标签文本内容 |
|
|
3614
3758
|
|
|
3615
3759
|
**完整示例**：见 §5 通用展示组件 › ZlTag — 标签
|
|
3616
3760
|
|
|
@@ -3646,15 +3790,15 @@ import { ZlText } from '@zl-ui-kit/components'
|
|
|
3646
3790
|
|
|
3647
3791
|
**props**
|
|
3648
3792
|
|
|
3649
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
3650
|
-
| ------------ | ----------------------------- | ------ | ---- | --------------------------- |
|
|
3651
|
-
| `modelValue` | `string \| number \| boolean` | — | 否 | `:model-value="modelValue"` |
|
|
3793
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
3794
|
+
| ------------ | ----------------------------- | ------ | ---- | --------------------------- | ------------------------ |
|
|
3795
|
+
| `modelValue` | `string \| number \| boolean` | — | 否 | `:model-value="modelValue"` | 未使用插槽时显示的文本值 |
|
|
3652
3796
|
|
|
3653
3797
|
**插槽（slots）**
|
|
3654
3798
|
|
|
3655
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
3656
|
-
| --------- | ---------- | --------------------------------- |
|
|
3657
|
-
| `default` | — | `<template #default>…</template>` |
|
|
3799
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
3800
|
+
| --------- | ---------- | --------------------------------- | ------------------------------- |
|
|
3801
|
+
| `default` | — | `<template #default>…</template>` | 自定义文本内容，覆盖 modelValue |
|
|
3658
3802
|
|
|
3659
3803
|
#### `ZlTitle`
|
|
3660
3804
|
|
|
@@ -3690,21 +3834,21 @@ import { ZlTitle } from '@zl-ui-kit/components'
|
|
|
3690
3834
|
|
|
3691
3835
|
**props**
|
|
3692
3836
|
|
|
3693
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
3694
|
-
| ------------- | -------------------------------- | ------ | ---- | ---------------------- |
|
|
3695
|
-
| `title` | `string` | — | 否 | `title="标题"` |
|
|
3696
|
-
| `description` | `string` | — | 否 | `description="副标题"` |
|
|
3697
|
-
| `marker` | `boolean` | `true` | 否 | `:marker="false"` |
|
|
3698
|
-
| `tooltip` | `string` | — | 否 | `tooltip="提示内容"` |
|
|
3699
|
-
| `size` | `'small' \| 'medium' \| 'large'` | — | 否 | `size="small"` |
|
|
3837
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
3838
|
+
| ------------- | -------------------------------- | ------ | ---- | ---------------------- | ------------------------------ |
|
|
3839
|
+
| `title` | `string` | — | 否 | `title="标题"` | 默认标题文本 |
|
|
3840
|
+
| `description` | `string` | — | 否 | `description="副标题"` | 标题后的描述文本 |
|
|
3841
|
+
| `marker` | `boolean` | `true` | 否 | `:marker="false"` | 是否显示标题左侧标记，默认显示 |
|
|
3842
|
+
| `tooltip` | `string` | — | 否 | `tooltip="提示内容"` | 标题旁帮助图标的提示内容 |
|
|
3843
|
+
| `size` | `'small' \| 'medium' \| 'large'` | — | 否 | `size="small"` | 标题文字尺寸档位 |
|
|
3700
3844
|
|
|
3701
3845
|
**插槽（slots）**
|
|
3702
3846
|
|
|
3703
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
3704
|
-
| ------------- | ---------- | ------------------------------------- |
|
|
3705
|
-
| `default` | — | `<template #default>…</template>` |
|
|
3706
|
-
| `description` | — | `<template #description>…</template>` |
|
|
3707
|
-
| `extra` | — | `<template #extra>…</template>` |
|
|
3847
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
3848
|
+
| ------------- | ---------- | ------------------------------------- | ---------------------------------- |
|
|
3849
|
+
| `default` | — | `<template #default>…</template>` | 自定义标题内容，覆盖 title |
|
|
3850
|
+
| `description` | — | `<template #description>…</template>` | 自定义描述内容，需设置 description |
|
|
3851
|
+
| `extra` | — | `<template #extra>…</template>` | 标题右侧附加内容 |
|
|
3708
3852
|
|
|
3709
3853
|
**完整示例**：见 §5 通用展示组件 › ZlTitle — 区块标题
|
|
3710
3854
|
|
|
@@ -3742,21 +3886,21 @@ import { ZlUpload } from '@zl-ui-kit/components'
|
|
|
3742
3886
|
|
|
3743
3887
|
**props**
|
|
3744
3888
|
|
|
3745
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
3746
|
-
| ----------------------- | --------------------------------------------------------------- | ----------- | ---- | ----------------------------------------- |
|
|
3747
|
-
| `request` | `(form: FormData, config: Record<string, any>) => Promise<any>` | — | 否 | `:request="async () => {}"` | 自定义上传函数（form, config）→ Promise
|
|
3748
|
-
| `modelValue` | `string \| any[]` | `''` | 否 | `v-model="value"` |
|
|
3749
|
-
| `accept` | `string` | — | 否 | `accept=".png,.jpg,.pdf"` |
|
|
3750
|
-
| `maxSize` | `number` | — | 否 | `:max-size="1"` | 单文件大小上限（MB）
|
|
3751
|
-
| `limit` | `number` | — | 否 | `:limit="1"` |
|
|
3752
|
-
| `tip` | `string` | — | 否 | `tip="支持批量上传，单个文件不超过 10MB"` |
|
|
3753
|
-
| `separator` | `string` | `';'` | 否 | `separator=","` | 多路径分隔符（modelValue 为字符串时）
|
|
3754
|
-
| `responseUrlKey` | `string` | `'meta'` | 否 | `response-url-key="url"` | 响应中文件地址的取值键
|
|
3755
|
-
| `downloadButtonVisible` | `boolean` | `undefined` | 否 | `download-button-visible` | 是否展示「下载」按钮（默认 true）
|
|
3756
|
-
| `tipVisible` | `boolean` | `undefined` | 否 | `tip-visible` | 是否展示提示文案（默认 true）
|
|
3757
|
-
| `showDownloadButton` | `boolean` | `undefined` | 否 | `show-download-button` |
|
|
3758
|
-
| `showTip` | `boolean` | `undefined` | 否 | `show-tip` |
|
|
3759
|
-
| `verifySpace` | `boolean` | `false` | 否 | `verify-space` | 校验文件名不得含空格
|
|
3889
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
3890
|
+
| ----------------------- | --------------------------------------------------------------- | ----------- | ---- | ----------------------------------------- | ----------------------------------------- |
|
|
3891
|
+
| `request` | `(form: FormData, config: Record<string, any>) => Promise<any>` | — | 否 | `:request="async () => {}"` | 自定义上传函数（form, config）→ Promise |
|
|
3892
|
+
| `modelValue` | `string \| any[]` | `''` | 否 | `v-model="value"` | 已上传文件路径或文件列表 |
|
|
3893
|
+
| `accept` | `string` | — | 否 | `accept=".png,.jpg,.pdf"` | 允许上传的文件格式 |
|
|
3894
|
+
| `maxSize` | `number` | — | 否 | `:max-size="1"` | 单文件大小上限（MB） |
|
|
3895
|
+
| `limit` | `number` | — | 否 | `:limit="1"` | 最多允许上传的文件数量 |
|
|
3896
|
+
| `tip` | `string` | — | 否 | `tip="支持批量上传，单个文件不超过 10MB"` | 上传区域下方的自定义提示 |
|
|
3897
|
+
| `separator` | `string` | `';'` | 否 | `separator=","` | 多路径分隔符（modelValue 为字符串时） |
|
|
3898
|
+
| `responseUrlKey` | `string` | `'meta'` | 否 | `response-url-key="url"` | 响应中文件地址的取值键 |
|
|
3899
|
+
| `downloadButtonVisible` | `boolean` | `undefined` | 否 | `download-button-visible` | 是否展示「下载」按钮（默认 true） |
|
|
3900
|
+
| `tipVisible` | `boolean` | `undefined` | 否 | `tip-visible` | 是否展示提示文案（默认 true） |
|
|
3901
|
+
| `showDownloadButton` | `boolean` | `undefined` | 否 | `show-download-button` | 已废弃，请用 `downloadButtonVisible` 代替 |
|
|
3902
|
+
| `showTip` | `boolean` | `undefined` | 否 | `show-tip` | 已废弃，请用 `tipVisible` 代替 |
|
|
3903
|
+
| `verifySpace` | `boolean` | `false` | 否 | `verify-space` | 校验文件名不得含空格 |
|
|
3760
3904
|
|
|
3761
3905
|
**事件（emits）**
|
|
3762
3906
|
|
|
@@ -3766,9 +3910,9 @@ import { ZlUpload } from '@zl-ui-kit/components'
|
|
|
3766
3910
|
|
|
3767
3911
|
**插槽（slots）**
|
|
3768
3912
|
|
|
3769
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
3770
|
-
| --------- | ---------- | --------------------------------- |
|
|
3771
|
-
| `default` | — | `<template #default>…</template>` |
|
|
3913
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
3914
|
+
| --------- | ---------- | --------------------------------- | -------------------- |
|
|
3915
|
+
| `default` | — | `<template #default>…</template>` | 自定义上传触发器内容 |
|
|
3772
3916
|
|
|
3773
3917
|
**完整示例**：见 §6 数据型组件 + useRequest 体系（核心） › ⑥ ZlUpload —— 传上传 service
|
|
3774
3918
|
|
|
@@ -3814,15 +3958,15 @@ import { ZlTree } from '@zl-ui-kit/components'
|
|
|
3814
3958
|
| `inputSearchProps` | `Record<string, any>` | — | 否 | `:input-search-props="{}"` | 搜索框透传（el-input 属性） |
|
|
3815
3959
|
| `filterTreeNode` | `(value: string, data: any) => boolean` | — | 否 | `:filter-tree-node="() => {}"` | 自定义过滤函数（缺省按 title 包含匹配） |
|
|
3816
3960
|
| `disableFilter` | `boolean` | — | 否 | `disable-filter` | 关闭搜索框 |
|
|
3817
|
-
| `loading` | `boolean` | — | 否 | `loading` |
|
|
3961
|
+
| `loading` | `boolean` | — | 否 | `loading` | 是否显示树区域加载状态 |
|
|
3818
3962
|
|
|
3819
3963
|
**插槽（slots）**
|
|
3820
3964
|
|
|
3821
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
3822
|
-
| -------------- | ------------------------------ | ------------------------------------------------ |
|
|
3823
|
-
| `search-extra` | — | `<template #search-extra>…</template>` |
|
|
3824
|
-
| `title` | `v-bind="{ node, data }"` 展开 | `<template #title="{ node, data }">…</template>` |
|
|
3825
|
-
| `[slot]` | `v-bind="scope"` 展开 | `<template #[slot]="scope">…</template>` |
|
|
3965
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
3966
|
+
| -------------- | ------------------------------ | ------------------------------------------------ | -------------------------------------------- |
|
|
3967
|
+
| `search-extra` | — | `<template #search-extra>…</template>` | 搜索框右侧附加内容 |
|
|
3968
|
+
| `title` | `v-bind="{ node, data }"` 展开 | `<template #title="{ node, data }">…</template>` | 自定义节点标题，参数为 node 和 data |
|
|
3969
|
+
| `[slot]` | `v-bind="scope"` 展开 | `<template #[slot]="scope">…</template>` | 按自定义插槽列表生成名称，参数为树插槽上下文 |
|
|
3826
3970
|
|
|
3827
3971
|
**完整示例**：见 §6 数据型组件 + useRequest 体系（核心） › ⑦ ZlTree —— useRequest 绑定 data
|
|
3828
3972
|
|
|
@@ -3850,11 +3994,11 @@ import { ZlTreeSelect } from '@zl-ui-kit/components'
|
|
|
3850
3994
|
|
|
3851
3995
|
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
3852
3996
|
| ------------------- | ----------------------------------------------------- | -------------------------------------------------------------- | ---- | ------------------------ | ------------------------------------------------ |
|
|
3853
|
-
| `modelValue` | `any` | — | 否 | `v-model="value"` |
|
|
3997
|
+
| `modelValue` | `any` | — | 否 | `v-model="value"` | 当前选中节点键值或标签值列表 |
|
|
3854
3998
|
| `originTreeData` | `any[]` | — | 是 | `:origin-tree-data="[]"` | 树数据 |
|
|
3855
3999
|
| `allName` | `string` | — | 否 | `all-name="全部"` | "全部"节点名（启用全选控制条） |
|
|
3856
4000
|
| `labelInValue` | `boolean` | `false` | 否 | `label-in-value` | 返回 {label, value} 对象数组（缺省返回键值数组） |
|
|
3857
|
-
| `fieldNames` | `{ key?: string; title?: string; children?: string }` | `() => ({ key: 'key', title: 'title', children: 'children' })` | 否 | `:field-names="{}"` |
|
|
4001
|
+
| `fieldNames` | `{ key?: string; title?: string; children?: string }` | `() => ({ key: 'key', title: 'title', children: 'children' })` | 否 | `:field-names="{}"` | 树节点键名、标题与子级字段映射 |
|
|
3858
4002
|
| `treeCheckStrictly` | `boolean` | `false` | 否 | `tree-check-strictly` | 父子不关联 |
|
|
3859
4003
|
|
|
3860
4004
|
> 把 `$attrs` 透传给 `el-tree-select`，未列出的属性会继续下传
|
|
@@ -3926,11 +4070,11 @@ import { ZlEditor } from '@zl-ui-kit/components/editor'
|
|
|
3926
4070
|
|
|
3927
4071
|
**props**
|
|
3928
4072
|
|
|
3929
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
3930
|
-
| ------------ | --------------------- | -------------- | ---- | ----------------------- |
|
|
3931
|
-
| `modelValue` | `string` | `''` | 否 | `v-model="value"` |
|
|
3932
|
-
| `language` | `string` | `'javascript'` | 否 | `language="javascript"` |
|
|
3933
|
-
| `options` | `Record<string, any>` | `() => ({})` | 否 | `:options="{}"` |
|
|
4073
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
4074
|
+
| ------------ | --------------------- | -------------- | ---- | ----------------------- | ------------------------------------ |
|
|
4075
|
+
| `modelValue` | `string` | `''` | 否 | `v-model="value"` | 编辑器文本内容，v-model 双向同步 |
|
|
4076
|
+
| `language` | `string` | `'javascript'` | 否 | `language="javascript"` | 语法高亮所用语言 id，默认 javascript |
|
|
4077
|
+
| `options` | `Record<string, any>` | `() => ({})` | 否 | `:options="{}"` | monaco 编辑器配置，覆盖内置默认项 |
|
|
3934
4078
|
|
|
3935
4079
|
**事件（emits）**
|
|
3936
4080
|
|
|
@@ -3960,12 +4104,12 @@ import { ZlSqlEditor } from '@zl-ui-kit/components/editor'
|
|
|
3960
4104
|
|
|
3961
4105
|
**props**
|
|
3962
4106
|
|
|
3963
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
3964
|
-
| ----------------- | ------------------ | ---------- | ---- | ------------------------------- |
|
|
3965
|
-
| `modelValue` | `string` | — | 否 | `v-model="value"` |
|
|
3966
|
-
| `tableSchemas` | `SqlTableSchema[]` | `() => []` | 否 | `:table-schemas="tableSchemas"` | 表结构（补全提示）
|
|
3967
|
-
| `customKeywords` | `string[]` | `() => []` | 否 | `:custom-keywords="[]"` |
|
|
3968
|
-
| `customFunctions` | `string[]` | `() => []` | 否 | `:custom-functions="[]"` |
|
|
4107
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
4108
|
+
| ----------------- | ------------------ | ---------- | ---- | ------------------------------- | -------------------------------- |
|
|
4109
|
+
| `modelValue` | `string` | — | 否 | `v-model="value"` | SQL 文本内容，v-model 双向同步 |
|
|
4110
|
+
| `tableSchemas` | `SqlTableSchema[]` | `() => []` | 否 | `:table-schemas="tableSchemas"` | 表结构（补全提示） |
|
|
4111
|
+
| `customKeywords` | `string[]` | `() => []` | 否 | `:custom-keywords="[]"` | 追加到内置保留字表的自定义关键字 |
|
|
4112
|
+
| `customFunctions` | `string[]` | `() => []` | 否 | `:custom-functions="[]"` | 参与补全提示的自定义函数名 |
|
|
3969
4113
|
|
|
3970
4114
|
> 把 `$attrs` 透传给 `ZlEditor`，未列出的属性会继续下传
|
|
3971
4115
|
|
|
@@ -3979,6 +4123,8 @@ import { ZlSqlEditor } from '@zl-ui-kit/components/editor'
|
|
|
3979
4123
|
|
|
3980
4124
|
<sub>入口 `@zl-ui-kit/components/file-preview` · 源码 `packages/components/src/components/ZlFilePreview/index.vue` · ⚠️ 不在主入口，需从子路径 import，并自行安装对应 peer 依赖</sub>
|
|
3981
4125
|
|
|
4126
|
+
**简介**：文件获取失败占位（供 内部渲染）
|
|
4127
|
+
|
|
3982
4128
|
**接口概览**：1 props
|
|
3983
4129
|
|
|
3984
4130
|
**用法示例**
|
|
@@ -3997,9 +4143,11 @@ import { ZlFilePreview } from '@zl-ui-kit/components/file-preview'
|
|
|
3997
4143
|
|
|
3998
4144
|
**props**
|
|
3999
4145
|
|
|
4000
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
4001
|
-
| ----- | -------- | ------ | ---- | ------------------------------------ |
|
|
4002
|
-
| `url` | `string` | — | 否 | `url="https://example.com/file.pdf"` |
|
|
4146
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
4147
|
+
| ----- | -------- | ------ | ---- | ------------------------------------ | -------------------------------------- |
|
|
4148
|
+
| `url` | `string` | — | 否 | `url="https://example.com/file.pdf"` | 文件地址，变更后自动重新拉取并识别类型 |
|
|
4149
|
+
|
|
4150
|
+
**完整示例**：见 §3 组件总览（47 个业务组件） › ZlFileFetchError —— 文件获取失败占位（供 ZlFilePreview 内部渲染）
|
|
4003
4151
|
|
|
4004
4152
|
#### `ZlFileViewer`
|
|
4005
4153
|
|
|
@@ -4023,9 +4171,9 @@ import { ZlFileViewer } from '@zl-ui-kit/components/file-preview'
|
|
|
4023
4171
|
|
|
4024
4172
|
**props**
|
|
4025
4173
|
|
|
4026
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
4027
|
-
| ---------- | ------------------------------------------------ | -------- | ---- | ------------------ |
|
|
4028
|
-
| `fileType` | `'word' \| 'pdf' \| 'excel' \| 'ppt' \| 'image'` | `'word'` | 否 | `file-type="word"` |
|
|
4174
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
4175
|
+
| ---------- | ------------------------------------------------ | -------- | ---- | ------------------ | ------------------------- |
|
|
4176
|
+
| `fileType` | `'word' \| 'pdf' \| 'excel' \| 'ppt' \| 'image'` | `'word'` | 否 | `file-type="word"` | 指定渲染器类型，默认 word |
|
|
4029
4177
|
|
|
4030
4178
|
> 把 `$attrs` 透传给 `VueOfficePdf`，未列出的属性会继续下传
|
|
4031
4179
|
|