@zl-ui-kit/components 0.21.0 → 0.21.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 +29 -5
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -30,6 +30,7 @@ ZL UI 业务组件库 —— Element Plus 体系，`Zl` 前缀，56 个业务组
|
|
|
30
30
|
- [4.1 必须先注册图标集（否则一个图标都不显示）](#41-必须先注册图标集否则一个图标都不显示)
|
|
31
31
|
- [5. 通用展示组件](#5-通用展示组件)
|
|
32
32
|
- [ZlTitle — 区块标题](#zltitle-区块标题)
|
|
33
|
+
- [ZlBreadcrumb — 面包屑](#zlbreadcrumb-面包屑)
|
|
33
34
|
- [ZlTag — 标签](#zltag-标签)
|
|
34
35
|
- [ZlCopy — 一键复制](#zlcopy-一键复制)
|
|
35
36
|
- [ZlEmpty — 空状态](#zlempty-空状态)
|
|
@@ -448,11 +449,11 @@ defineTheme({
|
|
|
448
449
|
| `/manual` | 接口手册 | 全量 API 检索，支持按 props 名 / 事件名反查组件，`?name=ZlTable` 直接定位 |
|
|
449
450
|
| `/icons` | 图标集 | 全量图标浏览/搜索，`zl:` 前缀渲染 |
|
|
450
451
|
| `/theme` | 主题工场 | **默认主题零配置**（含从 `body` 实时读出的生效值）、5 套内置主题切换、L1/L2 覆盖与选层对照表、`defineTheme` 运行时自定义、不生效排查顺序 |
|
|
451
|
-
| `/gallery` | 组件陈列 |
|
|
452
|
+
| `/gallery` | 组件陈列 | 57 个组件逐个渲染（用于批量截图与冒烟） |
|
|
452
453
|
| `/use-request` | useRequest 联调 | 用 Mock 模块驱动各数据型组件（见第 6 章） |
|
|
453
454
|
| `/examples/basic` | 通用展示示例 | ZlTitle/ZlTag/ZlCornerTag/ZlIcon/ZlText/ZlCopy/ZlAutoTooltip/ZlPagination/ZlEmpty |
|
|
454
455
|
| `/examples/table-form` | 表格/表单示例 | ZlTable/ZlSearchTable/ZlForm/ZlDrawer/ZlPopconfirm/ZlSwitch/ZlDescription/ZlAction/ZlIconLabel/ZlIconHover/ZlSearch |
|
|
455
|
-
| `/examples/general` | 布局与交互示例 | ZlAvatar/ZlCheckAll/ZlRadioTag/ZlCheckboxTag/ZlAddSub/ZlSorter/ZlLayoutSwitch/ZlSection/ZlCard/ZlAppSlogan/ZlPermission/ZlHorizontalTable/ZlUpload/ZlTabs/ZlGrid/ZlDynamicComponent/ZlCardPage
|
|
456
|
+
| `/examples/general` | 布局与交互示例 | ZlAvatar/ZlBreadcrumb/ZlCheckAll/ZlRadioTag/ZlCheckboxTag/ZlAddSub/ZlSorter/ZlLayoutSwitch/ZlSection/ZlCard/ZlAppSlogan/ZlPermission/ZlHorizontalTable/ZlUpload/ZlTabs/ZlGrid/ZlDynamicComponent/ZlCardPage |
|
|
456
457
|
| `/examples/search-table` | ZlSearchTable 专项 | 基础用法 / `{ service, options }` 用法 / 暴露方法 / 无查询项 immediate，含分页与查询验证 |
|
|
457
458
|
|
|
458
459
|
> 改造前的扁平路由（`/components`、`/general`、`/table-form`、`/search-table`）保留 **redirect**，历史链接与自动化脚本不会失效。
|
|
@@ -614,6 +615,29 @@ presetIconifyIcon(icons)
|
|
|
614
615
|
|
|
615
616
|
`size`: `small`(12px) / `medium`(14px) / `large`；自带左侧竖条与可选图标（`zl:help-color`）。
|
|
616
617
|
|
|
618
|
+
### ZlBreadcrumb — 面包屑
|
|
619
|
+
|
|
620
|
+
`items` schema 驱动，**最后一项自动作为当前页**（不跳转、不触发 `click`、加粗高亮）：
|
|
621
|
+
|
|
622
|
+
```vue
|
|
623
|
+
<ZlBreadcrumb
|
|
624
|
+
:items="[{ label: '首页', to: '/' }, { label: '资源管理', to: '/resource' }, { label: '策略定义' }]"
|
|
625
|
+
/>
|
|
626
|
+
```
|
|
627
|
+
|
|
628
|
+
- **跳转**：条目带 `to` 走 `vue-router`（同 `el-breadcrumb-item`，`replace` 控制是否替换历史）；没有路由的纯回调场景用 `click(item, index)`。
|
|
629
|
+
- **分隔符**：`separator` 改文本；`separator-icon` 传图标组件（`el-breadcrumb` 的其余属性与事件原样透传）。
|
|
630
|
+
- **末项不可点**：即使带 `to` 也不跳转；需要可点击就放到倒数第二项。
|
|
631
|
+
- **自定义条目**：`#item` 插槽完全接管渲染，作用域 `{ item, index, is-last }`。
|
|
632
|
+
|
|
633
|
+
```vue
|
|
634
|
+
<ZlBreadcrumb :items="items">
|
|
635
|
+
<template #item="{ item, index }">
|
|
636
|
+
<span :style="{ fontWeight: index === items.length - 1 ? 600 : 400 }">{{ item.label }}</span>
|
|
637
|
+
</template>
|
|
638
|
+
</ZlBreadcrumb>
|
|
639
|
+
```
|
|
640
|
+
|
|
617
641
|
### ZlTag — 标签
|
|
618
642
|
|
|
619
643
|
```vue
|
|
@@ -4515,9 +4539,9 @@ import { ZlBreadcrumb } from '@zl-ui-kit/components'
|
|
|
4515
4539
|
|
|
4516
4540
|
**插槽（slots）**
|
|
4517
4541
|
|
|
4518
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
4519
|
-
| ------ | ---------------------------- | ------------------------------ |
|
|
4520
|
-
| `item` | `item` / `index` / `is-last` | `<template #item>…</template>` | 条目内容自定义，作用域含 { item, index,
|
|
4542
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
4543
|
+
| ------ | ---------------------------- | ------------------------------ | ------------------------------------------------- |
|
|
4544
|
+
| `item` | `item` / `index` / `is-last` | `<template #item>…</template>` | 条目内容自定义，作用域含 { item, index, is-last } |
|
|
4521
4545
|
|
|
4522
4546
|
#### `ZlCard`
|
|
4523
4547
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zl-ui-kit/components",
|
|
3
|
-
"version": "0.21.
|
|
3
|
+
"version": "0.21.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "ZL UI 业务组件库（Element Plus 体系，Zl 前缀）——首批：Icon/AutoTooltip/Tag/CornerTag/Text/Title/Copy/Empty/Pagination/DictTag",
|
|
6
6
|
"license": "MIT",
|
|
@@ -39,9 +39,9 @@
|
|
|
39
39
|
"file-type": "^20.4.1",
|
|
40
40
|
"dt-sql-parser": "^4.3.1",
|
|
41
41
|
"sql-formatter": "^15.4.2",
|
|
42
|
-
"@zl-ui-kit/composables": "0.21.
|
|
43
|
-
"@zl-ui-kit/
|
|
44
|
-
"@zl-ui-kit/
|
|
42
|
+
"@zl-ui-kit/composables": "0.21.1",
|
|
43
|
+
"@zl-ui-kit/utils": "0.21.1",
|
|
44
|
+
"@zl-ui-kit/icons": "0.21.1"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"@vueuse/core": "^12.3.0 || ^13.0.0 || ^14.0.0 || ^15.0.0",
|
|
@@ -99,10 +99,10 @@
|
|
|
99
99
|
"@vue-office/pdf": "^2.0.10",
|
|
100
100
|
"@vue-office/pptx": "1.0.1",
|
|
101
101
|
"echarts": "^5.6.0",
|
|
102
|
-
"@jichuang/tsconfig": "1.0.0",
|
|
103
|
-
"@jichuang/eslint-config": "1.0.0",
|
|
104
102
|
"@jichuang/vite-config": "1.0.0",
|
|
105
|
-
"@
|
|
103
|
+
"@jichuang/eslint-config": "1.0.0",
|
|
104
|
+
"@jichuang/tsconfig": "1.0.0",
|
|
105
|
+
"@zl-ui-kit/theme": "0.21.1"
|
|
106
106
|
},
|
|
107
107
|
"repository": {
|
|
108
108
|
"type": "git",
|