king-design-analyzer 2.1.7 → 2.2.0
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/components/actions.json +101 -0
- package/components/advancedset.json +127 -0
- package/components/affix.json +7 -0
- package/components/aksk.json +172 -0
- package/components/az.json +15 -2
- package/components/badge.json +7 -0
- package/components/billtypes.json +14 -2
- package/components/breadcrumb.json +7 -0
- package/components/button.json +191 -0
- package/components/buttonlink.json +73 -0
- package/components/card.json +8 -1
- package/components/cardcol.json +142 -0
- package/components/cardcols.json +121 -0
- package/components/cardcontent.json +15 -3
- package/components/cardtabs.json +172 -0
- package/components/carousel.json +7 -0
- package/components/cascader.json +520 -368
- package/components/checkbox.json +51 -4
- package/components/cidrinput.json +140 -0
- package/components/code.json +8 -1
- package/components/collapse.json +7 -0
- package/components/colorpicker.json +217 -0
- package/components/copy.json +7 -0
- package/components/copyhover.json +111 -0
- package/components/copyrow.json +124 -0
- package/components/datepicker.json +656 -524
- package/components/description.json +98 -0
- package/components/dialog.json +522 -455
- package/components/divider.json +8 -1
- package/components/drawer.json +571 -558
- package/components/dropdown.json +464 -384
- package/components/duration.json +125 -0
- package/components/editable.json +66 -0
- package/components/ellipsis.json +34 -1
- package/components/filtertablefieldsdialog.json +128 -0
- package/components/flex.json +151 -0
- package/components/form.json +131 -0
- package/components/formiteminput.json +214 -0
- package/components/formitemspinner.json +213 -0
- package/components/formitemswitch.json +185 -0
- package/components/formitemtableconfigs.json +210 -0
- package/components/grid.json +7 -0
- package/components/header.json +161 -0
- package/components/icon.json +13 -1
- package/components/icontooltip.json +19 -1
- package/components/input.json +188 -4
- package/components/instancelist.json +194 -0
- package/components/instancenum.json +196 -0
- package/components/ipinput.json +117 -0
- package/components/kspstatus.json +205 -0
- package/components/kvcode.json +120 -0
- package/components/layoutcontent.json +15 -3
- package/components/layoutlistcontent.json +148 -0
- package/components/layoutpermissioncontent.json +155 -0
- package/components/layoutstandardlist.json +275 -0
- package/components/layouttabs.json +168 -0
- package/components/lazymount.json +86 -0
- package/components/lazyteleport.json +118 -0
- package/components/menu.json +7 -0
- package/components/pagination.json +12 -0
- package/components/paginationplus.json +30 -3
- package/components/password.json +121 -0
- package/components/popover.json +457 -437
- package/components/projects.json +129 -0
- package/components/protable.json +97 -8
- package/components/queuevisualrange.json +110 -0
- package/components/radio.json +82 -2
- package/components/rate.json +199 -0
- package/components/region.json +14 -2
- package/components/search.json +221 -0
- package/components/searchinput.json +132 -0
- package/components/searchitems.json +215 -0
- package/components/searchselect.json +195 -0
- package/components/select.json +686 -666
- package/components/sidebar.json +198 -0
- package/components/skeleton.json +233 -0
- package/components/spin.json +8 -1
- package/components/split.json +260 -0
- package/components/sshkeys.json +138 -0
- package/components/status.json +60 -3
- package/components/steps.json +7 -0
- package/components/switch.json +8 -1
- package/components/table.json +18 -1
- package/components/tablecolumnid.json +14 -2
- package/components/tabs.json +12 -0
- package/components/timeline.json +213 -0
- package/components/timepicker.json +147 -3
- package/components/timerange.json +262 -0
- package/components/tip.json +7 -0
- package/components/tooltip.json +484 -395
- package/components/tour.json +418 -372
- package/components/transfer.json +27 -3
- package/components/tree.json +6 -4
- package/components/treeselect.json +556 -475
- package/components/upload.json +474 -473
- package/components/vdialog.json +308 -0
- package/components/vdrawer.json +331 -0
- package/components/virtuallist.json +7 -0
- package/dist/ast/index.d.mts +35 -1
- package/dist/ast/index.d.ts +35 -1
- package/dist/ast/index.js +5 -3
- package/dist/ast/index.mjs +3 -1
- package/dist/{chunk-DSWKLUIX.mjs → chunk-3LYQ5XFM.mjs} +1 -1
- package/dist/chunk-BI5TIQID.mjs +330 -0
- package/dist/{chunk-6QS5IGS6.js → chunk-CJGGFVQJ.js} +8 -8
- package/dist/chunk-CR3GC4H3.js +353 -0
- package/dist/{chunk-NZ6TLWMD.mjs → chunk-D2SXGGTX.mjs} +28 -17
- package/dist/{chunk-D3Y6FGWA.js → chunk-EYKZY2F3.js} +29 -18
- package/dist/chunk-JSBRDJBE.js +30 -0
- package/dist/chunk-KF5YBEM5.js +143 -0
- package/dist/chunk-KMIDURUR.mjs +33324 -0
- package/dist/chunk-QC6VTSA3.mjs +117 -0
- package/dist/chunk-SZYVGYKK.js +33350 -0
- package/dist/{chunk-WYSRJVX4.js → chunk-TA3SV4SP.js} +2 -2
- package/dist/chunk-UJCSKKID.mjs +27 -0
- package/dist/{chunk-FVSQ6BU6.mjs → chunk-XGPHQHLR.mjs} +4 -4
- package/dist/docs/index.js +1 -1
- package/dist/docs/index.mjs +1 -1
- package/dist/full/index.js +8 -6
- package/dist/full/index.mjs +6 -4
- package/dist/index.d.mts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +15 -13
- package/dist/index.mjs +7 -5
- package/dist/metadata/index.d.mts +22 -2
- package/dist/metadata/index.d.ts +22 -2
- package/dist/metadata/index.js +27 -17
- package/dist/metadata/index.mjs +27 -16
- package/dist/resolve-BsLBxlBi.d.mts +24 -0
- package/dist/resolve-BsLBxlBi.d.ts +24 -0
- package/dist/runtime/index.js +5 -4
- package/dist/runtime/index.mjs +3 -2
- package/dist/shared/index.d.mts +10 -0
- package/dist/shared/index.d.ts +10 -0
- package/dist/shared/index.js +23 -0
- package/dist/shared/index.mjs +2 -0
- package/dist/static/index.js +6 -5
- package/dist/static/index.mjs +3 -2
- package/docs_for_llm/actions.doc.md +77 -0
- package/docs_for_llm/advancedset.doc.md +89 -0
- package/docs_for_llm/affix.doc.md +15 -7
- package/docs_for_llm/aksk.doc.md +111 -0
- package/docs_for_llm/az.doc.md +17 -11
- package/docs_for_llm/badge.doc.md +6 -5
- package/docs_for_llm/billtypes.doc.md +17 -11
- package/docs_for_llm/breadcrumb.doc.md +6 -3
- package/docs_for_llm/button.doc.md +34 -18
- package/docs_for_llm/buttonlink.doc.md +55 -0
- package/docs_for_llm/card.doc.md +8 -5
- package/docs_for_llm/cardcol.doc.md +78 -0
- package/docs_for_llm/cardcols.doc.md +84 -0
- package/docs_for_llm/cardcontent.doc.md +10 -10
- package/docs_for_llm/cardtabs.doc.md +106 -0
- package/docs_for_llm/carousel.doc.md +8 -7
- package/docs_for_llm/cascader.doc.md +46 -25
- package/docs_for_llm/checkbox.doc.md +25 -13
- package/docs_for_llm/cidrinput.doc.md +83 -0
- package/docs_for_llm/code.doc.md +22 -11
- package/docs_for_llm/collapse.doc.md +9 -6
- package/docs_for_llm/colorpicker.doc.md +104 -0
- package/docs_for_llm/copy.doc.md +15 -13
- package/docs_for_llm/copyhover.doc.md +59 -0
- package/docs_for_llm/copyrow.doc.md +71 -0
- package/docs_for_llm/datepicker.doc.md +51 -39
- package/docs_for_llm/description.doc.md +75 -0
- package/docs_for_llm/descriptions.doc.md +9 -6
- package/docs_for_llm/dialog.doc.md +48 -77
- package/docs_for_llm/divider.doc.md +9 -7
- package/docs_for_llm/drawer.doc.md +43 -84
- package/docs_for_llm/dropdown.doc.md +52 -21
- package/docs_for_llm/duration.doc.md +76 -0
- package/docs_for_llm/editable.doc.md +36 -14
- package/docs_for_llm/ellipsis.doc.md +10 -5
- package/docs_for_llm/filtertablefieldsdialog.doc.md +99 -0
- package/docs_for_llm/flex.doc.md +74 -0
- package/docs_for_llm/form.doc.md +33 -14
- package/docs_for_llm/formiteminput.doc.md +128 -0
- package/docs_for_llm/formitemspinner.doc.md +105 -0
- package/docs_for_llm/formitemswitch.doc.md +113 -0
- package/docs_for_llm/formitemtableconfigs.doc.md +95 -0
- package/docs_for_llm/grid.doc.md +7 -5
- package/docs_for_llm/header.doc.md +85 -0
- package/docs_for_llm/icon.doc.md +12 -8
- package/docs_for_llm/icontooltip.doc.md +121 -0
- package/docs_for_llm/input.doc.md +90 -39
- package/docs_for_llm/instancelist.doc.md +113 -0
- package/docs_for_llm/instancenum.doc.md +95 -0
- package/docs_for_llm/ipinput.doc.md +77 -0
- package/docs_for_llm/kspstatus.doc.md +82 -0
- package/docs_for_llm/kvcode.doc.md +76 -0
- package/docs_for_llm/layoutcontent.doc.md +17 -17
- package/docs_for_llm/layoutlistcontent.doc.md +95 -0
- package/docs_for_llm/layoutpermissioncontent.doc.md +84 -0
- package/docs_for_llm/layoutstandardlist.doc.md +120 -0
- package/docs_for_llm/layouttabs.doc.md +101 -0
- package/docs_for_llm/lazymount.doc.md +73 -0
- package/docs_for_llm/lazyteleport.doc.md +76 -0
- package/docs_for_llm/menu.doc.md +14 -11
- package/docs_for_llm/message.doc.md +48 -10
- package/docs_for_llm/pagination.doc.md +30 -17
- package/docs_for_llm/paginationplus.doc.md +31 -10
- package/docs_for_llm/password.doc.md +86 -0
- package/docs_for_llm/popover.doc.md +24 -55
- package/docs_for_llm/progress.doc.md +13 -10
- package/docs_for_llm/projects.doc.md +91 -0
- package/docs_for_llm/protable.doc.md +89 -15
- package/docs_for_llm/queuevisualrange.doc.md +78 -0
- package/docs_for_llm/radio.doc.md +23 -8
- package/docs_for_llm/rate.doc.md +122 -0
- package/docs_for_llm/region.doc.md +25 -13
- package/docs_for_llm/search.doc.md +120 -0
- package/docs_for_llm/searchinput.doc.md +111 -0
- package/docs_for_llm/searchitems.doc.md +116 -0
- package/docs_for_llm/searchselect.doc.md +126 -0
- package/docs_for_llm/select.doc.md +40 -55
- package/docs_for_llm/sidebar.doc.md +133 -0
- package/docs_for_llm/skeleton.doc.md +117 -0
- package/docs_for_llm/slider.doc.md +31 -21
- package/docs_for_llm/spin.doc.md +8 -5
- package/docs_for_llm/spinner.doc.md +28 -18
- package/docs_for_llm/split.doc.md +157 -0
- package/docs_for_llm/sshkeys.doc.md +88 -0
- package/docs_for_llm/status.doc.md +14 -9
- package/docs_for_llm/steps.doc.md +10 -7
- package/docs_for_llm/switch.doc.md +17 -14
- package/docs_for_llm/table.doc.md +118 -51
- package/docs_for_llm/tablecolumnid.doc.md +36 -16
- package/docs_for_llm/tabs.doc.md +19 -10
- package/docs_for_llm/tag.doc.md +19 -10
- package/docs_for_llm/timeline.doc.md +109 -0
- package/docs_for_llm/timepicker.doc.md +57 -38
- package/docs_for_llm/timerange.doc.md +157 -0
- package/docs_for_llm/tip.doc.md +20 -11
- package/docs_for_llm/tooltip.doc.md +55 -29
- package/docs_for_llm/tour.doc.md +48 -29
- package/docs_for_llm/transfer.doc.md +40 -29
- package/docs_for_llm/tree.doc.md +65 -23
- package/docs_for_llm/treeselect.doc.md +37 -48
- package/docs_for_llm/upload.doc.md +56 -32
- package/docs_for_llm/useCRUD.doc.md +49 -0
- package/docs_for_llm/useCountdown.doc.md +43 -0
- package/docs_for_llm/useDetail.doc.md +48 -0
- package/docs_for_llm/useDialog.doc.md +46 -0
- package/docs_for_llm/useEntity.doc.md +45 -0
- package/docs_for_llm/useEventListener.doc.md +44 -0
- package/docs_for_llm/useFalseUntilTruthy.doc.md +41 -0
- package/docs_for_llm/useGetCopyAuthText.doc.md +35 -0
- package/docs_for_llm/useGetUserPermission.doc.md +43 -0
- package/docs_for_llm/useGroup.doc.md +48 -0
- package/docs_for_llm/useIdEntities.doc.md +48 -0
- package/docs_for_llm/useIdEntity.doc.md +103 -0
- package/docs_for_llm/useInterval.doc.md +43 -0
- package/docs_for_llm/useLayoutStandardList.doc.md +38 -0
- package/docs_for_llm/useMessage.doc.md +46 -0
- package/docs_for_llm/useModifyCache.doc.md +37 -0
- package/docs_for_llm/useOpenDialog.doc.md +41 -0
- package/docs_for_llm/usePagination.doc.md +60 -0
- package/docs_for_llm/usePersist.doc.md +54 -0
- package/docs_for_llm/usePoll.doc.md +41 -0
- package/docs_for_llm/useRoutePlus.doc.md +34 -0
- package/docs_for_llm/useRouterPlus.doc.md +34 -0
- package/docs_for_llm/useSearch.doc.md +68 -0
- package/docs_for_llm/useShell.doc.md +43 -0
- package/docs_for_llm/useSkip.doc.md +41 -0
- package/docs_for_llm/useStorageIdEntity.doc.md +46 -0
- package/docs_for_llm/useStore.doc.md +34 -0
- package/docs_for_llm/useTable.doc.md +57 -0
- package/docs_for_llm/useTableGroup.doc.md +47 -0
- package/docs_for_llm/useTableSort.doc.md +40 -0
- package/docs_for_llm/useToState.doc.md +112 -0
- package/docs_for_llm/useUser.doc.md +38 -0
- package/docs_for_llm/useValidForm.doc.md +41 -0
- package/docs_for_llm/vdialog.doc.md +129 -0
- package/docs_for_llm/vdrawer.doc.md +119 -0
- package/docs_for_llm/virtuallist.doc.md +6 -3
- package/hooks/useCRUD.json +61 -0
- package/hooks/useCountdown.json +49 -0
- package/hooks/useDetail.json +67 -0
- package/hooks/useDialog.json +49 -0
- package/hooks/useEntity.json +61 -0
- package/hooks/useEventListener.json +61 -0
- package/hooks/useFalseUntilTruthy.json +43 -0
- package/hooks/useGetCopyAuthText.json +36 -0
- package/hooks/useGetUserPermission.json +55 -0
- package/hooks/useGroup.json +49 -0
- package/hooks/useIdEntities.json +61 -0
- package/hooks/useInterval.json +55 -0
- package/hooks/useLayoutStandardList.json +36 -0
- package/hooks/useMessage.json +73 -0
- package/hooks/useModifyCache.json +36 -0
- package/hooks/useOpenDialog.json +43 -0
- package/hooks/usePagination.json +49 -0
- package/hooks/usePersist.json +61 -0
- package/hooks/usePoll.json +43 -0
- package/hooks/useRoutePlus.json +36 -0
- package/hooks/useRouterPlus.json +36 -0
- package/hooks/useSearch.json +56 -0
- package/hooks/useShell.json +49 -0
- package/hooks/useSkip.json +43 -0
- package/hooks/useStorageIdEntity.json +67 -0
- package/hooks/useStore.json +36 -0
- package/hooks/useTable.json +49 -0
- package/hooks/useTableGroup.json +43 -0
- package/hooks/useTableSort.json +43 -0
- package/hooks/useUser.json +36 -0
- package/hooks/useValidForm.json +43 -0
- package/package.json +12 -6
- package/dist/chunk-HDV7ETXE.mjs +0 -1055
- package/dist/chunk-HPAUCD5I.js +0 -156
- package/dist/chunk-L4DS3EXI.mjs +0 -133
- package/dist/chunk-YWY3D4J7.js +0 -1082
|
@@ -12,13 +12,13 @@ import { Message } from '@king-design/vue';
|
|
|
12
12
|
```
|
|
13
13
|
|
|
14
14
|
## 属性 (Props)
|
|
15
|
-
| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
|
|
16
|
-
| --- | --- | --- | --- | --- | --- |
|
|
17
|
-
| content | `string | VNode` | `undefined` | 否 | 提示内容 | `Message.info({ content: '提示内容' })` |
|
|
18
|
-
| duration | `number` | `5000` | 否 | 提示展示多长时间后自动关闭,传入 0 时不自动关闭,单位 ms | `Message.info('提示', 10000)` |
|
|
19
|
-
| type | `"info" | "error" | "success" | "warning"` | `"info"` | 否 | 提示类型 | `Message.success('成功')` |
|
|
20
|
-
| closable | `boolean` | `false` | 否 | 是否展示关闭按钮 | `Message.info({ content: '可关闭', closable: true })` |
|
|
21
|
-
| hideIcon | `boolean` | `false` | 否 | 是否隐藏文字前面的图标 | `Message.info({ content: '无图标', hideIcon: true })` |
|
|
15
|
+
| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
|
|
16
|
+
| --- | --- | --- | --- | --- | --- | --- |
|
|
17
|
+
| content | `string | VNode` | `undefined` | 否 | 提示内容 | - | `Message.info({ content: '提示内容' })` |
|
|
18
|
+
| duration | `number` | `5000` | 否 | 提示展示多长时间后自动关闭,传入 0 时不自动关闭,单位 ms | - | `Message.info('提示', 10000)` |
|
|
19
|
+
| type | `"info" | "error" | "success" | "warning"` | `"info"` | 否 | 提示类型 | - | `Message.success('成功')` |
|
|
20
|
+
| closable | `boolean` | `false` | 否 | 是否展示关闭按钮 | - | `Message.info({ content: '可关闭', closable: true })` |
|
|
21
|
+
| hideIcon | `boolean` | `false` | 否 | 是否隐藏文字前面的图标 | - | `Message.info({ content: '无图标', hideIcon: true })` |
|
|
22
22
|
|
|
23
23
|
## 方法 (Methods)
|
|
24
24
|
| 方法名 | 说明 | 参数 | 返回值 |
|
|
@@ -28,17 +28,49 @@ import { Message } from '@king-design/vue';
|
|
|
28
28
|
| warning | 显示警告提示消息 | `content: string | VNode | Partial<MessageProps>, duration: number` | `void` |
|
|
29
29
|
| error | 显示错误提示消息 | `content: string | VNode | Partial<MessageProps>, duration: number` | `void` |
|
|
30
30
|
|
|
31
|
+
### 方法参数说明
|
|
32
|
+
**info**
|
|
33
|
+
|
|
34
|
+
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|
|
35
|
+
| --- | --- | --- | --- | --- |
|
|
36
|
+
| content | `string | VNode | Partial<MessageProps>` | 是 | - | 提示内容或配置对象 |
|
|
37
|
+
| duration | `number` | 是 | - | 可选,显示时长(ms) |
|
|
38
|
+
|
|
39
|
+
**success**
|
|
40
|
+
|
|
41
|
+
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|
|
42
|
+
| --- | --- | --- | --- | --- |
|
|
43
|
+
| content | `string | VNode | Partial<MessageProps>` | 是 | - | 提示内容或配置对象 |
|
|
44
|
+
| duration | `number` | 是 | - | 可选,显示时长(ms) |
|
|
45
|
+
|
|
46
|
+
**warning**
|
|
47
|
+
|
|
48
|
+
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|
|
49
|
+
| --- | --- | --- | --- | --- |
|
|
50
|
+
| content | `string | VNode | Partial<MessageProps>` | 是 | - | 提示内容或配置对象 |
|
|
51
|
+
| duration | `number` | 是 | - | 可选,显示时长(ms) |
|
|
52
|
+
|
|
53
|
+
**error**
|
|
54
|
+
|
|
55
|
+
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|
|
56
|
+
| --- | --- | --- | --- | --- |
|
|
57
|
+
| content | `string | VNode | Partial<MessageProps>` | 是 | - | 提示内容或配置对象 |
|
|
58
|
+
| duration | `number` | 是 | - | 可选,显示时长(ms) |
|
|
59
|
+
|
|
31
60
|
## 常见错误与正确用法 (Anti-Hallucination)
|
|
61
|
+
### 未导入 Message 组件
|
|
32
62
|
> **错误用法**: `Message.success('成功'); // ReferenceError: Message is not defined`
|
|
33
63
|
> **正确写法**: `import { Message } from '@king-design/vue';
|
|
34
64
|
|
|
35
65
|
Message.success('成功');`
|
|
36
66
|
> **说明**: 使用 Message 前需要先从 @king-design/vue 导入
|
|
37
67
|
|
|
68
|
+
### duration 使用字符串而非数字
|
|
38
69
|
> **错误用法**: `Message.info('提示', '5000');`
|
|
39
70
|
> **正确写法**: `Message.info('提示', 5000);`
|
|
40
71
|
> **说明**: duration 必须是数字类型,单位是毫秒
|
|
41
72
|
|
|
73
|
+
### 传入配置对象时忘记设置 content
|
|
42
74
|
> **错误用法**: `Message.info({ duration: 10000 });`
|
|
43
75
|
> **正确写法**: `Message.info({ content: '提示内容', duration: 10000 });`
|
|
44
76
|
> **说明**: 使用配置对象时必须包含 content 属性
|
|
@@ -49,6 +81,8 @@ Message.success('成功');`
|
|
|
49
81
|
|
|
50
82
|
基本的消息提示
|
|
51
83
|
|
|
84
|
+
**使用的 API**: 方法: info
|
|
85
|
+
|
|
52
86
|
```vue
|
|
53
87
|
<script setup lang="ts">
|
|
54
88
|
import { Button, Message } from '@king-design/vue';
|
|
@@ -67,6 +101,8 @@ const showMessage = () => {
|
|
|
67
101
|
|
|
68
102
|
四种类型的消息提示
|
|
69
103
|
|
|
104
|
+
**使用的 API**: 方法: success, warning, error, info
|
|
105
|
+
|
|
70
106
|
```vue
|
|
71
107
|
<script setup lang="ts">
|
|
72
108
|
import { Button, Message } from '@king-design/vue';
|
|
@@ -89,7 +125,7 @@ const showInfo = () => Message.info('提示信息');
|
|
|
89
125
|
|
|
90
126
|
设置消息显示时长
|
|
91
127
|
|
|
92
|
-
**使用的 API**: 属性: duration
|
|
128
|
+
**使用的 API**: 属性: duration | 方法: info, warning
|
|
93
129
|
|
|
94
130
|
```vue
|
|
95
131
|
<script setup lang="ts">
|
|
@@ -116,7 +152,7 @@ const showPermanent = () => {
|
|
|
116
152
|
|
|
117
153
|
带关闭按钮的消息
|
|
118
154
|
|
|
119
|
-
**使用的 API**: 属性: content, closable, duration
|
|
155
|
+
**使用的 API**: 属性: content, closable, duration | 方法: info
|
|
120
156
|
|
|
121
157
|
```vue
|
|
122
158
|
<script setup lang="ts">
|
|
@@ -140,7 +176,7 @@ const showMessage = () => {
|
|
|
140
176
|
|
|
141
177
|
不显示图标的消息
|
|
142
178
|
|
|
143
|
-
**使用的 API**: 属性: content, hideIcon
|
|
179
|
+
**使用的 API**: 属性: content, hideIcon | 方法: success
|
|
144
180
|
|
|
145
181
|
```vue
|
|
146
182
|
<script setup lang="ts">
|
|
@@ -163,6 +199,8 @@ const showMessage = () => {
|
|
|
163
199
|
|
|
164
200
|
常见的 API 请求结果提示
|
|
165
201
|
|
|
202
|
+
**使用的 API**: 方法: success, error
|
|
203
|
+
|
|
166
204
|
```vue
|
|
167
205
|
<script setup lang="ts">
|
|
168
206
|
import { ref } from 'vue';
|
|
@@ -12,29 +12,36 @@ import { Pagination } from '@king-design/vue';
|
|
|
12
12
|
```
|
|
13
13
|
|
|
14
14
|
## 属性 (Props)
|
|
15
|
-
| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
|
|
16
|
-
| --- | --- | --- | --- | --- | --- |
|
|
17
|
-
| value | `number` | `1` | 否 | 当前页码,可用 v-model 双向绑定 | `<Pagination v-model="currentPage" :total="100" />` |
|
|
18
|
-
| total | `number` | `0` | 否 | 数据总条数 | `<Pagination :total="1000" />` |
|
|
19
|
-
| limit | `number` | `10` | 否 | 每页条数,可用 v-model:limit 双向绑定 | `<Pagination v-model:limit="pageSize" :total="100" />` |
|
|
20
|
-
| limits | `Array<number>` | `[10, 20, 50]` | 否 | 可选的每页条数列表 | `<Pagination :limits="[20, 50, 100, 200]" :total="1000" />` |
|
|
21
|
-
| size | `"large" | "default" | "small" | "mini"` | `"default"` | 否 | 尺寸 | `<Pagination size="small" :total="100" />` |
|
|
22
|
-
| counts | `number` | `7` | 否 | 展示的页码按钮个数 | `<Pagination :counts="5" :total="100" />` |
|
|
23
|
-
| flat | `boolean` | `false` | 否 | 是否展示无边框样式 | `<Pagination flat :total="100" />` |
|
|
24
|
-
| simple | `boolean` | `false` | 否 | 是否展示简洁样式 | `<Pagination simple :total="100" />` |
|
|
25
|
-
| showTotal | `boolean` | `true` | 否 | 是否显示总条数 | `<Pagination :showTotal="false" :total="100" />` |
|
|
26
|
-
| showGoto | `boolean` | `false` | 否 | 是否显示快速跳转框 | `<Pagination showGoto :total="100" />` |
|
|
27
|
-
| showLimits | `boolean` | `true` | 否 | 是否显示每页条数选择框 | `<Pagination :showLimits="false" :total="100" />` |
|
|
28
|
-
| disableBtn | `(page: number, limit: number) => boolean` | `undefined` | 否 | 禁用页码按钮的函数,"上一页""下一页"按钮依然可点 | `<Pagination :disableBtn="(page) => page > 10" :total="200" /></Pagination>` |
|
|
29
|
-
| disablePage | `(page: number, limit: number) => boolean` | `undefined` | 否 | 同时禁用页码按钮和"上一页""下一页"按钮的函数 | `<Pagination :disablePage="(page) => page > 10" :total="200" /></Pagination>` |
|
|
15
|
+
| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
|
|
16
|
+
| --- | --- | --- | --- | --- | --- | --- |
|
|
17
|
+
| value | `number` | `1` | 否 | 当前页码,可用 v-model 双向绑定 | - | `<Pagination v-model="currentPage" :total="100" />` |
|
|
18
|
+
| total | `number` | `0` | 否 | 数据总条数 | - | `<Pagination :total="1000" />` |
|
|
19
|
+
| limit | `number` | `10` | 否 | 每页条数,可用 v-model:limit 双向绑定 | - | `<Pagination v-model:limit="pageSize" :total="100" />` |
|
|
20
|
+
| limits | `Array<number>` | `[10, 20, 50]` | 否 | 可选的每页条数列表 | - | `<Pagination :limits="[20, 50, 100, 200]" :total="1000" />` |
|
|
21
|
+
| size | `"large" | "default" | "small" | "mini"` | `"default"` | 否 | 尺寸 | - | `<Pagination size="small" :total="100" />` |
|
|
22
|
+
| counts | `number` | `7` | 否 | 展示的页码按钮个数 | - | `<Pagination :counts="5" :total="100" />` |
|
|
23
|
+
| flat | `boolean` | `false` | 否 | 是否展示无边框样式 | - | `<Pagination flat :total="100" />` |
|
|
24
|
+
| simple | `boolean` | `false` | 否 | 是否展示简洁样式 | - | `<Pagination simple :total="100" />` |
|
|
25
|
+
| showTotal | `boolean` | `true` | 否 | 是否显示总条数 | - | `<Pagination :showTotal="false" :total="100" />` |
|
|
26
|
+
| showGoto | `boolean` | `false` | 否 | 是否显示快速跳转框 | - | `<Pagination showGoto :total="100" />` |
|
|
27
|
+
| showLimits | `boolean` | `true` | 否 | 是否显示每页条数选择框 | - | `<Pagination :showLimits="false" :total="100" />` |
|
|
28
|
+
| disableBtn | `(page: number, limit: number) => boolean` | `undefined` | 否 | 禁用页码按钮的函数,"上一页""下一页"按钮依然可点 | - | `<Pagination :disableBtn="(page) => page > 10" :total="200" /></Pagination>` |
|
|
29
|
+
| disablePage | `(page: number, limit: number) => boolean` | `undefined` | 否 | 同时禁用页码按钮和"上一页""下一页"按钮的函数 | - | `<Pagination :disablePage="(page) => page > 10" :total="200" /></Pagination>` |
|
|
30
30
|
|
|
31
31
|
## 事件 (Events)
|
|
32
32
|
| 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
|
|
33
33
|
| --- | --- | --- | --- | --- |
|
|
34
34
|
| change | `@change` | value 和 limit 变化时触发,同时变化不会重复触发 | `value: number, limit: number` | `<Pagination @change="handleChange" :total="100" />` |
|
|
35
35
|
|
|
36
|
-
###
|
|
37
|
-
**change
|
|
36
|
+
### 事件参数说明
|
|
37
|
+
**change**
|
|
38
|
+
|
|
39
|
+
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|
|
40
|
+
| --- | --- | --- | --- | --- |
|
|
41
|
+
| value | `number` | 是 | - | 当前页码 |
|
|
42
|
+
| limit | `number` | 是 | - | 每页条数 |
|
|
43
|
+
|
|
44
|
+
事件处理示例:
|
|
38
45
|
```typescript
|
|
39
46
|
const handleChange = ({value, limit}: {value: number; limit: number}) => {
|
|
40
47
|
console.log(`当前页: ${value}, 每页: ${limit}`);
|
|
@@ -43,26 +50,32 @@ const handleChange = ({value, limit}: {value: number; limit: number}) => {
|
|
|
43
50
|
```
|
|
44
51
|
|
|
45
52
|
## 常见错误与正确用法 (Anti-Hallucination)
|
|
53
|
+
### 未设置 total 属性
|
|
46
54
|
> **错误用法**: `<Pagination v-model="currentPage" />`
|
|
47
55
|
> **正确写法**: `<Pagination v-model="currentPage" :total="100" />`
|
|
48
56
|
> **说明**: 必须设置 total 属性来指定数据总条数,否则分页无法正确计算总页数
|
|
49
57
|
|
|
58
|
+
### 使用不存在的 size 值 (Pagination)
|
|
50
59
|
> **错误用法**: `<Pagination size="medium" :total="100" />`
|
|
51
60
|
> **正确写法**: `<Pagination size="default" :total="100" />`
|
|
52
61
|
> **说明**: Pagination 的 size 只支持 large, default, small, mini。常见错误是使用 medium 值。
|
|
53
62
|
|
|
63
|
+
### limit 值不在 limits 列表中
|
|
54
64
|
> **错误用法**: `<Pagination :limit="15" :limits="[10, 20, 50]" :total="100" />`
|
|
55
65
|
> **正确写法**: `<Pagination :limit="10" :limits="[10, 20, 50]" :total="100" />`
|
|
56
66
|
> **说明**: limit 的初始值应该在 limits 列表中,否则可能导致显示异常
|
|
57
67
|
|
|
68
|
+
### change 事件参数解构错误
|
|
58
69
|
> **错误用法**: `const handleChange = (value, limit) => {}`
|
|
59
70
|
> **正确写法**: `const handleChange = ({value, limit}: {value: number; limit: number}) => {}`
|
|
60
71
|
> **说明**: change 事件的参数是一个对象,需要解构获取 value 和 limit
|
|
61
72
|
|
|
73
|
+
### 错误使用 Element UI 风格事件名
|
|
62
74
|
> **错误用法**: `<Pagination @current-change="..." @size-change="..." />`
|
|
63
75
|
> **正确写法**: `<Pagination @change="..." />`
|
|
64
76
|
> **说明**: KPC Pagination 不支持 `@current-change` 或 `@size-change`,请统一使用 `@change` 事件监听页码或每页条数变化。
|
|
65
77
|
|
|
78
|
+
### 建议使用 v-model 进行双向绑定
|
|
66
79
|
> **错误用法**: `<Pagination :value="page" :limit="size" @change="..." />`
|
|
67
80
|
> **正确写法**: `<Pagination v-model="page" v-model:limit="size" />`
|
|
68
81
|
> **说明**: 推荐使用 `v-model` 绑定当前页码,`v-model:limit` 绑定每页条数,更加简洁。
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
集成选中统计和操作的分页组件,继承自 Pagination。
|
|
4
4
|
|
|
5
|
-
**关键词**: pagination, page, paging,
|
|
5
|
+
**关键词**: pagination, page, paging, 分页, 增强分页, 选中统计分页, 列表底部分页
|
|
6
6
|
|
|
7
|
-
**使用场景**:
|
|
7
|
+
**使用场景**: 列表页分页控制、批量勾选后的分页统计、带选中数量提示的资源列表分页
|
|
8
8
|
|
|
9
9
|
## 导入语句
|
|
10
10
|
```typescript
|
|
@@ -12,21 +12,42 @@ import { PaginationPlus } from '@ksyun-internal/versatile';
|
|
|
12
12
|
```
|
|
13
13
|
|
|
14
14
|
## 属性 (Props)
|
|
15
|
-
| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
|
|
16
|
-
| --- | --- | --- | --- | --- | --- |
|
|
17
|
-
|
|
|
18
|
-
|
|
|
19
|
-
|
|
|
20
|
-
|
|
|
15
|
+
| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
|
|
16
|
+
| --- | --- | --- | --- | --- | --- | --- |
|
|
17
|
+
| total | `number` | `0` | 否 | 数据总条数 | `inherited:Pagination` | `<Pagination :total="1000" />` |
|
|
18
|
+
| limit | `number` | `10` | 否 | 每页条数,可用 v-model:limit 双向绑定 | `inherited:Pagination` | `<Pagination v-model:limit="pageSize" :total="100" />` |
|
|
19
|
+
| limits | `Array<number>` | `[10, 20, 50]` | 否 | 可选的每页条数列表 | `inherited:Pagination` | `<Pagination :limits="[20, 50, 100, 200]" :total="1000" />` |
|
|
20
|
+
| size | `"large" | "default" | "small" | "mini"` | `"default"` | 否 | 尺寸 | `inherited:Pagination` | `<Pagination size="small" :total="100" />` |
|
|
21
|
+
| counts | `number` | `7` | 否 | 展示的页码按钮个数 | `inherited:Pagination` | `<Pagination :counts="5" :total="100" />` |
|
|
22
|
+
| flat | `boolean` | `false` | 否 | 是否展示无边框样式 | `inherited:Pagination` | `<Pagination flat :total="100" />` |
|
|
23
|
+
| simple | `boolean` | `false` | 否 | 是否展示简洁样式 | `inherited:Pagination` | `<Pagination simple :total="100" />` |
|
|
24
|
+
| showTotal | `boolean` | `true` | 否 | 是否显示总条数 | `inherited:Pagination` | `<Pagination :showTotal="false" :total="100" />` |
|
|
25
|
+
| showGoto | `boolean` | `false` | 否 | 是否显示快速跳转框 | `inherited:Pagination` | `<Pagination showGoto :total="100" />` |
|
|
26
|
+
| showLimits | `boolean` | `true` | 否 | 是否显示每页条数选择框 | `inherited:Pagination` | `<Pagination :showLimits="false" :total="100" />` |
|
|
27
|
+
| disableBtn | `(page: number, limit: number) => boolean` | `undefined` | 否 | 禁用页码按钮的函数,"上一页""下一页"按钮依然可点 | `inherited:Pagination` | `<Pagination :disableBtn="(page) => page > 10" :total="200" /></Pagination>` |
|
|
28
|
+
| disablePage | `(page: number, limit: number) => boolean` | `undefined` | 否 | 同时禁用页码按钮和"上一页""下一页"按钮的函数 | `inherited:Pagination` | `<Pagination :disablePage="(page) => page > 10" :total="200" /></Pagination>` |
|
|
29
|
+
| modelValue | `number` | `undefined` | 否 | 当前页码 | - | - |
|
|
30
|
+
| checkedKeys | `any[]` | `undefined` | 否 | 选中的行的 key 列表 | - | - |
|
|
31
|
+
| checkedLength | `number` | `undefined` | 否 | 选中的总数量 | - | - |
|
|
32
|
+
| showCheckedTotal | `boolean` | `true` | 否 | 是否显示选中统计信息 | - | - |
|
|
21
33
|
|
|
22
34
|
## 事件 (Events)
|
|
23
35
|
| 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
|
|
24
36
|
| --- | --- | --- | --- | --- |
|
|
25
37
|
| change | `change` | 页码或每页条数改变时触发 | `data: { page: number, limit: number }` | `<PaginationPlus @change="onChange" />` |
|
|
26
38
|
|
|
27
|
-
###
|
|
28
|
-
**change
|
|
39
|
+
### 事件参数说明
|
|
40
|
+
**change**
|
|
41
|
+
|
|
42
|
+
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|
|
43
|
+
| --- | --- | --- | --- | --- |
|
|
44
|
+
| data | `{ page: number, limit: number }` | 是 | - | 分页信息 |
|
|
45
|
+
|
|
46
|
+
事件处理示例:
|
|
29
47
|
```typescript
|
|
30
48
|
({ page, limit }) => { params.page = page; }
|
|
31
49
|
```
|
|
32
50
|
|
|
51
|
+
## 相关组件
|
|
52
|
+
Pagination, ProTable
|
|
53
|
+
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
# 密码输入 (Password)
|
|
2
|
+
|
|
3
|
+
面向密码录入的业务输入组件,内置校验能力和错误提示展示,适合实例登录密码、数据库密码等安全场景。
|
|
4
|
+
|
|
5
|
+
**关键词**: password, password input, 密码输入, 密码校验, 数据库密码, 登录密码
|
|
6
|
+
|
|
7
|
+
**使用场景**: 账号凭证录入、新建实例密码配置、数据库密码复杂度校验
|
|
8
|
+
|
|
9
|
+
## 导入语句
|
|
10
|
+
```typescript
|
|
11
|
+
import { Password } from '@ksyun-internal/versatile';
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## 属性 (Props)
|
|
15
|
+
| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
|
|
16
|
+
| --- | --- | --- | --- | --- | --- | --- |
|
|
17
|
+
| modelValue | `string` | `undefined` | 否 | 当前密码值 | - | - |
|
|
18
|
+
| validate | `string | Function` | `undefined` | 否 | 自定义校验函数或校验规则 | - | - |
|
|
19
|
+
| errorMessage | `string` | `undefined` | 否 | 校验失败时的错误提示文案 | - | - |
|
|
20
|
+
|
|
21
|
+
## 事件 (Events)
|
|
22
|
+
| 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
|
|
23
|
+
| --- | --- | --- | --- | --- |
|
|
24
|
+
| update:modelValue | `@update:modelValue` | 密码内容变化时触发,可与父级表单或强度校验逻辑联动。 | `value?: string` | - |
|
|
25
|
+
|
|
26
|
+
### 事件参数说明
|
|
27
|
+
**update:modelValue**
|
|
28
|
+
|
|
29
|
+
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|
|
30
|
+
| --- | --- | --- | --- | --- |
|
|
31
|
+
| value | `string` | 否 | - | 当前输入的密码值。 |
|
|
32
|
+
|
|
33
|
+
## 使用示例
|
|
34
|
+
### 实例登录密码录入
|
|
35
|
+
**场景**: 在创建实例或重置密码时录入并校验登录密码。
|
|
36
|
+
|
|
37
|
+
结合 validate 和错误提示控制密码输入质量。
|
|
38
|
+
|
|
39
|
+
**使用的 API**: 属性: modelValue, validate, errorMessage | 事件: update:modelValue
|
|
40
|
+
|
|
41
|
+
```vue
|
|
42
|
+
<script setup lang="ts">
|
|
43
|
+
import { ref } from 'vue';
|
|
44
|
+
import { Password } from '@ksyun-internal/versatile';
|
|
45
|
+
|
|
46
|
+
const password = ref('');
|
|
47
|
+
const validate = (value: string) => /^(?=.*[A-Z])(?=.*\d).{8,}$/.test(value);
|
|
48
|
+
</script>
|
|
49
|
+
|
|
50
|
+
<template>
|
|
51
|
+
<Password
|
|
52
|
+
v-model="password"
|
|
53
|
+
:validate="validate"
|
|
54
|
+
error-message="至少 8 位,且必须包含大写字母和数字"
|
|
55
|
+
/>
|
|
56
|
+
</template>
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### 数据库密码规则校验
|
|
60
|
+
**场景**: 在数据库创建页中校验更严格的密码复杂度要求。
|
|
61
|
+
|
|
62
|
+
通过自定义规则约束数据库密码长度和复杂度。
|
|
63
|
+
|
|
64
|
+
**使用的 API**: 属性: modelValue, validate, errorMessage | 事件: update:modelValue
|
|
65
|
+
|
|
66
|
+
```vue
|
|
67
|
+
<script setup lang="ts">
|
|
68
|
+
import { ref } from 'vue';
|
|
69
|
+
import { Password } from '@ksyun-internal/versatile';
|
|
70
|
+
|
|
71
|
+
const password = ref('');
|
|
72
|
+
const validate = (value: string) => value.length >= 12 && /[A-Z]/.test(value) && /\d/.test(value);
|
|
73
|
+
</script>
|
|
74
|
+
|
|
75
|
+
<template>
|
|
76
|
+
<Password
|
|
77
|
+
v-model="password"
|
|
78
|
+
:validate="validate"
|
|
79
|
+
error-message="至少 12 位,并包含大写字母和数字"
|
|
80
|
+
/>
|
|
81
|
+
</template>
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
## 相关组件
|
|
85
|
+
Input
|
|
86
|
+
|
|
@@ -12,77 +12,46 @@ import { Popover } from '@king-design/vue';
|
|
|
12
12
|
```
|
|
13
13
|
|
|
14
14
|
## 属性 (Props)
|
|
15
|
-
| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
|
|
16
|
-
| --- | --- | --- | --- | --- | --- |
|
|
17
|
-
| title | `string | VNode` | `undefined` | 否 | 提示的标题 | `<Popover title="确认操作"
|
|
18
|
-
| content | `string | VNode` | `undefined` | 否 | 提示的内容 | `<Popover content="你确定要执行此操作吗?"
|
|
19
|
-
| type | `"info" | "success" | "error" | "warning"` | `undefined` | 否 | 提示的类型,不同类型显示不同的图标 | `<Popover type="warning"
|
|
20
|
-
| value | `boolean` | `false` | 否 | 是否展示弹层,可用 v-model 双向绑定 | `<Popover v-model="visible"
|
|
21
|
-
| disabled | `boolean` | `false` | 否 | 是否禁用组件 | `<Popover disabled
|
|
22
|
-
| position | `Position | "left" | "bottom" | "right" | "top"` | `{my: 'center bottom-10', at: 'center top', collision: 'flipfit'}` | 否 | 弹层弹出的位置,默认在触发器正上方 | `<Popover position="right"
|
|
23
|
-
|
|
|
24
|
-
|
|
|
25
|
-
|
|
|
26
|
-
|
|
|
27
|
-
|
|
|
28
|
-
|
|
|
29
|
-
|
|
|
15
|
+
| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
|
|
16
|
+
| --- | --- | --- | --- | --- | --- | --- |
|
|
17
|
+
| title | `string | VNode` | `undefined` | 否 | 提示的标题 | - | `<Popover title="确认操作">` |
|
|
18
|
+
| content | `string | VNode` | `undefined` | 否 | 提示的内容 | - | `<Popover content="你确定要执行此操作吗?">` |
|
|
19
|
+
| type | `"info" | "success" | "error" | "warning"` | `undefined` | 否 | 提示的类型,不同类型显示不同的图标 | - | `<Popover type="warning">` |
|
|
20
|
+
| value | `boolean` | `false` | 否 | 是否展示弹层,可用 v-model 双向绑定 | - | `<Popover v-model="visible">` |
|
|
21
|
+
| disabled | `boolean` | `false` | 否 | 是否禁用组件 | - | `<Popover disabled>` |
|
|
22
|
+
| position | `Position | "left" | "bottom" | "right" | "top"` | `{my: 'center bottom-10', at: 'center top', collision: 'flipfit'}` | 否 | 弹层弹出的位置,默认在触发器正上方 | - | `<Popover position="right">` |
|
|
23
|
+
| collison | `Collision | [Collision, Collision]` | `undefined` | 否 | 碰撞检测策略,控制弹层超出边界时的处理方式。注意源码字段名拼写为 collison。 | - | `<Popover :collison="'flipfit'">` |
|
|
24
|
+
| showArrow | `boolean` | `true` | 否 | 弹层是否展示箭头 | - | `<Popover :showArrow="false">` |
|
|
25
|
+
| always | `boolean` | `false` | 否 | 是否一直保持当前展示/隐藏状态 | - | `<Popover always>` |
|
|
26
|
+
| size | `"default" | "small"` | `"default"` | 否 | 弹层尺寸 | - | `<Popover size="small">` |
|
|
27
|
+
| okText | `string` | `"确认"` | 否 | "确认"按钮文案 | - | `<Popover okText="是">` |
|
|
28
|
+
| cancelText | `string` | `"取消"` | 否 | "取消"按钮文案 | - | `<Popover cancelText="否">` |
|
|
29
|
+
| of | `"self" | "parent" | Event` | `"self"` | 否 | 弹出菜单的位置是相对当前触发元素还是父元素 | - | `<Popover of="parent">` |
|
|
30
|
+
| container | `string | ((parentDom: Element, anchor: Node | null) => Element)` | `undefined` | 否 | 指定弹出菜单追加的位置,默认追加到 body | - | `<Popover :container="() => document.body">` |
|
|
31
|
+
| alwaysShowOnClick | `boolean` | `false` | 否 | 不管什么触发方式,重复点击触发器都不隐藏弹层 | - | `<Popover alwaysShowOnClick>` |
|
|
30
32
|
|
|
31
33
|
## 事件 (Events)
|
|
32
34
|
| 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
|
|
33
35
|
| --- | --- | --- | --- | --- |
|
|
34
|
-
| show | `@show` | 弹层展示时触发 | `-` | `<Popover @show="handleShow"
|
|
35
|
-
| hide | `@hide` | 弹层隐藏时触发 | `-` | `<Popover @hide="handleHide"
|
|
36
|
-
| ok | `@ok` | 点击确认按钮时触发 | `-` | `<Popover @ok="handleOk"
|
|
37
|
-
| cancel | `@cancel` | 点击取消按钮时触发 | `-` | `<Popover @cancel="handleCancel"
|
|
38
|
-
|
|
39
|
-
### 事件处理函数示例
|
|
40
|
-
**show**:
|
|
41
|
-
```typescript
|
|
42
|
-
const handleShow = () => {
|
|
43
|
-
console.log('弹层已展示');
|
|
44
|
-
};
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
**hide**:
|
|
48
|
-
```typescript
|
|
49
|
-
const handleHide = () => {
|
|
50
|
-
console.log('弹层已隐藏');
|
|
51
|
-
};
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
**ok**:
|
|
55
|
-
```typescript
|
|
56
|
-
const handleOk = () => {
|
|
57
|
-
Message.success('已确认');
|
|
58
|
-
};
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
**cancel**:
|
|
62
|
-
```typescript
|
|
63
|
-
const handleCancel = () => {
|
|
64
|
-
console.log('已取消');
|
|
65
|
-
};
|
|
66
|
-
```
|
|
67
|
-
|
|
68
|
-
## 插槽 (Slots)
|
|
69
|
-
| 插槽名 | 说明 | 模板写法 | 示例 |
|
|
70
|
-
| --- | --- | --- | --- |
|
|
71
|
-
| title | 自定义提示标题 | `undefined` | - |
|
|
72
|
-
| content | 自定义提示内容 | `undefined` | - |
|
|
73
|
-
| footer | 自定义底部按钮 | `undefined` | - |
|
|
36
|
+
| show | `@show` | 弹层展示时触发 | `-` | `<Popover @show="handleShow">` |
|
|
37
|
+
| hide | `@hide` | 弹层隐藏时触发 | `-` | `<Popover @hide="handleHide">` |
|
|
38
|
+
| ok | `@ok` | 点击确认按钮时触发 | `-` | `<Popover @ok="handleOk">` |
|
|
39
|
+
| cancel | `@cancel` | 点击取消按钮时触发 | `-` | `<Popover @cancel="handleCancel">` |
|
|
74
40
|
|
|
75
41
|
## 常见错误与正确用法 (Anti-Hallucination)
|
|
42
|
+
### 未提供触发元素
|
|
76
43
|
> **错误用法**: `<Popover title="确认" content="内容" />`
|
|
77
44
|
> **正确写法**: `<Popover title="确认" content="内容">
|
|
78
45
|
<Button>点击</Button>
|
|
79
46
|
</Popover>`
|
|
80
47
|
> **说明**: Popover 需要包裹一个子元素作为触发器
|
|
81
48
|
|
|
49
|
+
### position 值拼写错误
|
|
82
50
|
> **错误用法**: `<Popover position="buttom">`
|
|
83
51
|
> **正确写法**: `<Popover position="bottom">`
|
|
84
52
|
> **说明**: position 只支持 top, bottom, left, right,注意拼写
|
|
85
53
|
|
|
54
|
+
### 设置 type 但未显示图标
|
|
86
55
|
> **错误用法**: `<Popover type="warning" content="警告内容">`
|
|
87
56
|
> **正确写法**: `<Popover type="warning" title="警告" content="警告内容">`
|
|
88
57
|
> **说明**: 建议同时设置 title 和 content,使提示更加清晰
|
|
@@ -12,26 +12,29 @@ import { Progress } from '@king-design/vue';
|
|
|
12
12
|
```
|
|
13
13
|
|
|
14
14
|
## 属性 (Props)
|
|
15
|
-
| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
|
|
16
|
-
| --- | --- | --- | --- | --- | --- |
|
|
17
|
-
| percent | `number | string` | `0` | 否 | 当前百分比 (0-100) | `<Progress :percent="50" />` |
|
|
18
|
-
| type | `"bar" | "circle"` | `"bar"` | 否 | 进度条类型 | `<Progress type="circle" :percent="75" />` |
|
|
19
|
-
| status | `"success" | "error" | "active" | "normal" | "warning"` | `"active"` | 否 | 进度条状态,决定颜色 | `<Progress :percent="100" status="success" />` |
|
|
20
|
-
| size | `"default" | "small" | "mini"` | `"default"` | 否 | 进度条尺寸 | `<Progress :percent="50" size="small" />` |
|
|
21
|
-
| showOuterText | `boolean` | `true` | 否 | 是否展示进度条后面的百分比文字 | `<Progress :percent="50" :showOuterText="false" />` |
|
|
22
|
-
| showInnerText | `boolean` | `false` | 否 | 是否展示进度条上面的百分比文字 | `<Progress :percent="50" showInnerText />` |
|
|
23
|
-
| strokeWidth | `number` | `10` | 否 | 圆形进度条的线条宽度,单位 px,只对 type="circle" 有效 | `<Progress type="circle" :percent="50" :strokeWidth="8" />` |
|
|
24
|
-
| color | `string | Color[] | ((percent: number) => string)` | `undefined` | 否 | 进度条背景颜色,支持固定颜色、根据百分比的颜色数组或函数。会覆盖 status 设置的颜色 | `<Progress :percent="50" color="#8e44ad" />` |
|
|
15
|
+
| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
|
|
16
|
+
| --- | --- | --- | --- | --- | --- | --- |
|
|
17
|
+
| percent | `number | string` | `0` | 否 | 当前百分比 (0-100) | - | `<Progress :percent="50" />` |
|
|
18
|
+
| type | `"bar" | "circle"` | `"bar"` | 否 | 进度条类型 | - | `<Progress type="circle" :percent="75" />` |
|
|
19
|
+
| status | `"success" | "error" | "active" | "normal" | "warning"` | `"active"` | 否 | 进度条状态,决定颜色 | - | `<Progress :percent="100" status="success" />` |
|
|
20
|
+
| size | `"default" | "small" | "mini"` | `"default"` | 否 | 进度条尺寸 | - | `<Progress :percent="50" size="small" />` |
|
|
21
|
+
| showOuterText | `boolean` | `true` | 否 | 是否展示进度条后面的百分比文字 | - | `<Progress :percent="50" :showOuterText="false" />` |
|
|
22
|
+
| showInnerText | `boolean` | `false` | 否 | 是否展示进度条上面的百分比文字 | - | `<Progress :percent="50" showInnerText />` |
|
|
23
|
+
| strokeWidth | `number` | `10` | 否 | 圆形进度条的线条宽度,单位 px,只对 type="circle" 有效 | - | `<Progress type="circle" :percent="50" :strokeWidth="8" />` |
|
|
24
|
+
| color | `string | Color[] | ((percent: number) => string)` | `undefined` | 否 | 进度条背景颜色,支持固定颜色、根据百分比的颜色数组或函数。会覆盖 status 设置的颜色 | - | `<Progress :percent="50" color="#8e44ad" />` |
|
|
25
25
|
|
|
26
26
|
## 常见错误与正确用法 (Anti-Hallucination)
|
|
27
|
+
### percent 使用字符串而非数字
|
|
27
28
|
> **错误用法**: `<Progress percent="50" />`
|
|
28
29
|
> **正确写法**: `<Progress :percent="50" />`
|
|
29
30
|
> **说明**: percent 是数字类型,需要使用 v-bind 语法 (:percent)
|
|
30
31
|
|
|
32
|
+
### percent 超出 0-100 范围
|
|
31
33
|
> **错误用法**: `<Progress :percent="150" />`
|
|
32
34
|
> **正确写法**: `<Progress :percent="100" />`
|
|
33
35
|
> **说明**: percent 的有效范围是 0-100
|
|
34
36
|
|
|
37
|
+
### 在条形进度条上使用 strokeWidth
|
|
35
38
|
> **错误用法**: `<Progress type="bar" :percent="50" :strokeWidth="5" /> <!-- strokeWidth 无效 -->`
|
|
36
39
|
> **正确写法**: `<Progress type="circle" :percent="50" :strokeWidth="5" />`
|
|
37
40
|
> **说明**: strokeWidth 只对 type="circle" 圆形进度条有效
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
# 项目选择 (Projects)
|
|
2
|
+
|
|
3
|
+
用于拉取并选择当前账号项目归属的业务组件,适合在创建资源、共享资源和权限分配场景中选择项目上下文。
|
|
4
|
+
|
|
5
|
+
**关键词**: projects, project selector, 项目选择, 项目归属, 资源所属项目, project select, 项目下拉, 项目切换
|
|
6
|
+
|
|
7
|
+
**使用场景**: 项目归属选择、资源所属项目配置、按项目切换资源上下文、选择后联动项目实体信息
|
|
8
|
+
|
|
9
|
+
## 导入语句
|
|
10
|
+
```typescript
|
|
11
|
+
import { Projects } from '@ksyun-internal/versatile';
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## 属性 (Props)
|
|
15
|
+
| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
|
|
16
|
+
| --- | --- | --- | --- | --- | --- | --- |
|
|
17
|
+
| modelValue | `number` | `undefined` | 否 | 当前选中的项目 ID | - | - |
|
|
18
|
+
| href | `string` | `undefined` | 否 | 跳转到项目管理页的链接 | - | - |
|
|
19
|
+
|
|
20
|
+
## 事件 (Events)
|
|
21
|
+
| 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
|
|
22
|
+
| --- | --- | --- | --- | --- |
|
|
23
|
+
| update:modelValue | `@update:modelValue` | 选中的项目 ID 变化时触发,适合与表单主值同步。 | `value?: number` | - |
|
|
24
|
+
| update:project | `@update:project` | 选中的完整项目对象变化时触发,便于读取项目名称或配额信息。 | `value?: ProjectItem` | - |
|
|
25
|
+
|
|
26
|
+
### 事件参数说明
|
|
27
|
+
**update:modelValue**
|
|
28
|
+
|
|
29
|
+
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|
|
30
|
+
| --- | --- | --- | --- | --- |
|
|
31
|
+
| value | `number` | 否 | - | 当前选中的项目 ID。 |
|
|
32
|
+
|
|
33
|
+
**update:project**
|
|
34
|
+
|
|
35
|
+
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|
|
36
|
+
| --- | --- | --- | --- | --- |
|
|
37
|
+
| value | `ProjectItem` | 否 | - | 当前选中的完整项目对象。 |
|
|
38
|
+
|
|
39
|
+
## 使用示例
|
|
40
|
+
### 选择资源所属项目
|
|
41
|
+
**场景**: 在创建资源或授权时指定资源归属项目。
|
|
42
|
+
|
|
43
|
+
在创建资源时把项目选择作为基础表单项。
|
|
44
|
+
|
|
45
|
+
**使用的 API**: 属性: modelValue, href | 事件: update:modelValue, update:project
|
|
46
|
+
|
|
47
|
+
```vue
|
|
48
|
+
<script setup lang="ts">
|
|
49
|
+
import { ref } from 'vue';
|
|
50
|
+
import { Projects } from '@ksyun-internal/versatile';
|
|
51
|
+
|
|
52
|
+
const projectId = ref(1001);
|
|
53
|
+
</script>
|
|
54
|
+
|
|
55
|
+
<template>
|
|
56
|
+
<Projects v-model="projectId" href="/project/list" />
|
|
57
|
+
</template>
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
### 同步项目实体信息
|
|
61
|
+
**场景**: 在选择项目后联动展示项目名称、配额或权限等附加信息。
|
|
62
|
+
|
|
63
|
+
监听项目实体变化,在选择项目后立即拿到完整项目信息。
|
|
64
|
+
|
|
65
|
+
**使用的 API**: 属性: modelValue, href | 事件: update:modelValue, update:project
|
|
66
|
+
|
|
67
|
+
```vue
|
|
68
|
+
<script setup lang="ts">
|
|
69
|
+
import { ref } from 'vue';
|
|
70
|
+
import { Projects } from '@ksyun-internal/versatile';
|
|
71
|
+
|
|
72
|
+
const projectId = ref<number | undefined>(undefined);
|
|
73
|
+
const projectName = ref('未选择');
|
|
74
|
+
const handleProjectChange = (project: { name?: string }) => {
|
|
75
|
+
projectName.value = project?.name || '未选择';
|
|
76
|
+
};
|
|
77
|
+
</script>
|
|
78
|
+
|
|
79
|
+
<template>
|
|
80
|
+
<Projects
|
|
81
|
+
v-model="projectId"
|
|
82
|
+
href="/project/list"
|
|
83
|
+
@update:project="handleProjectChange"
|
|
84
|
+
/>
|
|
85
|
+
<div>当前项目:{{ projectName }}</div>
|
|
86
|
+
</template>
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
## 相关组件
|
|
90
|
+
Region, AZ
|
|
91
|
+
|