@zl-ui-kit/components 0.8.1 → 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 +357 -359
- 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 +5 -0
- 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
|
@@ -1659,8 +1659,6 @@ const { i18n } = useLocale({ messages })
|
|
|
1659
1659
|
| [`ZlFilePreview`](#zlfilepreview) | 子入口 file-preview | 1 | 0 | 0 | 0 |
|
|
1660
1660
|
| [`ZlFileViewer`](#zlfileviewer) | 子入口 file-preview | 1 | 0 | 0 | 0 |
|
|
1661
1661
|
|
|
1662
|
-
> 说明列为 `—` 表示该属性在源码里没写 `/** */` 注释(当前 134/194 个);补完注释重跑 `pnpm docs:api` 即可同步。
|
|
1663
|
-
|
|
1664
1662
|
### 14.1 主入口组件(`@zl-ui-kit/components`)
|
|
1665
1663
|
|
|
1666
1664
|
#### `ZlAction`
|
|
@@ -1719,14 +1717,14 @@ import { ZlActionList } from '@zl-ui-kit/components'
|
|
|
1719
1717
|
|
|
1720
1718
|
**props**
|
|
1721
1719
|
|
|
1722
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
1723
|
-
| ------------- | -------------------------------- | ---------- | ---- | ----------------------- |
|
|
1724
|
-
| `actions` | `ActionItem[]` | `() => []` | 否 | `:actions="actions"` |
|
|
1725
|
-
| `actionArgs` | `any[]` | `() => []` | 否 | `:action-args="[]"` |
|
|
1726
|
-
| `visibleArgs` | `any[]` | `() => []` | 否 | `:visible-args="[]"` |
|
|
1727
|
-
| `listCount` | `number` | `2` | 否 | `:list-count="1"` | 直接展示的操作数,超出收入"更多"下拉
|
|
1728
|
-
| `iconMore` | `boolean \| Record<string, any>` | — | 否 | `:icon-more="iconMore"` |
|
|
1729
|
-
| `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` | 各操作之间是否插入竖线分隔符 |
|
|
1730
1728
|
|
|
1731
1729
|
**事件(emits)**
|
|
1732
1730
|
|
|
@@ -1736,9 +1734,9 @@ import { ZlActionList } from '@zl-ui-kit/components'
|
|
|
1736
1734
|
|
|
1737
1735
|
**插槽(slots)**
|
|
1738
1736
|
|
|
1739
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
1740
|
-
| ------ | ---------- | ------------------------------ |
|
|
1741
|
-
| `more` | — | `<template #more>…</template>` |
|
|
1737
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
1738
|
+
| ------ | ---------- | ------------------------------ | ---------------------------------------------- |
|
|
1739
|
+
| `more` | — | `<template #more>…</template>` | "更多"下拉的触发区域,默认显示图标或"更多"文案 |
|
|
1742
1740
|
|
|
1743
1741
|
**完整示例**:见 §7 表单与交互组件 › ZlAction / ZlActionList —— 操作列与操作列表
|
|
1744
1742
|
|
|
@@ -1774,10 +1772,10 @@ import { ZlAddSub } from '@zl-ui-kit/components'
|
|
|
1774
1772
|
|
|
1775
1773
|
**props**
|
|
1776
1774
|
|
|
1777
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
1778
|
-
| ------------ | ----------------- | ---------- | ---- | --------------------------- |
|
|
1779
|
-
| `model` | `any[]` | `() => []` | 否 | `v-model:model="value"` |
|
|
1780
|
-
| `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"` | 新增项的默认值 |
|
|
1781
1779
|
|
|
1782
1780
|
**事件(emits)**
|
|
1783
1781
|
|
|
@@ -1787,9 +1785,9 @@ import { ZlAddSub } from '@zl-ui-kit/components'
|
|
|
1787
1785
|
|
|
1788
1786
|
**插槽(slots)**
|
|
1789
1787
|
|
|
1790
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
1791
|
-
| ----- | ---------- | ----------------------------------------- |
|
|
1792
|
-
| `add` | `index` | `<template #add="{ index }">…</template>` |
|
|
1788
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
1789
|
+
| ----- | ---------- | ----------------------------------------- | --------------------------------------------- |
|
|
1790
|
+
| `add` | `index` | `<template #add="{ index }">…</template>` | 每一行的自定义内容,作用域参数 index 为行下标 |
|
|
1793
1791
|
|
|
1794
1792
|
**完整示例**:见 §7 表单与交互组件 › ZlRadioTag / ZlCheckboxTag / ZlCheckAll / ZlSorter / ZlAddSub / ZlLayoutSwitch
|
|
1795
1793
|
|
|
@@ -1825,9 +1823,9 @@ import { ZlAppLayout } from '@zl-ui-kit/components'
|
|
|
1825
1823
|
|
|
1826
1824
|
**props**
|
|
1827
1825
|
|
|
1828
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
1829
|
-
| -------- | ---------------------------- | -------------- | ---- | --------------------- |
|
|
1830
|
-
| `layout` | `'horizontal' \| 'vertical'` | `'horizontal'` | 否 | `layout="horizontal"` |
|
|
1826
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
1827
|
+
| -------- | ---------------------------- | -------------- | ---- | --------------------- | ---------------------------------------- |
|
|
1828
|
+
| `layout` | `'horizontal' \| 'vertical'` | `'horizontal'` | 否 | `layout="horizontal"` | 布局方向:横向用顶部菜单,纵向用侧边菜单 |
|
|
1831
1829
|
|
|
1832
1830
|
> 选项式组件(`defineComponent`),props 定义在 `props: {}` 中
|
|
1833
1831
|
> 把 `$attrs` 透传给内部组件,未列出的属性会继续下传
|
|
@@ -1866,9 +1864,9 @@ import { ZlAppMenu } from '@zl-ui-kit/components'
|
|
|
1866
1864
|
|
|
1867
1865
|
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
1868
1866
|
| ----------- | ---------------------------- | ------------ | ---- | ------------------- | ----------------------------------- |
|
|
1869
|
-
| `collapsed` | `boolean` | `false` | 否 | `collapsed` |
|
|
1867
|
+
| `collapsed` | `boolean` | `false` | 否 | `collapsed` | 菜单是否收起为图标,侧栏折叠时用 |
|
|
1870
1868
|
| `layout` | `'vertical' \| 'horizontal'` | `'vertical'` | 否 | `layout="vertical"` | el-menu 模式:vertical / horizontal |
|
|
1871
|
-
| `menus` | `MenuItem[]` | `() => []` | 否 | `:menus="menus"` |
|
|
1869
|
+
| `menus` | `MenuItem[]` | `() => []` | 否 | `:menus="menus"` | 菜单树数据,递归渲染为多级菜单项 |
|
|
1872
1870
|
|
|
1873
1871
|
**事件(emits)**
|
|
1874
1872
|
|
|
@@ -1900,11 +1898,11 @@ import { ZlAppSlogan } from '@zl-ui-kit/components'
|
|
|
1900
1898
|
|
|
1901
1899
|
**props**
|
|
1902
1900
|
|
|
1903
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
1904
|
-
| ----------- | --------- | ------ | ---- | ------------------------------------- |
|
|
1905
|
-
| `collapsed` | `boolean` | — | 否 | `collapsed` |
|
|
1906
|
-
| `logo` | `string` | — | 否 | `logo="https://example.com/logo.png"` |
|
|
1907
|
-
| `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="标题"` | 应用标题文案,折叠时隐藏 |
|
|
1908
1906
|
|
|
1909
1907
|
#### `ZlAutoTooltip`
|
|
1910
1908
|
|
|
@@ -1938,9 +1936,9 @@ import { ZlAutoTooltip } from '@zl-ui-kit/components'
|
|
|
1938
1936
|
|
|
1939
1937
|
**插槽(slots)**
|
|
1940
1938
|
|
|
1941
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
1942
|
-
| --------- | ---------- | --------------------------------- |
|
|
1943
|
-
| `default` | — | `<template #default>…</template>` |
|
|
1939
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
1940
|
+
| --------- | ---------- | --------------------------------- | -------------------------------- |
|
|
1941
|
+
| `default` | — | `<template #default>…</template>` | 需要省略并在溢出时提示的文本内容 |
|
|
1944
1942
|
|
|
1945
1943
|
#### `ZlAvatar`
|
|
1946
1944
|
|
|
@@ -1962,11 +1960,11 @@ import { ZlAvatar } from '@zl-ui-kit/components'
|
|
|
1962
1960
|
|
|
1963
1961
|
**props**
|
|
1964
1962
|
|
|
1965
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
1966
|
-
| ---------- | -------- | -------- | ---- | -------------------------------------------- |
|
|
1967
|
-
| `imageUrl` | `string` | — | 否 | `image-url="https://example.com/avatar.png"` |
|
|
1968
|
-
| `label` | `string` | — | 否 | `label="标签"` |
|
|
1969
|
-
| `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 长度) |
|
|
1970
1968
|
|
|
1971
1969
|
#### `ZlAvatarGroup`
|
|
1972
1970
|
|
|
@@ -1990,11 +1988,11 @@ import { ZlAvatarGroup } from '@zl-ui-kit/components'
|
|
|
1990
1988
|
|
|
1991
1989
|
**props**
|
|
1992
1990
|
|
|
1993
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
1994
|
-
| ------- | --------------------------------------- | -------------------------------------------------- | ---- | -------------- |
|
|
1995
|
-
| `list` | `Array<Record<string, any>>` | — | 是 | `:list="list"` |
|
|
1996
|
-
| `props` | `{ imageUrl?: string; label?: string }` | `() => ({ imageUrl: 'imageUrl', label: 'label' })` | 否 | `:props="{}"` | 字段映射(imageUrl/label 的取值键)
|
|
1997
|
-
| `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 长度) |
|
|
1998
1996
|
|
|
1999
1997
|
#### `ZlCard`
|
|
2000
1998
|
|
|
@@ -2038,22 +2036,22 @@ import { ZlCard } from '@zl-ui-kit/components'
|
|
|
2038
2036
|
|
|
2039
2037
|
**props**
|
|
2040
2038
|
|
|
2041
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
2042
|
-
| ----------- | --------- | ------ | ---- | -------------------- |
|
|
2043
|
-
| `hoverable` | `boolean` | `true` | 否 | `:hoverable="false"` |
|
|
2039
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
2040
|
+
| ----------- | --------- | ------ | ---- | -------------------- | -------------------------------- |
|
|
2041
|
+
| `hoverable` | `boolean` | `true` | 否 | `:hoverable="false"` | 鼠标悬停时是否高亮边框并加深阴影 |
|
|
2044
2042
|
|
|
2045
2043
|
**插槽(slots)**
|
|
2046
2044
|
|
|
2047
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
2048
|
-
| ---------------- | ---------- | ---------------------------------------- |
|
|
2049
|
-
| `icon` | — | `<template #icon>…</template>` |
|
|
2050
|
-
| `title` | — | `<template #title>…</template>` |
|
|
2051
|
-
| `title-append` | — | `<template #title-append>…</template>` |
|
|
2052
|
-
| `subtitle` | — | `<template #subtitle>…</template>` |
|
|
2053
|
-
| `default` | — | `<template #default>…</template>` |
|
|
2054
|
-
| `footer-prepend` | — | `<template #footer-prepend>…</template>` |
|
|
2055
|
-
| `footer` | — | `<template #footer>…</template>` |
|
|
2056
|
-
| `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>` | 卡片主体之外的自由区域,如展开面板 |
|
|
2057
2055
|
|
|
2058
2056
|
**完整示例**:见 §5 通用展示组件 › ZlCard / ZlPagination — 卡片与分页的视觉约定
|
|
2059
2057
|
|
|
@@ -2095,12 +2093,12 @@ import { ZlCardPage } from '@zl-ui-kit/components'
|
|
|
2095
2093
|
|
|
2096
2094
|
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
2097
2095
|
| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ---- | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
2098
|
-
| `immediate` | `boolean` | `true` | 否 | `:immediate="false"` |
|
|
2096
|
+
| `immediate` | `boolean` | `true` | 否 | `:immediate="false"` | 无查询条件时是否立即发起首次请求 |
|
|
2099
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) |
|
|
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"` |
|
|
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"` | 卡片最小宽度,决定单行能放几列 |
|
|
2104
2102
|
|
|
2105
2103
|
**事件(emits)**
|
|
2106
2104
|
|
|
@@ -2110,11 +2108,11 @@ import { ZlCardPage } from '@zl-ui-kit/components'
|
|
|
2110
2108
|
|
|
2111
2109
|
**插槽(slots)**
|
|
2112
2110
|
|
|
2113
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
2114
|
-
| ------------------ | ------------------------------ | -------------------------------------------------- |
|
|
2115
|
-
| `search-actions` | — | `<template #search-actions>…</template>` |
|
|
2116
|
-
| `[search-${slot}]` | `v-bind="scope"` 展开 | `<template #[search-${slot}]="scope">…</template>` |
|
|
2117
|
-
| `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 为当前项数据 |
|
|
2118
2116
|
|
|
2119
2117
|
**暴露(defineExpose)**
|
|
2120
2118
|
|
|
@@ -2150,10 +2148,10 @@ import { ZlCheckAll } from '@zl-ui-kit/components'
|
|
|
2150
2148
|
|
|
2151
2149
|
**props**
|
|
2152
2150
|
|
|
2153
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
2154
|
-
| --------- | ------------------------- | ---------- | ---- | ----------------------- |
|
|
2155
|
-
| `options` | `CheckAllOption[]` | `() => []` | 否 | `:options="options"` |
|
|
2156
|
-
| `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 双向绑定 |
|
|
2157
2155
|
|
|
2158
2156
|
**事件(emits)**
|
|
2159
2157
|
|
|
@@ -2196,12 +2194,12 @@ import { ZlCheckboxTag } from '@zl-ui-kit/components'
|
|
|
2196
2194
|
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
2197
2195
|
| ------------ | ------------------------------- | ---------- | ---- | -------------------- | -------------------------------------------- |
|
|
2198
2196
|
| `modelValue` | `any` | — | 否 | `v-model="value"` | `v-model` 绑定的值(`defineModel` 隐式声明) |
|
|
2199
|
-
| `options` | `CheckboxTagOption[]` | `() => []` | 否 | `:options="options"` |
|
|
2197
|
+
| `options` | `CheckboxTagOption[]` | `() => []` | 否 | `:options="options"` | 标签候选列表,每项可配图标与互斥组 |
|
|
2200
2198
|
| `single` | `boolean` | — | 否 | `single` | 单选模式(值为单值) |
|
|
2201
|
-
| `rounded` | `boolean` | `true` | 否 | `:rounded="false"` |
|
|
2202
|
-
| `bordered` | `boolean` | `true` | 否 | `:bordered="false"` |
|
|
2203
|
-
| `fill` | `boolean` | `true` | 否 | `:fill="false"` |
|
|
2204
|
-
| `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 |
|
|
2205
2203
|
|
|
2206
2204
|
**事件(emits)**
|
|
2207
2205
|
|
|
@@ -2211,9 +2209,9 @@ import { ZlCheckboxTag } from '@zl-ui-kit/components'
|
|
|
2211
2209
|
|
|
2212
2210
|
**插槽(slots)**
|
|
2213
2211
|
|
|
2214
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
2215
|
-
| --------- | ------------------------------------------------------------- | ----------------------------------------------------- |
|
|
2216
|
-
| `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 |
|
|
2217
2215
|
|
|
2218
2216
|
**完整示例**:见 §7 表单与交互组件 › ZlRadioTag / ZlCheckboxTag / ZlCheckAll / ZlSorter / ZlAddSub / ZlLayoutSwitch
|
|
2219
2217
|
|
|
@@ -2250,17 +2248,17 @@ import { ZlCopy } from '@zl-ui-kit/components'
|
|
|
2250
2248
|
|
|
2251
2249
|
**props**
|
|
2252
2250
|
|
|
2253
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
2254
|
-
| ---------- | -------- | ------ | ---- | ---------------------- |
|
|
2255
|
-
| `text` | `string` | — | 否 | `text="文本"` |
|
|
2256
|
-
| `copyText` | `string` | — | 否 | `copy-text="复制内容"` |
|
|
2251
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
2252
|
+
| ---------- | -------- | ------ | ---- | ---------------------- | -------------------------------------------- |
|
|
2253
|
+
| `text` | `string` | — | 否 | `text="文本"` | 展示的文本,未传 copyText 时点击复制的就是它 |
|
|
2254
|
+
| `copyText` | `string` | — | 否 | `copy-text="复制内容"` | 实际写入剪贴板的内容,优先级高于 text |
|
|
2257
2255
|
|
|
2258
2256
|
**插槽(slots)**
|
|
2259
2257
|
|
|
2260
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
2261
|
-
| --------- | ---------- | -------------------------------------------- |
|
|
2262
|
-
| `default` | — | `<template #default>…</template>` |
|
|
2263
|
-
| `trigger` | `copy` | `<template #trigger="{ copy }">…</template>` |
|
|
2258
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
2259
|
+
| --------- | ---------- | -------------------------------------------- | -------------------------------------- |
|
|
2260
|
+
| `default` | — | `<template #default>…</template>` | 复制内容展示区,缺省渲染 text |
|
|
2261
|
+
| `trigger` | `copy` | `<template #trigger="{ copy }">…</template>` | 自定义复制触发器,作用域提供 copy 方法 |
|
|
2264
2262
|
|
|
2265
2263
|
**完整示例**:见 §5 通用展示组件 › ZlCopy — 一键复制
|
|
2266
2264
|
|
|
@@ -2298,17 +2296,17 @@ import { ZlDescription } from '@zl-ui-kit/components'
|
|
|
2298
2296
|
|
|
2299
2297
|
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
2300
2298
|
| -------------- | ----------------------------------------------------------------- | -------------------------------------- | ---- | --------------------------- | -------------------------------------------------------------------- |
|
|
2301
|
-
| `items` | `DescriptionItem[]` | — | 是 | `:items="items"` |
|
|
2302
|
-
| `data` | `Record<string, any>` | `() => ({})` | 否 | `:data="{}"` |
|
|
2303
|
-
| `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="() => {}"` | 判断值是否为空,为空时改显示占位文案 |
|
|
2304
2302
|
| `emptyText` | `string` | — | 否 | `empty-text="暂无数据"` | 空值占位文案(缺省走 i18n zl.description.empty,未接入时兜底"暂无") |
|
|
2305
|
-
| `secondary` | `boolean` | — | 否 | `secondary` |
|
|
2303
|
+
| `secondary` | `boolean` | — | 否 | `secondary` | 次要形态:灰底并显示字段间分隔线 |
|
|
2306
2304
|
|
|
2307
2305
|
**插槽(slots)**
|
|
2308
2306
|
|
|
2309
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
2310
|
-
| ------------ | ---------- | ------------------------------------ |
|
|
2311
|
-
| `[item.key]` | — | `<template #[item.key]>…</template>` |
|
|
2307
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
2308
|
+
| ------------ | ---------- | ------------------------------------ | -------------------------------------------- |
|
|
2309
|
+
| `[item.key]` | — | `<template #[item.key]>…</template>` | 按 item.key 命名,仅在该项开启 slot 时才渲染 |
|
|
2312
2310
|
|
|
2313
2311
|
#### `ZlDictTag`
|
|
2314
2312
|
|
|
@@ -2338,11 +2336,11 @@ import { ZlDictTag } from '@zl-ui-kit/components'
|
|
|
2338
2336
|
| ------------- | ------------------------------------------------------------------------- | ----------- | ---- | ------------------- | ------------------------------------------------------------------------------------------------- |
|
|
2339
2337
|
| `dictKey` | `string` | — | 是 | `dict-key="gender"` | 字典键(对应全局字典缓存的键;外部直传数据也以该键写入共享缓存) |
|
|
2340
2338
|
| `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` |
|
|
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` | 忽略字典项自带的颜色,改用标签默认配色 |
|
|
2344
2342
|
| `iconVisible` | `boolean` | `undefined` | 否 | `icon-visible` | 是否展示字典项图标(默认 true) |
|
|
2345
|
-
| `hideIcon` | `boolean` | `undefined` | 否 | `hide-icon` |
|
|
2343
|
+
| `hideIcon` | `boolean` | `undefined` | 否 | `hide-icon` | 已废弃,请用 `iconVisible` 控制图标显隐 |
|
|
2346
2344
|
|
|
2347
2345
|
> 把 `$attrs` 透传给 `zl-corner-tag`,未列出的属性会继续下传
|
|
2348
2346
|
|
|
@@ -2382,11 +2380,11 @@ import { ZlDrawer } from '@zl-ui-kit/components'
|
|
|
2382
2380
|
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
2383
2381
|
| ----------------------- | --------------------------------------------------- | ------- | ---- | ----------------------------------- | -------------------------------------------- |
|
|
2384
2382
|
| `visible` | `boolean` | `false` | 否 | `v-model:visible="value"` | `v-model` 绑定的值(`defineModel` 隐式声明) |
|
|
2385
|
-
| `onCancel` | `() => boolean \| void \| Promise<boolean \| void>` | — | 否 | `:on-cancel="async () => {}"` |
|
|
2386
|
-
| `onOk` | `() => void \| Promise<void>` | — | 否 | `:on-ok="async () => {}"` |
|
|
2387
|
-
| `autoCloseAfterConfirm` | `boolean` | `true` | 否 | `:auto-close-after-confirm="false"` |
|
|
2388
|
-
| `readonly` | `boolean` | — | 否 | `readonly` |
|
|
2389
|
-
| `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 |
|
|
2390
2388
|
|
|
2391
2389
|
**事件(emits)**
|
|
2392
2390
|
|
|
@@ -2396,10 +2394,10 @@ import { ZlDrawer } from '@zl-ui-kit/components'
|
|
|
2396
2394
|
|
|
2397
2395
|
**插槽(slots)**
|
|
2398
2396
|
|
|
2399
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
2400
|
-
| --------- | ---------- | --------------------------------- |
|
|
2401
|
-
| `default` | — | `<template #default>…</template>` |
|
|
2402
|
-
| `footer` | — | `<template #footer>…</template>` |
|
|
2397
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
2398
|
+
| --------- | ---------- | --------------------------------- | ----------------------------------- |
|
|
2399
|
+
| `default` | — | `<template #default>…</template>` | 抽屉正文内容,位于底部按钮区之上 |
|
|
2400
|
+
| `footer` | — | `<template #footer>…</template>` | 自定义底部按钮区,缺省渲染取消/确定 |
|
|
2403
2401
|
|
|
2404
2402
|
**完整示例**:见 §7 表单与交互组件 › ZlDrawer / ZlPopconfirm / ZlSwitch
|
|
2405
2403
|
|
|
@@ -2425,11 +2423,11 @@ import { ZlDynamicComponent } from '@zl-ui-kit/components'
|
|
|
2425
2423
|
|
|
2426
2424
|
**props**
|
|
2427
2425
|
|
|
2428
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
2429
|
-
| ----------- | ---------------------------------- | ----------------------------------- | ---- | ----------------- |
|
|
2430
|
-
| `model` | `Record<string, any>` | `() => ({})` | 否 | `:model="{}"` |
|
|
2431
|
-
| `value` | `[String, Number, Array, Boolean]` | `null` | 否 | `:value="value"` |
|
|
2432
|
-
| `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 |
|
|
2433
2431
|
|
|
2434
2432
|
> 选项式组件(`defineComponent`),props 定义在 `props: {}` 中
|
|
2435
2433
|
|
|
@@ -2464,10 +2462,10 @@ import { ZlPdfViewer } from '@zl-ui-kit/components'
|
|
|
2464
2462
|
|
|
2465
2463
|
**props**
|
|
2466
2464
|
|
|
2467
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
2468
|
-
| ------- | ------------------ | ------ | ---- | ------------------------------------ |
|
|
2469
|
-
| `url` | `string` | — | 否 | `url="https://example.com/file.pdf"` |
|
|
2470
|
-
| `width` | `number \| string` | — | 否 | `:width="width"` |
|
|
2465
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
2466
|
+
| ------- | ------------------ | ------ | ---- | ------------------------------------ | -------------------------------------- |
|
|
2467
|
+
| `url` | `string` | — | 否 | `url="https://example.com/file.pdf"` | PDF 文件地址,渲染时自动隐藏内置工具栏 |
|
|
2468
|
+
| `width` | `number \| string` | — | 否 | `:width="width"` | 预览区宽度,直接透传给 object 元素 |
|
|
2471
2469
|
|
|
2472
2470
|
#### `ZlLogin`
|
|
2473
2471
|
|
|
@@ -2502,17 +2500,17 @@ import { ZlLogin } from '@zl-ui-kit/components'
|
|
|
2502
2500
|
|
|
2503
2501
|
**props**
|
|
2504
2502
|
|
|
2505
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
2506
|
-
| ---------- | ------------------------------------------------------ | ------------ | ---- | ----------------------------- |
|
|
2507
|
-
| `onSubmit` | `(form: Record<string, any>) => Promise<void> \| void` | — | 否 | `:on-submit="async () => {}"` |
|
|
2508
|
-
| `config` | `ZlLoginConfig` | `() => ({})` | 否 | `:config="config"` |
|
|
2503
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
2504
|
+
| ---------- | ------------------------------------------------------ | ------------ | ---- | ----------------------------- | -------------------------------------- |
|
|
2505
|
+
| `onSubmit` | `(form: Record<string, any>) => Promise<void> \| void` | — | 否 | `:on-submit="async () => {}"` | 表单提交回调,接收用户填写的登录信息 |
|
|
2506
|
+
| `config` | `ZlLoginConfig` | `() => ({})` | 否 | `:config="config"` | 标题、背景(图片或视频)与整体布局形态 |
|
|
2509
2507
|
|
|
2510
2508
|
**插槽(slots)**
|
|
2511
2509
|
|
|
2512
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
2513
|
-
| --------- | ---------- | --------------------------------- |
|
|
2514
|
-
| `slogan` | — | `<template #slogan>…</template>` |
|
|
2515
|
-
| `default` | — | `<template #default>…</template>` |
|
|
2510
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
2511
|
+
| --------- | ---------- | --------------------------------- | ---------------------------------- |
|
|
2512
|
+
| `slogan` | — | `<template #slogan>…</template>` | 左上角的标语/品牌区 |
|
|
2513
|
+
| `default` | — | `<template #default>…</template>` | 登录主体内容,缺省渲染内置登录表单 |
|
|
2516
2514
|
|
|
2517
2515
|
#### `ZlLoginForm`
|
|
2518
2516
|
|
|
@@ -2548,15 +2546,15 @@ import { ZlLoginForm } from '@zl-ui-kit/components'
|
|
|
2548
2546
|
|
|
2549
2547
|
**props**
|
|
2550
2548
|
|
|
2551
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
2552
|
-
| ---------- | ------------------------------------------------------ | ------ | ---- | ----------------------------- |
|
|
2553
|
-
| `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 () => {}"` | 校验通过后触发,回传用户名与密码等表单值 |
|
|
2554
2552
|
|
|
2555
2553
|
**插槽(slots)**
|
|
2556
2554
|
|
|
2557
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
2558
|
-
| -------- | ---------- | -------------------------------- |
|
|
2559
|
-
| `action` | — | `<template #action>…</template>` |
|
|
2555
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
2556
|
+
| -------- | ---------- | -------------------------------- | ------------------------ |
|
|
2557
|
+
| `action` | — | `<template #action>…</template>` | 登录按钮下方的扩展操作区 |
|
|
2560
2558
|
|
|
2561
2559
|
#### `ZlEmpty`
|
|
2562
2560
|
|
|
@@ -2623,20 +2621,20 @@ import { ZlForm } from '@zl-ui-kit/components'
|
|
|
2623
2621
|
|
|
2624
2622
|
**props**
|
|
2625
2623
|
|
|
2626
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
2627
|
-
| ------- | --------------------- | ---------- | ---- | ---------------- |
|
|
2628
|
-
| `items` | `FormItem[]` | `() => []` | 否 | `:items="items"` |
|
|
2629
|
-
| `model` | `Record<string, any>` | — | 否 | `:model="{}"` |
|
|
2624
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
2625
|
+
| ------- | --------------------- | ---------- | ---- | ---------------- | ----------------------------------- |
|
|
2626
|
+
| `items` | `FormItem[]` | `() => []` | 否 | `:items="items"` | 表单字段 schema,决定渲染哪些表单项 |
|
|
2627
|
+
| `model` | `Record<string, any>` | — | 否 | `:model="{}"` | 表单值对象,不传时由组件内部自建 |
|
|
2630
2628
|
|
|
2631
2629
|
> 把 `$attrs` 透传给 `el-form`,未列出的属性会继续下传
|
|
2632
2630
|
|
|
2633
2631
|
**插槽(slots)**
|
|
2634
2632
|
|
|
2635
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
2636
|
-
| -------------- | ------------------------------------------- | --------------------------------------------------------- |
|
|
2637
|
-
| `label` | `v-bind="{ label: item.label, item }"` 展开 | `<template #label="{ label, item }">…</template>` |
|
|
2638
|
-
| `[item.model]` | `model` / `field` | `<template #[item.model]="{ model, field }">…</template>` |
|
|
2639
|
-
| `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>` | 追加在末尾的表单内容(如额外区块、按钮) |
|
|
2640
2638
|
|
|
2641
2639
|
**完整示例**:见 §7 表单与交互组件 › ZlForm —— schema 驱动
|
|
2642
2640
|
|
|
@@ -2662,9 +2660,9 @@ import { ZlFormChild } from '@zl-ui-kit/components'
|
|
|
2662
2660
|
|
|
2663
2661
|
**props**
|
|
2664
2662
|
|
|
2665
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
2666
|
-
| ------ | --------------------- | ------ | ---- | ------------ |
|
|
2667
|
-
| `item` | `Record<string, any>` | — | 是 | `:item="{}"` |
|
|
2663
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
2664
|
+
| ------ | --------------------- | ------ | ---- | ------------ | ---------------------------------------- |
|
|
2665
|
+
| `item` | `Record<string, any>` | — | 是 | `:item="{}"` | 由 ZlForm 传入:描述要渲染的控件及其入参 |
|
|
2668
2666
|
|
|
2669
2667
|
> 选项式组件(`defineComponent`),props 定义在 `props: {}` 中
|
|
2670
2668
|
|
|
@@ -2702,15 +2700,15 @@ import { ZlGridItem } from '@zl-ui-kit/components'
|
|
|
2702
2700
|
|
|
2703
2701
|
**props**
|
|
2704
2702
|
|
|
2705
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
2706
|
-
| ------ | --------------------------------------------------------------------------------- | ------ | ---- | -------------- |
|
|
2707
|
-
| `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"` | 单个描述项配置:标签、取值与渲染方式 |
|
|
2708
2706
|
|
|
2709
2707
|
**插槽(slots)**
|
|
2710
2708
|
|
|
2711
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
2712
|
-
| --------- | ---------- | --------------------------------- |
|
|
2713
|
-
| `default` | — | `<template #default>…</template>` |
|
|
2709
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
2710
|
+
| --------- | ---------- | --------------------------------- | ------------------------------------ |
|
|
2711
|
+
| `default` | — | `<template #default>…</template>` | 自定义该描述项的取值内容,替代纯文本 |
|
|
2714
2712
|
|
|
2715
2713
|
#### `ZlGrid`
|
|
2716
2714
|
|
|
@@ -2747,22 +2745,22 @@ import { ZlGrid } from '@zl-ui-kit/components'
|
|
|
2747
2745
|
|
|
2748
2746
|
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
2749
2747
|
| --------------- | ----------------------------------------------------------------- | ------------ | ---- | --------------------------- | ------------------------------------------------------------- |
|
|
2750
|
-
| `data` | `Record<string, any>` | `() => ({})` | 否 | `:data="{}"` |
|
|
2751
|
-
| `grid` | `IGridItem[]` | `() => []` | 否 | `:grid="grid"` |
|
|
2752
|
-
| `cols` | `number` | `3` | 否 | `:cols="1"` |
|
|
2753
|
-
| `border` | `boolean` | — | 否 | `border` |
|
|
2754
|
-
| `emptyChecker` | `(value: any, key: string, data: Record<string, any>) => boolean` | — | 否 | `:empty-checker="() => {}"` |
|
|
2755
|
-
| `labelWidth` | `string \| number` | `'auto'` | 否 | `:label-width="labelWidth"` |
|
|
2756
|
-
| `labelSuffix` | `string` | — | 否 | `label-suffix=":"` |
|
|
2757
|
-
| `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 时标签与值上下堆叠 |
|
|
2758
2756
|
| `emptyText` | `string` | — | 否 | `empty-text="暂无数据"` | 空值占位文案(缺省走 i18n zl.grid.empty,未接入时兜底"暂无") |
|
|
2759
2757
|
|
|
2760
2758
|
**插槽(slots)**
|
|
2761
2759
|
|
|
2762
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
2763
|
-
| ------------ | ---------- | ------------------------------------ |
|
|
2764
|
-
| `[item.key]` | — | `<template #[item.key]>…</template>` |
|
|
2765
|
-
| `default` | — | `<template #default>…</template>` |
|
|
2760
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
2761
|
+
| ------------ | ---------- | ------------------------------------ | ----------------------------------------- |
|
|
2762
|
+
| `[item.key]` | — | `<template #[item.key]>…</template>` | 按描述项的 key 命名,自定义该项的取值内容 |
|
|
2763
|
+
| `default` | — | `<template #default>…</template>` | 追加在所有描述项之后的自定义内容 |
|
|
2766
2764
|
|
|
2767
2765
|
**完整示例**:见 §7 表单与交互组件 › ZlTabs / ZlDynamicComponent / ZlGrid
|
|
2768
2766
|
|
|
@@ -2798,18 +2796,18 @@ import { ZlHorizontalTable } from '@zl-ui-kit/components'
|
|
|
2798
2796
|
|
|
2799
2797
|
**props**
|
|
2800
2798
|
|
|
2801
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
2802
|
-
| ------------ | ----------------------- | ---------- | ---- | --------------------- |
|
|
2803
|
-
| `items` | `HorizontalTableItem[]` | `() => []` | 否 | `:items="items"` |
|
|
2804
|
-
| `span` | `number \| string` | `24` | 否 | `:span="span"` |
|
|
2805
|
-
| `labelWidth` | `string` | `'88px'` | 否 | `label-width="100px"` |
|
|
2806
|
-
| `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"` | 标签文案的水平对齐方式,默认居中 |
|
|
2807
2805
|
|
|
2808
2806
|
**插槽(slots)**
|
|
2809
2807
|
|
|
2810
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
2811
|
-
| ------------- | -------------------- | -------------------------------------------- |
|
|
2812
|
-
| `[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,传出该项完整配置 |
|
|
2813
2811
|
|
|
2814
2812
|
**完整示例**:见 §8 布局与权限 › ZlHorizontalTable
|
|
2815
2813
|
|
|
@@ -2849,9 +2847,9 @@ import { ZlIcon } from '@zl-ui-kit/components'
|
|
|
2849
2847
|
|
|
2850
2848
|
**插槽(slots)**
|
|
2851
2849
|
|
|
2852
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
2853
|
-
| --------- | ---------- | --------------------------------- |
|
|
2854
|
-
| `default` | — | `<template #default>…</template>` |
|
|
2850
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
2851
|
+
| --------- | ---------- | --------------------------------- | ------------------------------------ |
|
|
2852
|
+
| `default` | — | `<template #default>…</template>` | 自定义图标内容,覆盖 icon 的自动渲染 |
|
|
2855
2853
|
|
|
2856
2854
|
#### `ZlI18nProvider`
|
|
2857
2855
|
|
|
@@ -2885,9 +2883,9 @@ import { ZlI18nProvider } from '@zl-ui-kit/components'
|
|
|
2885
2883
|
|
|
2886
2884
|
**插槽(slots)**
|
|
2887
2885
|
|
|
2888
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
2889
|
-
| --------- | ---------- | --------------------------------- |
|
|
2890
|
-
| `default` | — | `<template #default>…</template>` |
|
|
2886
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
2887
|
+
| --------- | ---------- | --------------------------------- | -------------------------------------------- |
|
|
2888
|
+
| `default` | — | `<template #default>…</template>` | 被包住的应用内容,继承 Element Plus 当前语言 |
|
|
2891
2889
|
|
|
2892
2890
|
**完整示例**:见 §1 简介与包结构 › 1.2.2 App.vue:根组件包一层 ZlI18nProvider
|
|
2893
2891
|
|
|
@@ -2955,9 +2953,9 @@ import { ZlIconLabel } from '@zl-ui-kit/components'
|
|
|
2955
2953
|
|
|
2956
2954
|
**插槽(slots)**
|
|
2957
2955
|
|
|
2958
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
2959
|
-
| --------- | ---------- | --------------------------------- |
|
|
2960
|
-
| `default` | — | `<template #default>…</template>` |
|
|
2956
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
2957
|
+
| --------- | ---------- | --------------------------------- | ------------------------------------ |
|
|
2958
|
+
| `default` | — | `<template #default>…</template>` | 图标后的文案;不传时退化为纯图标按钮 |
|
|
2961
2959
|
|
|
2962
2960
|
#### `ZlCornerTag`
|
|
2963
2961
|
|
|
@@ -2991,17 +2989,17 @@ import { ZlCornerTag } from '@zl-ui-kit/components'
|
|
|
2991
2989
|
|
|
2992
2990
|
**props**
|
|
2993
2991
|
|
|
2994
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
2995
|
-
| ---------- | -------------------------------------------------------------- | ------------- | ---- | --------------------- |
|
|
2996
|
-
| `icon` | `string` | — | 否 | `icon="zl:search"` |
|
|
2997
|
-
| `color` | `string` | — | 否 | `color="#409eff"` |
|
|
2998
|
-
| `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"` | 贴在容器的哪个角,默认右上角 |
|
|
2999
2997
|
|
|
3000
2998
|
**插槽(slots)**
|
|
3001
2999
|
|
|
3002
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
3003
|
-
| --------- | ---------- | --------------------------------- |
|
|
3004
|
-
| `default` | — | `<template #default>…</template>` |
|
|
3000
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
3001
|
+
| --------- | ---------- | --------------------------------- | ------------------------ |
|
|
3002
|
+
| `default` | — | `<template #default>…</template>` | 标签文案,显示在图标之后 |
|
|
3005
3003
|
|
|
3006
3004
|
#### `ZlLayoutSwitch`
|
|
3007
3005
|
|
|
@@ -3025,10 +3023,10 @@ import { ZlLayoutSwitch } from '@zl-ui-kit/components'
|
|
|
3025
3023
|
|
|
3026
3024
|
**props**
|
|
3027
3025
|
|
|
3028
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
3029
|
-
| ------------ | ------------------- | -------- | ---- | ----------------- |
|
|
3030
|
-
| `modelValue` | `'grid' \| 'table'` | — | 否 | `v-model="value"` |
|
|
3031
|
-
| `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`;仅在未双向绑定时作为当前布局 |
|
|
3032
3030
|
|
|
3033
3031
|
**事件(emits)**
|
|
3034
3032
|
|
|
@@ -3115,9 +3113,9 @@ import { ZlPermission } from '@zl-ui-kit/components'
|
|
|
3115
3113
|
|
|
3116
3114
|
**插槽(slots)**
|
|
3117
3115
|
|
|
3118
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
3119
|
-
| --------- | ---------- | --------------------------------- |
|
|
3120
|
-
| `default` | — | `<template #default>…</template>` |
|
|
3116
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
3117
|
+
| --------- | ---------- | --------------------------------- | ---------------------- |
|
|
3118
|
+
| `default` | — | `<template #default>…</template>` | 权限命中时才渲染的内容 |
|
|
3121
3119
|
|
|
3122
3120
|
**完整示例**:见 §8 布局与权限 › ZlPermission
|
|
3123
3121
|
|
|
@@ -3155,12 +3153,12 @@ import { ZlPopconfirm } from '@zl-ui-kit/components'
|
|
|
3155
3153
|
|
|
3156
3154
|
**props**
|
|
3157
3155
|
|
|
3158
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
3159
|
-
| ------------------- | -------- | ------ | ---- | -------------------------------------- |
|
|
3160
|
-
| `title` | `string` | — | 否 | `title="标题"` |
|
|
3161
|
-
| `content` | `string` | — | 否 | `content="删除后不可恢复,是否继续?"` |
|
|
3162
|
-
| `confirmButtonText` | `string` | — | 否 | `confirm-button-text="确定"` |
|
|
3163
|
-
| `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 默认值 |
|
|
3164
3162
|
|
|
3165
3163
|
> 把 `$attrs` 透传给 `el-popover`,未列出的属性会继续下传
|
|
3166
3164
|
|
|
@@ -3173,11 +3171,11 @@ import { ZlPopconfirm } from '@zl-ui-kit/components'
|
|
|
3173
3171
|
|
|
3174
3172
|
**插槽(slots)**
|
|
3175
3173
|
|
|
3176
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
3177
|
-
| --------- | ---------- | --------------------------------- |
|
|
3178
|
-
| `default` | — | `<template #default>…</template>` |
|
|
3179
|
-
| `title` | — | `<template #title>…</template>` |
|
|
3180
|
-
| `content` | — | `<template #content>…</template>` |
|
|
3174
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
3175
|
+
| --------- | ---------- | --------------------------------- | ------------------------------------- |
|
|
3176
|
+
| `default` | — | `<template #default>…</template>` | 触发气泡的元素,点击它才会弹出 |
|
|
3177
|
+
| `title` | — | `<template #title>…</template>` | 自定义标题行内容,缺省渲染 title 文案 |
|
|
3178
|
+
| `content` | — | `<template #content>…</template>` | 自定义正文内容,缺省渲染 content 文案 |
|
|
3181
3179
|
|
|
3182
3180
|
**完整示例**:见 §7 表单与交互组件 › ZlDrawer / ZlPopconfirm / ZlSwitch
|
|
3183
3181
|
|
|
@@ -3213,11 +3211,11 @@ import { ZlRadioTag } from '@zl-ui-kit/components'
|
|
|
3213
3211
|
|
|
3214
3212
|
**props**
|
|
3215
3213
|
|
|
3216
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
3217
|
-
| ------------ | ------------------------------- | ---------- | ---- | -------------------- |
|
|
3218
|
-
| `modelValue` | `string \| number \| undefined` | — | 否 | `v-model="value"` |
|
|
3219
|
-
| `options` | `RadioTagOption[]` | `() => []` | 否 | `:options="options"` |
|
|
3220
|
-
| `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 |
|
|
3221
3219
|
|
|
3222
3220
|
**事件(emits)**
|
|
3223
3221
|
|
|
@@ -3227,9 +3225,9 @@ import { ZlRadioTag } from '@zl-ui-kit/components'
|
|
|
3227
3225
|
|
|
3228
3226
|
**插槽(slots)**
|
|
3229
3227
|
|
|
3230
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
3231
|
-
| --------- | ------------------------------------------------------- | ----------------------------------------------------- |
|
|
3232
|
-
| `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 自定义 |
|
|
3233
3231
|
|
|
3234
3232
|
**完整示例**:见 §7 表单与交互组件 › ZlRadioTag / ZlCheckboxTag / ZlCheckAll / ZlSorter / ZlAddSub / ZlLayoutSwitch
|
|
3235
3233
|
|
|
@@ -3275,7 +3273,7 @@ import { ZlSearch } from '@zl-ui-kit/components'
|
|
|
3275
3273
|
| `immediate` | `boolean` | `true` | 否 | `:immediate="false"` | 挂载后立即执行一次查询(默认 true) |
|
|
3276
3274
|
| `disabled` | `boolean` | `false` | 否 | `disabled` | 禁用全部查询项 |
|
|
3277
3275
|
| `labelsVisible` | `boolean` | `undefined` | 否 | `labels-visible` | 是否展示「筛选条件」标签行;不传时按「是否发生溢出」自动判定 |
|
|
3278
|
-
| `showLabels` | `boolean` | `undefined` | 否 | `show-labels` |
|
|
3276
|
+
| `showLabels` | `boolean` | `undefined` | 否 | `show-labels` | 已废弃,请用 `labelsVisible` |
|
|
3279
3277
|
|
|
3280
3278
|
**事件(emits)**
|
|
3281
3279
|
|
|
@@ -3286,10 +3284,10 @@ import { ZlSearch } from '@zl-ui-kit/components'
|
|
|
3286
3284
|
|
|
3287
3285
|
**插槽(slots)**
|
|
3288
3286
|
|
|
3289
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
3290
|
-
| --------- | --------------------- | ---------------------------------------- |
|
|
3291
|
-
| `[slot]` | `v-bind="scope"` 展开 | `<template #[slot]="scope">…</template>` |
|
|
3292
|
-
| `actions` | — | `<template #actions>…</template>` |
|
|
3287
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
3288
|
+
| --------- | --------------------- | ---------------------------------------- | ------------------------------------------------- |
|
|
3289
|
+
| `[slot]` | `v-bind="scope"` 展开 | `<template #[slot]="scope">…</template>` | 动态插槽:按查询项的 model 命名,替换该项默认控件 |
|
|
3290
|
+
| `actions` | — | `<template #actions>…</template>` | 查询条下方的自定义操作区 |
|
|
3293
3291
|
|
|
3294
3292
|
**暴露(defineExpose)**
|
|
3295
3293
|
|
|
@@ -3345,11 +3343,11 @@ import { ZlSearchTable } from '@zl-ui-kit/components'
|
|
|
3345
3343
|
|
|
3346
3344
|
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
3347
3345
|
| ------------ | ----------------------------------------------------------------------------------------------------------------------------- | ---------- | ---- | --------------------------- | --------------------------------------------------------------- |
|
|
3348
|
-
| `immediate` | `boolean` | `true` | 否 | `:immediate="false"` |
|
|
3346
|
+
| `immediate` | `boolean` | `true` | 否 | `:immediate="false"` | 挂载后立即请求首屏数据,默认 true |
|
|
3349
3347
|
| `request` | `\| ((...args: any[]) => Promise<any>) \| { service: (...args: any[]) => Promise<any>; options?: Record<string, any> }` | — | 是 | `:request="async () => {}"` | 请求函数,或 { service, options }(usePageableRequest options) |
|
|
3350
|
-
| `columns` | `TableColumn[]` | `() => []` | 否 | `:columns="columns"` |
|
|
3351
|
-
| `queryItems` | `SearchItem[]` | `() => []` | 否 | `:query-items="queryItems"` |
|
|
3352
|
-
| `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 关闭分页 |
|
|
3353
3351
|
|
|
3354
3352
|
> 把 `$attrs` 透传给 `ZlTable`,未列出的属性会继续下传
|
|
3355
3353
|
|
|
@@ -3361,11 +3359,11 @@ import { ZlSearchTable } from '@zl-ui-kit/components'
|
|
|
3361
3359
|
|
|
3362
3360
|
**插槽(slots)**
|
|
3363
3361
|
|
|
3364
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
3365
|
-
| ---------------- | --------------------- | --------------------------------------------- |
|
|
3366
|
-
| `search-actions` | — | `<template #search-actions>…</template>` |
|
|
3367
|
-
| `[slot.slot]` | `v-bind="scope"` 展开 | `<template #[slot.slot]="scope">…</template>` |
|
|
3368
|
-
| `[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,可作为列插槽 |
|
|
3369
3367
|
|
|
3370
3368
|
**暴露(defineExpose)**
|
|
3371
3369
|
|
|
@@ -3410,20 +3408,20 @@ import { ZlSection } from '@zl-ui-kit/components'
|
|
|
3410
3408
|
|
|
3411
3409
|
**props**
|
|
3412
3410
|
|
|
3413
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
3414
|
-
| ------------- | --------- | ------ | ---- | ------------------ |
|
|
3415
|
-
| `icon` | `string` | — | 否 | `icon="zl:search"` | 标题图标名(zl: 前缀自动补全)
|
|
3416
|
-
| `title` | `string` | — | 否 | `title="标题"` |
|
|
3417
|
-
| `block` | `boolean` | — | 否 | `block` | 块状布局(内容区滚动)
|
|
3418
|
-
| `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` | 块状布局且隐藏溢出 |
|
|
3419
3417
|
|
|
3420
3418
|
**插槽(slots)**
|
|
3421
3419
|
|
|
3422
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
3423
|
-
| --------------- | ---------- | --------------------------------------- |
|
|
3424
|
-
| `title-prepend` | — | `<template #title-prepend>…</template>` |
|
|
3425
|
-
| `actions` | — | `<template #actions>…</template>` |
|
|
3426
|
-
| `default` | — | `<template #default>…</template>` |
|
|
3420
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
3421
|
+
| --------------- | ---------- | --------------------------------------- | ---------------------------------------------- |
|
|
3422
|
+
| `title-prepend` | — | `<template #title-prepend>…</template>` | 标题文字之后的附加内容,如数量、角标 |
|
|
3423
|
+
| `actions` | — | `<template #actions>…</template>` | 头部右侧的操作区;传了它即使无标题也会渲染头部 |
|
|
3424
|
+
| `default` | — | `<template #default>…</template>` | 区块主体内容 |
|
|
3427
3425
|
|
|
3428
3426
|
#### `ZlSorter`
|
|
3429
3427
|
|
|
@@ -3457,10 +3455,10 @@ import { ZlSorter } from '@zl-ui-kit/components'
|
|
|
3457
3455
|
|
|
3458
3456
|
**props**
|
|
3459
3457
|
|
|
3460
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
3461
|
-
| ------------ | ----------------------- | ------ | ---- | ----------------- |
|
|
3462
|
-
| `modelValue` | `'' \| 'asc' \| 'desc'` | — | 否 | `v-model="value"` |
|
|
3463
|
-
| `label` | `string` | — | 否 | `label="标签"` |
|
|
3458
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
3459
|
+
| ------------ | ----------------------- | ------ | ---- | ----------------- | ----------------------------------------- |
|
|
3460
|
+
| `modelValue` | `'' \| 'asc' \| 'desc'` | — | 否 | `v-model="value"` | 当前排序状态,空串表示不排序(`v-model`) |
|
|
3461
|
+
| `label` | `string` | — | 否 | `label="标签"` | 字段文案;可被默认插槽覆盖 |
|
|
3464
3462
|
|
|
3465
3463
|
**事件(emits)**
|
|
3466
3464
|
|
|
@@ -3471,9 +3469,9 @@ import { ZlSorter } from '@zl-ui-kit/components'
|
|
|
3471
3469
|
|
|
3472
3470
|
**插槽(slots)**
|
|
3473
3471
|
|
|
3474
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
3475
|
-
| --------- | ---------- | --------------------------------- |
|
|
3476
|
-
| `default` | — | `<template #default>…</template>` |
|
|
3472
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
3473
|
+
| --------- | ---------- | --------------------------------- | ------------------------------ |
|
|
3474
|
+
| `default` | — | `<template #default>…</template>` | 自定义字段文案,缺省显示 label |
|
|
3477
3475
|
|
|
3478
3476
|
**完整示例**:见 §7 表单与交互组件 › ZlRadioTag / ZlCheckboxTag / ZlCheckAll / ZlSorter / ZlAddSub / ZlLayoutSwitch
|
|
3479
3477
|
|
|
@@ -3501,10 +3499,10 @@ import { ZlSorterList } from '@zl-ui-kit/components'
|
|
|
3501
3499
|
|
|
3502
3500
|
**props**
|
|
3503
3501
|
|
|
3504
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
3505
|
-
| ---------- | -------------- | ---------- | ---- | -------------------- |
|
|
3506
|
-
| `sorters` | `SorterItem[]` | `() => []` | 否 | `:sorters="sorters"` |
|
|
3507
|
-
| `multiple` | `boolean` | `false` | 否 | `multiple` |
|
|
3502
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
3503
|
+
| ---------- | -------------- | ---------- | ---- | -------------------- | ---------------------------------------------- |
|
|
3504
|
+
| `sorters` | `SorterItem[]` | `() => []` | 否 | `:sorters="sorters"` | 可排序字段列表,model 为字段名 |
|
|
3505
|
+
| `multiple` | `boolean` | `false` | 否 | `multiple` | 允许多字段同时排序;关闭时只保留最后点击的字段 |
|
|
3508
3506
|
|
|
3509
3507
|
**事件(emits)**
|
|
3510
3508
|
|
|
@@ -3545,14 +3543,14 @@ import { ZlSwitch } from '@zl-ui-kit/components'
|
|
|
3545
3543
|
|
|
3546
3544
|
**props**
|
|
3547
3545
|
|
|
3548
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
3549
|
-
| ---------------- | ----------------------------- | ------- | ---- | ----------------------------------- |
|
|
3550
|
-
| `modelValue` | `boolean \| string \| number` | — | 否 | `v-model="value"` |
|
|
3551
|
-
| `defaultChecked` | `boolean` | `false` | 否 | `default-checked` |
|
|
3552
|
-
| `checkedValue` | `boolean \| string \| number` | `true` | 否 | `:checked-value="checkedValue"` |
|
|
3553
|
-
| `uncheckedValue` | `boolean \| string \| number` | `false` | 否 | `:unchecked-value="uncheckedValue"` |
|
|
3554
|
-
| `checkedText` | `string` | — | 否 | `checked-text="开"` |
|
|
3555
|
-
| `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="关"` | 未选中时显示的文案 |
|
|
3556
3554
|
|
|
3557
3555
|
> 把 `$attrs` 透传给 `el-switch`,未列出的属性会继续下传
|
|
3558
3556
|
|
|
@@ -3564,10 +3562,10 @@ import { ZlSwitch } from '@zl-ui-kit/components'
|
|
|
3564
3562
|
|
|
3565
3563
|
**插槽(slots)**
|
|
3566
3564
|
|
|
3567
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
3568
|
-
| ----------- | ---------- | ----------------------------------- |
|
|
3569
|
-
| `checked` | — | `<template #checked>…</template>` |
|
|
3570
|
-
| `unchecked` | — | `<template #unchecked>…</template>` |
|
|
3565
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
3566
|
+
| ----------- | ---------- | ----------------------------------- | ---------------------- |
|
|
3567
|
+
| `checked` | — | `<template #checked>…</template>` | 选中状态的自定义文案 |
|
|
3568
|
+
| `unchecked` | — | `<template #unchecked>…</template>` | 未选中状态的自定义文案 |
|
|
3571
3569
|
|
|
3572
3570
|
**完整示例**:见 §7 表单与交互组件 › ZlDrawer / ZlPopconfirm / ZlSwitch
|
|
3573
3571
|
|
|
@@ -3609,11 +3607,11 @@ import { ZlTable } from '@zl-ui-kit/components'
|
|
|
3609
3607
|
|
|
3610
3608
|
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
3611
3609
|
| -------------- | -------------------------------- | -------- | ---- | -------------------- | ---------------------------------------------------------------------------- |
|
|
3612
|
-
| `columns` | `TableColumn[]` | — | 是 | `:columns="columns"` |
|
|
3610
|
+
| `columns` | `TableColumn[]` | — | 是 | `:columns="columns"` | 表格列配置,定义字段、标题与渲染方式 |
|
|
3613
3611
|
| `data` | `any[] \| Record<string, any>` | — | 是 | `:data="data"` | 数组(本地数据)或 { [dataKey]: rows, pageNum, pageSize, total }(分页数据) |
|
|
3614
|
-
| `dataKey` | `string` | `'rows'` | 否 | `data-key="rows"` |
|
|
3612
|
+
| `dataKey` | `string` | `'rows'` | 否 | `data-key="rows"` | 分页数据中的行数组字段名 |
|
|
3615
3613
|
| `expandAction` | `boolean` | `false` | 否 | `expand-action` | actions 列宽加宽(参考实现 expandAction 语义) |
|
|
3616
|
-
| `pagination` | `Record<string, any> \| boolean` | — | 否 | `:pagination="{}"` |
|
|
3614
|
+
| `pagination` | `Record<string, any> \| boolean` | — | 否 | `:pagination="{}"` | 分页配置,设为 false 时隐藏分页 |
|
|
3617
3615
|
| `loading` | `boolean` | `false` | 否 | `loading` | 表格 loading(作用于表格区) |
|
|
3618
3616
|
|
|
3619
3617
|
> 把 `$attrs` 透传给 `el-table`,未列出的属性会继续下传
|
|
@@ -3628,11 +3626,11 @@ import { ZlTable } from '@zl-ui-kit/components'
|
|
|
3628
3626
|
|
|
3629
3627
|
**插槽(slots)**
|
|
3630
3628
|
|
|
3631
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
3632
|
-
| ------------------------- | --------------------- | --------------------------------------------------------- |
|
|
3633
|
-
| `expand` | `v-bind="scope"` 展开 | `<template #expand="scope">…</template>` |
|
|
3634
|
-
| `[column.headerSlotName]` | `v-bind="scope"` 展开 | `<template #[column.headerSlotName]="scope">…</template>` |
|
|
3635
|
-
| `[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 或字段名生成,参数为单元格上下文 |
|
|
3636
3634
|
|
|
3637
3635
|
**完整示例**:见 §6 数据型组件 + useRequest 体系(核心) › ③ ZlTable + ZlPagination —— 自行 usePaginationRequest
|
|
3638
3636
|
|
|
@@ -3673,23 +3671,23 @@ import { ZlTabs } from '@zl-ui-kit/components'
|
|
|
3673
3671
|
|
|
3674
3672
|
**props**
|
|
3675
3673
|
|
|
3676
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
3677
|
-
| --------- | --------- | ---------- | ---- | ------------------- |
|
|
3678
|
-
| `tabs` | `any[]` | `() => []` | 否 | `:tabs="[]"` |
|
|
3679
|
-
| `border` | `boolean` | `true` | 否 | `:border="false"` |
|
|
3680
|
-
| `fit` | `boolean` | — | 否 | `fit` |
|
|
3681
|
-
| `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"` | 是否启用导航背景色,默认启用 |
|
|
3682
3680
|
|
|
3683
3681
|
> 选项式组件(`defineComponent`),props 定义在 `props: {}` 中
|
|
3684
3682
|
> 把 `$attrs` 透传给内部组件,未列出的属性会继续下传
|
|
3685
3683
|
|
|
3686
3684
|
**插槽(slots)**
|
|
3687
3685
|
|
|
3688
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
3689
|
-
| --------- | ---------- | --------------------------------- |
|
|
3690
|
-
| `[key]` | — | `<template #[key]>…</template>` |
|
|
3691
|
-
| `default` | — | `<template #default>…</template>` |
|
|
3692
|
-
| `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>` | 页签栏右侧的附加操作区 |
|
|
3693
3691
|
|
|
3694
3692
|
**完整示例**:见 §7 表单与交互组件 › ZlTabs / ZlDynamicComponent / ZlGrid
|
|
3695
3693
|
|
|
@@ -3725,23 +3723,23 @@ import { ZlTag } from '@zl-ui-kit/components'
|
|
|
3725
3723
|
|
|
3726
3724
|
**props**
|
|
3727
3725
|
|
|
3728
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
3729
|
-
| ----------------- | ------------------------------- | ----------- | ---- | -------------------------- |
|
|
3730
|
-
| `size` | `'mini' \| 'small' \| 'medium'` | `undefined` | 否 | `size="mini"` |
|
|
3731
|
-
| `color` | `string` | `undefined` | 否 | `color="#409eff"` |
|
|
3732
|
-
| `bordered` | `boolean` | `false` | 否 | `bordered` |
|
|
3733
|
-
| `fill` | `boolean` | `false` | 否 | `fill` |
|
|
3734
|
-
| `disabled` | `boolean` | `false` | 否 | `disabled` |
|
|
3735
|
-
| `icon` | `string` | `undefined` | 否 | `icon="zl:search"` |
|
|
3736
|
-
| `dotIcon` | `boolean` | `false` | 否 | `dot-icon` |
|
|
3737
|
-
| `iconColor` | `string` | `undefined` | 否 | `icon-color="#409eff"` |
|
|
3738
|
-
| `closable` | `boolean` | `false` | 否 | `closable` |
|
|
3739
|
-
| `visible` | `boolean \| undefined` | `undefined` | 否 | `v-model:visible="value"` |
|
|
3740
|
-
| `defaultVisible` | `boolean` | `true` | 否 | `:default-visible="false"` |
|
|
3741
|
-
| `selectable` | `boolean` | `false` | 否 | `selectable` |
|
|
3742
|
-
| `selected` | `boolean \| undefined` | `undefined` | 否 | `v-model:selected="value"` |
|
|
3743
|
-
| `defaultSelected` | `boolean` | `false` | 否 | `default-selected` |
|
|
3744
|
-
| `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` | 是否使用全圆角样式 |
|
|
3745
3743
|
|
|
3746
3744
|
**事件(emits)**
|
|
3747
3745
|
|
|
@@ -3754,9 +3752,9 @@ import { ZlTag } from '@zl-ui-kit/components'
|
|
|
3754
3752
|
|
|
3755
3753
|
**插槽(slots)**
|
|
3756
3754
|
|
|
3757
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
3758
|
-
| --------- | ---------- | --------------------------------- |
|
|
3759
|
-
| `default` | — | `<template #default>…</template>` |
|
|
3755
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
3756
|
+
| --------- | ---------- | --------------------------------- | ------------ |
|
|
3757
|
+
| `default` | — | `<template #default>…</template>` | 标签文本内容 |
|
|
3760
3758
|
|
|
3761
3759
|
**完整示例**:见 §5 通用展示组件 › ZlTag — 标签
|
|
3762
3760
|
|
|
@@ -3792,15 +3790,15 @@ import { ZlText } from '@zl-ui-kit/components'
|
|
|
3792
3790
|
|
|
3793
3791
|
**props**
|
|
3794
3792
|
|
|
3795
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
3796
|
-
| ------------ | ----------------------------- | ------ | ---- | --------------------------- |
|
|
3797
|
-
| `modelValue` | `string \| number \| boolean` | — | 否 | `:model-value="modelValue"` |
|
|
3793
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
3794
|
+
| ------------ | ----------------------------- | ------ | ---- | --------------------------- | ------------------------ |
|
|
3795
|
+
| `modelValue` | `string \| number \| boolean` | — | 否 | `:model-value="modelValue"` | 未使用插槽时显示的文本值 |
|
|
3798
3796
|
|
|
3799
3797
|
**插槽(slots)**
|
|
3800
3798
|
|
|
3801
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
3802
|
-
| --------- | ---------- | --------------------------------- |
|
|
3803
|
-
| `default` | — | `<template #default>…</template>` |
|
|
3799
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
3800
|
+
| --------- | ---------- | --------------------------------- | ------------------------------- |
|
|
3801
|
+
| `default` | — | `<template #default>…</template>` | 自定义文本内容,覆盖 modelValue |
|
|
3804
3802
|
|
|
3805
3803
|
#### `ZlTitle`
|
|
3806
3804
|
|
|
@@ -3836,21 +3834,21 @@ import { ZlTitle } from '@zl-ui-kit/components'
|
|
|
3836
3834
|
|
|
3837
3835
|
**props**
|
|
3838
3836
|
|
|
3839
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
3840
|
-
| ------------- | -------------------------------- | ------ | ---- | ---------------------- |
|
|
3841
|
-
| `title` | `string` | — | 否 | `title="标题"` |
|
|
3842
|
-
| `description` | `string` | — | 否 | `description="副标题"` |
|
|
3843
|
-
| `marker` | `boolean` | `true` | 否 | `:marker="false"` |
|
|
3844
|
-
| `tooltip` | `string` | — | 否 | `tooltip="提示内容"` |
|
|
3845
|
-
| `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"` | 标题文字尺寸档位 |
|
|
3846
3844
|
|
|
3847
3845
|
**插槽(slots)**
|
|
3848
3846
|
|
|
3849
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
3850
|
-
| ------------- | ---------- | ------------------------------------- |
|
|
3851
|
-
| `default` | — | `<template #default>…</template>` |
|
|
3852
|
-
| `description` | — | `<template #description>…</template>` |
|
|
3853
|
-
| `extra` | — | `<template #extra>…</template>` |
|
|
3847
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
3848
|
+
| ------------- | ---------- | ------------------------------------- | ---------------------------------- |
|
|
3849
|
+
| `default` | — | `<template #default>…</template>` | 自定义标题内容,覆盖 title |
|
|
3850
|
+
| `description` | — | `<template #description>…</template>` | 自定义描述内容,需设置 description |
|
|
3851
|
+
| `extra` | — | `<template #extra>…</template>` | 标题右侧附加内容 |
|
|
3854
3852
|
|
|
3855
3853
|
**完整示例**:见 §5 通用展示组件 › ZlTitle — 区块标题
|
|
3856
3854
|
|
|
@@ -3888,21 +3886,21 @@ import { ZlUpload } from '@zl-ui-kit/components'
|
|
|
3888
3886
|
|
|
3889
3887
|
**props**
|
|
3890
3888
|
|
|
3891
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
3892
|
-
| ----------------------- | --------------------------------------------------------------- | ----------- | ---- | ----------------------------------------- |
|
|
3893
|
-
| `request` | `(form: FormData, config: Record<string, any>) => Promise<any>` | — | 否 | `:request="async () => {}"` | 自定义上传函数(form, config)→ Promise
|
|
3894
|
-
| `modelValue` | `string \| any[]` | `''` | 否 | `v-model="value"` |
|
|
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` | 校验文件名不得含空格
|
|
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` | 校验文件名不得含空格 |
|
|
3906
3904
|
|
|
3907
3905
|
**事件(emits)**
|
|
3908
3906
|
|
|
@@ -3912,9 +3910,9 @@ import { ZlUpload } from '@zl-ui-kit/components'
|
|
|
3912
3910
|
|
|
3913
3911
|
**插槽(slots)**
|
|
3914
3912
|
|
|
3915
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
3916
|
-
| --------- | ---------- | --------------------------------- |
|
|
3917
|
-
| `default` | — | `<template #default>…</template>` |
|
|
3913
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
3914
|
+
| --------- | ---------- | --------------------------------- | -------------------- |
|
|
3915
|
+
| `default` | — | `<template #default>…</template>` | 自定义上传触发器内容 |
|
|
3918
3916
|
|
|
3919
3917
|
**完整示例**:见 §6 数据型组件 + useRequest 体系(核心) › ⑥ ZlUpload —— 传上传 service
|
|
3920
3918
|
|
|
@@ -3960,15 +3958,15 @@ import { ZlTree } from '@zl-ui-kit/components'
|
|
|
3960
3958
|
| `inputSearchProps` | `Record<string, any>` | — | 否 | `:input-search-props="{}"` | 搜索框透传(el-input 属性) |
|
|
3961
3959
|
| `filterTreeNode` | `(value: string, data: any) => boolean` | — | 否 | `:filter-tree-node="() => {}"` | 自定义过滤函数(缺省按 title 包含匹配) |
|
|
3962
3960
|
| `disableFilter` | `boolean` | — | 否 | `disable-filter` | 关闭搜索框 |
|
|
3963
|
-
| `loading` | `boolean` | — | 否 | `loading` |
|
|
3961
|
+
| `loading` | `boolean` | — | 否 | `loading` | 是否显示树区域加载状态 |
|
|
3964
3962
|
|
|
3965
3963
|
**插槽(slots)**
|
|
3966
3964
|
|
|
3967
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
3968
|
-
| -------------- | ------------------------------ | ------------------------------------------------ |
|
|
3969
|
-
| `search-extra` | — | `<template #search-extra>…</template>` |
|
|
3970
|
-
| `title` | `v-bind="{ node, data }"` 展开 | `<template #title="{ node, data }">…</template>` |
|
|
3971
|
-
| `[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>` | 按自定义插槽列表生成名称,参数为树插槽上下文 |
|
|
3972
3970
|
|
|
3973
3971
|
**完整示例**:见 §6 数据型组件 + useRequest 体系(核心) › ⑦ ZlTree —— useRequest 绑定 data
|
|
3974
3972
|
|
|
@@ -3996,11 +3994,11 @@ import { ZlTreeSelect } from '@zl-ui-kit/components'
|
|
|
3996
3994
|
|
|
3997
3995
|
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
3998
3996
|
| ------------------- | ----------------------------------------------------- | -------------------------------------------------------------- | ---- | ------------------------ | ------------------------------------------------ |
|
|
3999
|
-
| `modelValue` | `any` | — | 否 | `v-model="value"` |
|
|
3997
|
+
| `modelValue` | `any` | — | 否 | `v-model="value"` | 当前选中节点键值或标签值列表 |
|
|
4000
3998
|
| `originTreeData` | `any[]` | — | 是 | `:origin-tree-data="[]"` | 树数据 |
|
|
4001
3999
|
| `allName` | `string` | — | 否 | `all-name="全部"` | "全部"节点名(启用全选控制条) |
|
|
4002
4000
|
| `labelInValue` | `boolean` | `false` | 否 | `label-in-value` | 返回 {label, value} 对象数组(缺省返回键值数组) |
|
|
4003
|
-
| `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="{}"` | 树节点键名、标题与子级字段映射 |
|
|
4004
4002
|
| `treeCheckStrictly` | `boolean` | `false` | 否 | `tree-check-strictly` | 父子不关联 |
|
|
4005
4003
|
|
|
4006
4004
|
> 把 `$attrs` 透传给 `el-tree-select`,未列出的属性会继续下传
|
|
@@ -4072,11 +4070,11 @@ import { ZlEditor } from '@zl-ui-kit/components/editor'
|
|
|
4072
4070
|
|
|
4073
4071
|
**props**
|
|
4074
4072
|
|
|
4075
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
4076
|
-
| ------------ | --------------------- | -------------- | ---- | ----------------------- |
|
|
4077
|
-
| `modelValue` | `string` | `''` | 否 | `v-model="value"` |
|
|
4078
|
-
| `language` | `string` | `'javascript'` | 否 | `language="javascript"` |
|
|
4079
|
-
| `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 编辑器配置,覆盖内置默认项 |
|
|
4080
4078
|
|
|
4081
4079
|
**事件(emits)**
|
|
4082
4080
|
|
|
@@ -4106,12 +4104,12 @@ import { ZlSqlEditor } from '@zl-ui-kit/components/editor'
|
|
|
4106
4104
|
|
|
4107
4105
|
**props**
|
|
4108
4106
|
|
|
4109
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
4110
|
-
| ----------------- | ------------------ | ---------- | ---- | ------------------------------- |
|
|
4111
|
-
| `modelValue` | `string` | — | 否 | `v-model="value"` |
|
|
4112
|
-
| `tableSchemas` | `SqlTableSchema[]` | `() => []` | 否 | `:table-schemas="tableSchemas"` | 表结构(补全提示)
|
|
4113
|
-
| `customKeywords` | `string[]` | `() => []` | 否 | `:custom-keywords="[]"` |
|
|
4114
|
-
| `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="[]"` | 参与补全提示的自定义函数名 |
|
|
4115
4113
|
|
|
4116
4114
|
> 把 `$attrs` 透传给 `ZlEditor`,未列出的属性会继续下传
|
|
4117
4115
|
|
|
@@ -4145,9 +4143,9 @@ import { ZlFilePreview } from '@zl-ui-kit/components/file-preview'
|
|
|
4145
4143
|
|
|
4146
4144
|
**props**
|
|
4147
4145
|
|
|
4148
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
4149
|
-
| ----- | -------- | ------ | ---- | ------------------------------------ |
|
|
4150
|
-
| `url` | `string` | — | 否 | `url="https://example.com/file.pdf"` |
|
|
4146
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
4147
|
+
| ----- | -------- | ------ | ---- | ------------------------------------ | -------------------------------------- |
|
|
4148
|
+
| `url` | `string` | — | 否 | `url="https://example.com/file.pdf"` | 文件地址,变更后自动重新拉取并识别类型 |
|
|
4151
4149
|
|
|
4152
4150
|
**完整示例**:见 §3 组件总览(47 个业务组件) › ZlFileFetchError —— 文件获取失败占位(供 ZlFilePreview 内部渲染)
|
|
4153
4151
|
|
|
@@ -4173,9 +4171,9 @@ import { ZlFileViewer } from '@zl-ui-kit/components/file-preview'
|
|
|
4173
4171
|
|
|
4174
4172
|
**props**
|
|
4175
4173
|
|
|
4176
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
4177
|
-
| ---------- | ------------------------------------------------ | -------- | ---- | ------------------ |
|
|
4178
|
-
| `fileType` | `'word' \| 'pdf' \| 'excel' \| 'ppt' \| 'image'` | `'word'` | 否 | `file-type="word"` |
|
|
4174
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
4175
|
+
| ---------- | ------------------------------------------------ | -------- | ---- | ------------------ | ------------------------- |
|
|
4176
|
+
| `fileType` | `'word' \| 'pdf' \| 'excel' \| 'ppt' \| 'image'` | `'word'` | 否 | `file-type="word"` | 指定渲染器类型,默认 word |
|
|
4179
4177
|
|
|
4180
4178
|
> 把 `$attrs` 透传给 `VueOfficePdf`,未列出的属性会继续下传
|
|
4181
4179
|
|