@zl-ui-kit/components 0.7.2 → 0.8.1
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 +314 -125
- package/dist/components/ZlAction/List.vue.mjs +16 -15
- package/dist/components/ZlAction/types.d.ts +5 -2
- package/dist/components/ZlCardPage/index.vue.d.ts +41 -5
- package/dist/components/ZlCardPage/index.vue.mjs +87 -93
- package/dist/components/ZlDictTag/index.vue.d.ts +5 -0
- package/dist/components/ZlDictTag/index.vue.mjs +20 -19
- package/dist/components/ZlPagination/index.css +1 -1
- package/dist/components/ZlPagination/index.vue.mjs +1 -1
- package/dist/components/ZlPagination/usePagination.d.ts +6 -0
- package/dist/components/ZlPagination/usePagination.mjs +22 -19
- package/dist/components/ZlSearch/index.vue.d.ts +3 -0
- package/dist/components/ZlSearch/index.vue.mjs +81 -78
- package/dist/components/ZlSearchTable/index.vue.d.ts +12 -2
- package/dist/components/ZlUpload/index.css +1 -1
- package/dist/components/ZlUpload/index.vue.d.ts +8 -0
- package/dist/components/ZlUpload/index.vue.mjs +2 -2
- package/dist/components/ZlUpload/index2.vue.mjs +76 -72
- package/package.json +5 -5
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`
|
|
@@ -850,7 +992,7 @@ const items: FormItem[] = [
|
|
|
850
992
|
|
|
851
993
|
**展开 / 收起**：`lastVisibleIndex !== null` 时在「查询」左侧出现筛选图标按钮，点击在查询条**上层**
|
|
852
994
|
展开全量表单浮层（`position: absolute` + 上滑 `--28px` 淡入，不改变页面高度），再点收起；查询/重置后自动收起。
|
|
853
|
-
`showLabels`
|
|
995
|
+
`labelsVisible` 不显式传时，仅在发生溢出时展示「筛选条件」标签行（旧名 `showLabels` 仍兼容）。
|
|
854
996
|
|
|
855
997
|
**图标按钮的移入提示**：重置、展开、收起都是纯图标按钮，鼠标移入给出文字提示（原生 `title`，
|
|
856
998
|
同时带 `aria-label` 供读屏）。文案走 i18n，随 `setLocale` 切换、也可被消费方覆盖：
|
|
@@ -872,7 +1014,42 @@ const items: FormItem[] = [
|
|
|
872
1014
|
|
|
873
1015
|
### ZlAction / ZlActionList —— 操作列与操作列表
|
|
874
1016
|
|
|
875
|
-
基于 `ActionItem`（label/icon/
|
|
1017
|
+
基于 `ActionItem`（label/icon/disabled/visible/permission/handler 等），`ZlTable` 列 `actions` 即渲染 `ZlActionList`。
|
|
1018
|
+
`ZlAction` 是 `ZlActionList` 的薄封装（固定 `listCount: 2` + 「更多」图标下拉）。
|
|
1019
|
+
|
|
1020
|
+
**`visible` —— 控制显示与隐藏（推荐用于互斥操作）**
|
|
1021
|
+
|
|
1022
|
+
`visible` 支持两种写法，与 `permission` 取交集（两者都通过才展示）：
|
|
1023
|
+
|
|
1024
|
+
| 写法 | 说明 |
|
|
1025
|
+
| ------------------------------- | -------------------------------------------------- |
|
|
1026
|
+
| `visible: false` | 布尔值直接判定 |
|
|
1027
|
+
| `visible: (...args) => boolean` | 函数判定，接收 `visibleArgs`，末尾追加 `item` 自身 |
|
|
1028
|
+
|
|
1029
|
+
互斥的两个操作（如启用 / 停用）应当用 `visible` 只展示「能做的那一个」，而不是用 `disabled`
|
|
1030
|
+
把当前状态渲染成一个可看不可点的灰按钮：
|
|
1031
|
+
|
|
1032
|
+
```ts
|
|
1033
|
+
const statusActions = (item: Item): ActionItem[] => [
|
|
1034
|
+
{ label: '启用', visible: item.status === false, handler: () => change(item, true) },
|
|
1035
|
+
{ label: '停用', visible: item.status === true, handler: () => change(item, false) },
|
|
1036
|
+
]
|
|
1037
|
+
```
|
|
1038
|
+
|
|
1039
|
+
**`disabled`**
|
|
1040
|
+
|
|
1041
|
+
内联按钮与「更多」下拉项都生效：`el-link` 绑定 `:disabled`（视觉置灰），`handleAction`
|
|
1042
|
+
再兜底拦截一次（避免自定义 icon 分支绕过）。请求进行中置灰可防连点。
|
|
1043
|
+
|
|
1044
|
+
**全库显隐属性命名约定**
|
|
1045
|
+
|
|
1046
|
+
| 场景 | 命名 | 示例 |
|
|
1047
|
+
| ------------------------------ | --------------- | ------------------------------------------------------------------------------------------------------------- |
|
|
1048
|
+
| 描述对象**自身**的显隐 | `visible` | `ActionItem` / `FormItem` / `Description` 项 / `ZlGrid` 项 / `ZlTable` 列 / `ZlTag` |
|
|
1049
|
+
| 描述组件**内部某个局部**的显隐 | `<局部>Visible` | `labelsVisible` / `tipVisible` / `downloadButtonVisible` / `iconVisible` / `totalVisible` / `pageSizeVisible` |
|
|
1050
|
+
|
|
1051
|
+
不要用 `show*` / `hide*`（历史上出现过 `showLabels` / `showTip` / `hideIcon`，已全部重命名，
|
|
1052
|
+
旧名保留为 `@deprecated` 并继续生效：新名优先，未给时回落旧名）。
|
|
876
1053
|
|
|
877
1054
|
### ZlRadioTag / ZlCheckboxTag / ZlCheckAll / ZlSorter / ZlAddSub / ZlLayoutSwitch
|
|
878
1055
|
|
|
@@ -1423,66 +1600,66 @@ const { i18n } = useLocale({ messages })
|
|
|
1423
1600
|
|
|
1424
1601
|
### 组件索引
|
|
1425
1602
|
|
|
1426
|
-
| 组件
|
|
1427
|
-
|
|
|
1428
|
-
| `ZlAction`
|
|
1429
|
-
| `ZlActionList`
|
|
1430
|
-
| `ZlAddSub`
|
|
1431
|
-
| `ZlAppLayout`
|
|
1432
|
-
| `ZlAppMenu`
|
|
1433
|
-
| `ZlAppSlogan`
|
|
1434
|
-
| `ZlAutoTooltip`
|
|
1435
|
-
| `ZlAvatar`
|
|
1436
|
-
| `ZlAvatarGroup`
|
|
1437
|
-
| `ZlCard`
|
|
1438
|
-
| `ZlCardPage`
|
|
1439
|
-
| `ZlCheckAll`
|
|
1440
|
-
| `ZlCheckboxTag`
|
|
1441
|
-
| `ZlCopy`
|
|
1442
|
-
| `ZlDescription`
|
|
1443
|
-
| `ZlDictTag`
|
|
1444
|
-
| `ZlDrawer`
|
|
1445
|
-
| `ZlDynamicComponent` | 主入口 | 3 | 2 | 0 | 0 |
|
|
1446
|
-
| `ZlPdfViewer`
|
|
1447
|
-
| `ZlLogin`
|
|
1448
|
-
| `ZlLoginForm`
|
|
1449
|
-
| `ZlEmpty`
|
|
1450
|
-
| `ZlForm`
|
|
1451
|
-
| `ZlFormChild`
|
|
1452
|
-
| `ZlGridItem`
|
|
1453
|
-
| `ZlGrid`
|
|
1454
|
-
| `ZlHorizontalTable`
|
|
1455
|
-
| `ZlIcon`
|
|
1456
|
-
| `ZlI18nProvider`
|
|
1457
|
-
| `ZlIconHover`
|
|
1458
|
-
| `ZlIconLabel`
|
|
1459
|
-
| `ZlCornerTag`
|
|
1460
|
-
| `ZlLayoutSwitch`
|
|
1461
|
-
| `ZlPagination`
|
|
1462
|
-
| `ZlPermission`
|
|
1463
|
-
| `ZlPopconfirm`
|
|
1464
|
-
| `ZlRadioTag`
|
|
1465
|
-
| `ZlSearch`
|
|
1466
|
-
| `ZlSearchTable`
|
|
1467
|
-
| `ZlSection`
|
|
1468
|
-
| `ZlSorter`
|
|
1469
|
-
| `ZlSorterList`
|
|
1470
|
-
| `ZlSwitch`
|
|
1471
|
-
| `ZlTable`
|
|
1472
|
-
| `ZlTabs`
|
|
1473
|
-
| `ZlTag`
|
|
1474
|
-
| `ZlText`
|
|
1475
|
-
| `ZlTitle`
|
|
1476
|
-
| `ZlUpload`
|
|
1477
|
-
| `ZlTree`
|
|
1478
|
-
| `ZlTreeSelect`
|
|
1479
|
-
| `ZlChart`
|
|
1480
|
-
| `ZlEditor`
|
|
1481
|
-
| `ZlSqlEditor`
|
|
1482
|
-
| `ZlFilePreview`
|
|
1483
|
-
| `ZlFileViewer`
|
|
1484
|
-
|
|
1485
|
-
> 说明列为 `—` 表示该属性在源码里没写 `/** */` 注释（当前
|
|
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 |
|
|
1661
|
+
|
|
1662
|
+
> 说明列为 `—` 表示该属性在源码里没写 `/** */` 注释（当前 134/194 个）；补完注释重跑 `pnpm docs:api` 即可同步。
|
|
1486
1663
|
|
|
1487
1664
|
### 14.1 主入口组件（`@zl-ui-kit/components`）
|
|
1488
1665
|
|
|
@@ -1620,6 +1797,8 @@ import { ZlAddSub } from '@zl-ui-kit/components'
|
|
|
1620
1797
|
|
|
1621
1798
|
<sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlAppLayout/index.vue`</sub>
|
|
1622
1799
|
|
|
1800
|
+
**简介**：布局形态（供 分发）
|
|
1801
|
+
|
|
1623
1802
|
**接口概览**：1 props · 1 插槽
|
|
1624
1803
|
|
|
1625
1804
|
**用法示例**
|
|
@@ -1659,12 +1838,14 @@ import { ZlAppLayout } from '@zl-ui-kit/components'
|
|
|
1659
1838
|
| --------- | ---------- | --------------------------------- | ------------------------------------------- |
|
|
1660
1839
|
| `default` | — | `<template #default>…</template>` | 整个 `slots` 对象原样透传，插槽由子组件决定 |
|
|
1661
1840
|
|
|
1662
|
-
**完整示例**：见 §
|
|
1841
|
+
**完整示例**：见 §3 组件总览（47 个业务组件） › ZlHorizontalLayout / ZlVerticalLayout —— 布局形态（供 ZlAppLayout 分发）
|
|
1663
1842
|
|
|
1664
1843
|
#### `ZlAppMenu`
|
|
1665
1844
|
|
|
1666
1845
|
<sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlAppMenu/AppMenu.vue`</sub>
|
|
1667
1846
|
|
|
1847
|
+
**简介**：菜单项（供 递归渲染）
|
|
1848
|
+
|
|
1668
1849
|
**接口概览**：3 props · 1 事件
|
|
1669
1850
|
|
|
1670
1851
|
**用法示例**
|
|
@@ -1695,7 +1876,7 @@ import { ZlAppMenu } from '@zl-ui-kit/components'
|
|
|
1695
1876
|
| ----------------- | ---------- | ---- |
|
|
1696
1877
|
| `menu-item-click` | `MenuItem` | — |
|
|
1697
1878
|
|
|
1698
|
-
**完整示例**：见 §
|
|
1879
|
+
**完整示例**：见 §3 组件总览（47 个业务组件） › ZlAppMenuItem —— 菜单项（供 ZlAppMenu 递归渲染）
|
|
1699
1880
|
|
|
1700
1881
|
#### `ZlAppSlogan`
|
|
1701
1882
|
|
|
@@ -1912,14 +2093,14 @@ import { ZlCardPage } from '@zl-ui-kit/components'
|
|
|
1912
2093
|
|
|
1913
2094
|
**props**
|
|
1914
2095
|
|
|
1915
|
-
| 属性 | 类型
|
|
1916
|
-
| -------------- |
|
|
1917
|
-
| `immediate` | `boolean`
|
|
1918
|
-
| `request` | `\| ((...args: any[]) => Promise<any>) \| { service: (...args: any[]) => Promise<any>; options?: Record<string, any> }` | — | 是 | `:request="async () => {}"` |
|
|
1919
|
-
| `queryItems` | `SearchItem[]`
|
|
1920
|
-
| `pagination` | `Record<string, any> \| boolean`
|
|
1921
|
-
| `itemKey` | `string`
|
|
1922
|
-
| `cardMinWidth` | `string`
|
|
2096
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
2097
|
+
| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ---- | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
2098
|
+
| `immediate` | `boolean` | `true` | 否 | `:immediate="false"` | — |
|
|
2099
|
+
| `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） |
|
|
2100
|
+
| `queryItems` | `SearchItem[]` | `() => []` | 否 | `:query-items="queryItems"` | — |
|
|
2101
|
+
| `pagination` | `Record<string, any> \| boolean` | `true` | 否 | `:pagination="{}"` | — |
|
|
2102
|
+
| `itemKey` | `string` | `'id'` | 否 | `item-key="id"` | — |
|
|
2103
|
+
| `cardMinWidth` | `string` | — | 否 | `card-min-width="280px"` | — |
|
|
1923
2104
|
|
|
1924
2105
|
**事件（emits）**
|
|
1925
2106
|
|
|
@@ -1937,11 +2118,11 @@ import { ZlCardPage } from '@zl-ui-kit/components'
|
|
|
1937
2118
|
|
|
1938
2119
|
**暴露（defineExpose）**
|
|
1939
2120
|
|
|
1940
|
-
| 名称 | 说明
|
|
1941
|
-
| --------- |
|
|
1942
|
-
| `refresh` | —
|
|
1943
|
-
| `params` | —
|
|
1944
|
-
| `search` |
|
|
2121
|
+
| 名称 | 说明 |
|
|
2122
|
+
| --------- | ------------------------------------------------------------------------ |
|
|
2123
|
+
| `refresh` | — |
|
|
2124
|
+
| `params` | — |
|
|
2125
|
+
| `search` | 重新查询并回到第 1 页；消费方可在 useRequest 的 refreshDepsAction 里调用 |
|
|
1945
2126
|
|
|
1946
2127
|
**完整示例**：见 §6 数据型组件 + useRequest 体系（核心） › ② ZlCardPage —— 直接传 service
|
|
1947
2128
|
|
|
@@ -2135,7 +2316,7 @@ import { ZlDescription } from '@zl-ui-kit/components'
|
|
|
2135
2316
|
|
|
2136
2317
|
**简介**：字典标签
|
|
2137
2318
|
|
|
2138
|
-
**接口概览**：
|
|
2319
|
+
**接口概览**：7 props
|
|
2139
2320
|
|
|
2140
2321
|
**用法示例**
|
|
2141
2322
|
|
|
@@ -2153,14 +2334,15 @@ import { ZlDictTag } from '@zl-ui-kit/components'
|
|
|
2153
2334
|
|
|
2154
2335
|
**props**
|
|
2155
2336
|
|
|
2156
|
-
| 属性
|
|
2157
|
-
|
|
|
2158
|
-
| `dictKey`
|
|
2159
|
-
| `dict`
|
|
2160
|
-
| `corner`
|
|
2161
|
-
| `value`
|
|
2162
|
-
| `simple`
|
|
2163
|
-
| `
|
|
2337
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
2338
|
+
| ------------- | ------------------------------------------------------------------------- | ----------- | ---- | ------------------- | ------------------------------------------------------------------------------------------------- |
|
|
2339
|
+
| `dictKey` | `string` | — | 是 | `dict-key="gender"` | 字典键（对应全局字典缓存的键；外部直传数据也以该键写入共享缓存） |
|
|
2340
|
+
| `dict` | `DictItem[]` | — | 否 | `:dict="dict"` | 外部直传字典数据：无需依赖全局数据源即可翻译。格式同 DictItem[]（{ label, value, icon?, type? }） |
|
|
2341
|
+
| `corner` | `boolean \| 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` | `false` | 否 | `corner="top-left"` | — |
|
|
2342
|
+
| `value` | `string` | — | 否 | `value="1"` | — |
|
|
2343
|
+
| `simple` | `boolean` | — | 否 | `simple` | — |
|
|
2344
|
+
| `iconVisible` | `boolean` | `undefined` | 否 | `icon-visible` | 是否展示字典项图标（默认 true） |
|
|
2345
|
+
| `hideIcon` | `boolean` | `undefined` | 否 | `hide-icon` | — |
|
|
2164
2346
|
|
|
2165
2347
|
> 把 `$attrs` 透传给 `zl-corner-tag`，未列出的属性会继续下传
|
|
2166
2348
|
|
|
@@ -2860,7 +3042,7 @@ import { ZlLayoutSwitch } from '@zl-ui-kit/components'
|
|
|
2860
3042
|
|
|
2861
3043
|
<sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlPagination/index.vue`</sub>
|
|
2862
3044
|
|
|
2863
|
-
**简介**：分页器（el-pagination 封装）：默认靠右对齐，分页入参（pageNum/pageSize/
|
|
3045
|
+
**简介**：分页器（el-pagination 封装）：默认靠右对齐，分页入参（pageNum/pageSize/totalVisible…） 经 `$attrs` 透传，`align` 控制水平对齐（left/center/right）
|
|
2864
3046
|
|
|
2865
3047
|
**接口概览**：4 props · 3 事件
|
|
2866
3048
|
|
|
@@ -3057,7 +3239,7 @@ import { ZlRadioTag } from '@zl-ui-kit/components'
|
|
|
3057
3239
|
|
|
3058
3240
|
**简介**：查询条：表单项按容器宽度自适应排列（auto-fill 网格），放不下的项自动隐藏， 并在「查询」左侧给出展开按钮（点击后在查询条上层展开全量表单，再点收起）。
|
|
3059
3241
|
|
|
3060
|
-
**接口概览**：
|
|
3242
|
+
**接口概览**：6 props · 2 事件 · 2 插槽 · 3 暴露
|
|
3061
3243
|
|
|
3062
3244
|
**用法示例**
|
|
3063
3245
|
|
|
@@ -3086,13 +3268,14 @@ import { ZlSearch } from '@zl-ui-kit/components'
|
|
|
3086
3268
|
|
|
3087
3269
|
**props**
|
|
3088
3270
|
|
|
3089
|
-
| 属性
|
|
3090
|
-
|
|
|
3091
|
-
| `items`
|
|
3092
|
-
| `model`
|
|
3093
|
-
| `immediate`
|
|
3094
|
-
| `disabled`
|
|
3095
|
-
| `
|
|
3271
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
3272
|
+
| --------------- | --------------------- | ----------- | ---- | -------------------- | -------------------------------------------------------------------------------------------- |
|
|
3273
|
+
| `items` | `SearchItem[]` | `() => []` | 否 | `:items="items"` | 查询项定义（SearchItem[]），按数组顺序排列 |
|
|
3274
|
+
| `model` | `Record<string, any>` | — | 否 | `:model="{}"` | 表单数据。传入时组件直接读写该对象（受控）； 不传则用内部副本，`params` / 标签行仍可正常工作 |
|
|
3275
|
+
| `immediate` | `boolean` | `true` | 否 | `:immediate="false"` | 挂载后立即执行一次查询（默认 true） |
|
|
3276
|
+
| `disabled` | `boolean` | `false` | 否 | `disabled` | 禁用全部查询项 |
|
|
3277
|
+
| `labelsVisible` | `boolean` | `undefined` | 否 | `labels-visible` | 是否展示「筛选条件」标签行；不传时按「是否发生溢出」自动判定 |
|
|
3278
|
+
| `showLabels` | `boolean` | `undefined` | 否 | `show-labels` | — |
|
|
3096
3279
|
|
|
3097
3280
|
**事件（emits）**
|
|
3098
3281
|
|
|
@@ -3677,7 +3860,7 @@ import { ZlTitle } from '@zl-ui-kit/components'
|
|
|
3677
3860
|
|
|
3678
3861
|
**简介**：传上传 service
|
|
3679
3862
|
|
|
3680
|
-
**接口概览**：
|
|
3863
|
+
**接口概览**：13 props · 1 事件 · 1 插槽
|
|
3681
3864
|
|
|
3682
3865
|
**用法示例**
|
|
3683
3866
|
|
|
@@ -3705,19 +3888,21 @@ import { ZlUpload } from '@zl-ui-kit/components'
|
|
|
3705
3888
|
|
|
3706
3889
|
**props**
|
|
3707
3890
|
|
|
3708
|
-
| 属性
|
|
3709
|
-
|
|
|
3710
|
-
| `request`
|
|
3711
|
-
| `modelValue`
|
|
3712
|
-
| `accept`
|
|
3713
|
-
| `maxSize`
|
|
3714
|
-
| `limit`
|
|
3715
|
-
| `tip`
|
|
3716
|
-
| `separator`
|
|
3717
|
-
| `responseUrlKey`
|
|
3718
|
-
| `
|
|
3719
|
-
| `
|
|
3720
|
-
| `
|
|
3891
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
3892
|
+
| ----------------------- | --------------------------------------------------------------- | ----------- | ---- | ----------------------------------------- | -------------------------------------------- |
|
|
3893
|
+
| `request` | `(form: FormData, config: Record<string, any>) => Promise<any>` | — | 否 | `:request="async () => {}"` | 自定义上传函数（form, config）→ Promise |
|
|
3894
|
+
| `modelValue` | `string \| any[]` | `''` | 否 | `v-model="value"` | `v-model` 绑定的值（`defineModel` 隐式声明） |
|
|
3895
|
+
| `accept` | `string` | — | 否 | `accept=".png,.jpg,.pdf"` | — |
|
|
3896
|
+
| `maxSize` | `number` | — | 否 | `:max-size="1"` | 单文件大小上限（MB） |
|
|
3897
|
+
| `limit` | `number` | — | 否 | `:limit="1"` | — |
|
|
3898
|
+
| `tip` | `string` | — | 否 | `tip="支持批量上传，单个文件不超过 10MB"` | — |
|
|
3899
|
+
| `separator` | `string` | `';'` | 否 | `separator=","` | 多路径分隔符（modelValue 为字符串时） |
|
|
3900
|
+
| `responseUrlKey` | `string` | `'meta'` | 否 | `response-url-key="url"` | 响应中文件地址的取值键 |
|
|
3901
|
+
| `downloadButtonVisible` | `boolean` | `undefined` | 否 | `download-button-visible` | 是否展示「下载」按钮（默认 true） |
|
|
3902
|
+
| `tipVisible` | `boolean` | `undefined` | 否 | `tip-visible` | 是否展示提示文案（默认 true） |
|
|
3903
|
+
| `showDownloadButton` | `boolean` | `undefined` | 否 | `show-download-button` | — |
|
|
3904
|
+
| `showTip` | `boolean` | `undefined` | 否 | `show-tip` | — |
|
|
3905
|
+
| `verifySpace` | `boolean` | `false` | 否 | `verify-space` | 校验文件名不得含空格 |
|
|
3721
3906
|
|
|
3722
3907
|
**事件（emits）**
|
|
3723
3908
|
|
|
@@ -3940,6 +4125,8 @@ import { ZlSqlEditor } from '@zl-ui-kit/components/editor'
|
|
|
3940
4125
|
|
|
3941
4126
|
<sub>入口 `@zl-ui-kit/components/file-preview` · 源码 `packages/components/src/components/ZlFilePreview/index.vue` · ⚠️ 不在主入口，需从子路径 import，并自行安装对应 peer 依赖</sub>
|
|
3942
4127
|
|
|
4128
|
+
**简介**：文件获取失败占位（供 内部渲染）
|
|
4129
|
+
|
|
3943
4130
|
**接口概览**：1 props
|
|
3944
4131
|
|
|
3945
4132
|
**用法示例**
|
|
@@ -3962,6 +4149,8 @@ import { ZlFilePreview } from '@zl-ui-kit/components/file-preview'
|
|
|
3962
4149
|
| ----- | -------- | ------ | ---- | ------------------------------------ | ---- |
|
|
3963
4150
|
| `url` | `string` | — | 否 | `url="https://example.com/file.pdf"` | — |
|
|
3964
4151
|
|
|
4152
|
+
**完整示例**：见 §3 组件总览（47 个业务组件） › ZlFileFetchError —— 文件获取失败占位（供 ZlFilePreview 内部渲染）
|
|
4153
|
+
|
|
3965
4154
|
#### `ZlFileViewer`
|
|
3966
4155
|
|
|
3967
4156
|
<sub>入口 `@zl-ui-kit/components/file-preview` · 源码 `packages/components/src/components/ZlFileViewer/index.vue` · ⚠️ 不在主入口，需从子路径 import，并自行安装对应 peer 依赖</sub>
|
|
@@ -4000,18 +4189,18 @@ import { ZlFileViewer } from '@zl-ui-kit/components/file-preview'
|
|
|
4000
4189
|
|
|
4001
4190
|
操作项模型（ZlActionList / ZlTable actions 列共用）
|
|
4002
4191
|
|
|
4003
|
-
| 字段 | 类型
|
|
4004
|
-
| ------------ |
|
|
4005
|
-
| `label` | `string`
|
|
4006
|
-
| `icon` | `string`
|
|
4007
|
-
| `iconProps` | `Record<string, any>`
|
|
4008
|
-
| `iconClass` | `string`
|
|
4009
|
-
| `tooltip` | `boolean`
|
|
4010
|
-
| `disabled` | `boolean`
|
|
4011
|
-
| `divided` | `boolean`
|
|
4012
|
-
| `permission` | `string \| string[]`
|
|
4013
|
-
| `visible` | `(...args: any[]) => boolean` | 否 |
|
|
4014
|
-
| `handler` | `(...args: any[]) => void`
|
|
4192
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
4193
|
+
| ------------ | ------------------------------------------ | ---- | ----------------------------------------------------------------------------------------------------------------- |
|
|
4194
|
+
| `label` | `string` | 是 | 操作文案 |
|
|
4195
|
+
| `icon` | `string` | 否 | 图标（`zl:` 前缀走 ZlIcon，其余按 iconify/EP 规则） |
|
|
4196
|
+
| `iconProps` | `Record<string, any>` | 否 | 传给图标组件的 props |
|
|
4197
|
+
| `iconClass` | `string` | 否 | 图标自定义类名 |
|
|
4198
|
+
| `tooltip` | `boolean` | 否 | 是否用 tooltip 包住文案（文字过长时） |
|
|
4199
|
+
| `disabled` | `boolean` | 否 | 禁用（点击无响应） |
|
|
4200
|
+
| `divided` | `boolean` | 否 | 与下一项之间显示分割线 |
|
|
4201
|
+
| `permission` | `string \| string[]` | 否 | 权限键（三段式，经 usePermission 校验） |
|
|
4202
|
+
| `visible` | `boolean \| ((...args: any[]) => boolean)` | 否 | 显隐控制：布尔值直接判定；函数接收 `visibleArgs`（末尾追加 action 自身）后判定。 与权限取交集：两者都通过才展示。 |
|
|
4203
|
+
| `handler` | `(...args: any[]) => void` | 否 | 点击处理（接收 actionArgs） |
|
|
4015
4204
|
|
|
4016
4205
|
#### `IComponent`
|
|
4017
4206
|
|