king-design-analyzer 2.1.9 → 2.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (327) hide show
  1. package/components/actions.json +109 -0
  2. package/components/advancedset.json +128 -0
  3. package/components/affix.json +8 -0
  4. package/components/aksk.json +172 -0
  5. package/components/anchor.json +220 -0
  6. package/components/anchorlink.json +111 -0
  7. package/components/az.json +15 -2
  8. package/components/badge.json +8 -0
  9. package/components/billtypes.json +14 -2
  10. package/components/breadcrumb.json +9 -1
  11. package/components/button.json +192 -0
  12. package/components/buttonlink.json +74 -0
  13. package/components/card.json +14 -4
  14. package/components/cardcol.json +142 -0
  15. package/components/cardcols.json +121 -0
  16. package/components/cardcontent.json +20 -3
  17. package/components/cardtabs.json +172 -0
  18. package/components/carousel.json +7 -0
  19. package/components/cascader.json +576 -368
  20. package/components/checkbox.json +51 -4
  21. package/components/cidrinput.json +140 -0
  22. package/components/code.json +8 -1
  23. package/components/collapse.json +335 -341
  24. package/components/colorpicker.json +217 -0
  25. package/components/configprovider.json +96 -0
  26. package/components/copy.json +7 -0
  27. package/components/copyhover.json +111 -0
  28. package/components/copyrow.json +125 -0
  29. package/components/datepicker.json +656 -524
  30. package/components/description.json +98 -0
  31. package/components/descriptions.json +10 -3
  32. package/components/diagram.json +295 -0
  33. package/components/dialog.json +526 -455
  34. package/components/divider.json +9 -1
  35. package/components/drawer.json +603 -558
  36. package/components/dropdown.json +464 -384
  37. package/components/duration.json +125 -0
  38. package/components/editable.json +66 -0
  39. package/components/ellipsis.json +34 -1
  40. package/components/filtertablefieldsdialog.json +128 -0
  41. package/components/flex.json +152 -0
  42. package/components/form.json +143 -3
  43. package/components/formiteminput.json +214 -0
  44. package/components/formitemspinner.json +213 -0
  45. package/components/formitemswitch.json +185 -0
  46. package/components/formitemtableconfigs.json +210 -0
  47. package/components/grid.json +7 -0
  48. package/components/header.json +165 -0
  49. package/components/icon.json +13 -1
  50. package/components/icontooltip.json +19 -1
  51. package/components/input.json +196 -8
  52. package/components/instancelist.json +194 -0
  53. package/components/instancenum.json +196 -0
  54. package/components/ipinput.json +117 -0
  55. package/components/kspstatus.json +205 -0
  56. package/components/kvcode.json +120 -0
  57. package/components/layoutcontent.json +24 -3
  58. package/components/layoutlistcontent.json +157 -0
  59. package/components/layoutpermissioncontent.json +156 -0
  60. package/components/layoutstandardlist.json +276 -0
  61. package/components/layouttabs.json +168 -0
  62. package/components/lazymount.json +87 -0
  63. package/components/lazyteleport.json +119 -0
  64. package/components/menu.json +11 -3
  65. package/components/notification.json +351 -0
  66. package/components/pagination.json +12 -0
  67. package/components/paginationplus.json +30 -3
  68. package/components/password.json +121 -0
  69. package/components/popover.json +457 -437
  70. package/components/projects.json +129 -0
  71. package/components/protable.json +99 -8
  72. package/components/queuevisualrange.json +110 -0
  73. package/components/radio.json +82 -2
  74. package/components/rate.json +200 -0
  75. package/components/region.json +14 -2
  76. package/components/scrollselect.json +140 -0
  77. package/components/search.json +221 -0
  78. package/components/searchinput.json +132 -0
  79. package/components/searchitems.json +215 -0
  80. package/components/searchselect.json +195 -0
  81. package/components/select.json +749 -666
  82. package/components/sidebar.json +198 -0
  83. package/components/skeleton.json +234 -0
  84. package/components/slider.json +12 -2
  85. package/components/spin.json +10 -2
  86. package/components/spinner.json +419 -429
  87. package/components/split.json +263 -0
  88. package/components/sshkeys.json +138 -0
  89. package/components/status.json +60 -3
  90. package/components/steps.json +7 -0
  91. package/components/switch.json +12 -3
  92. package/components/table.json +24 -2
  93. package/components/tablecolumnid.json +14 -2
  94. package/components/tabs.json +14 -2
  95. package/components/tag.json +8 -5
  96. package/components/timeline.json +215 -0
  97. package/components/timepicker.json +147 -3
  98. package/components/timerange.json +262 -0
  99. package/components/tip.json +27 -0
  100. package/components/tooltip.json +492 -395
  101. package/components/tour.json +418 -372
  102. package/components/transfer.json +79 -8
  103. package/components/tree.json +28 -5
  104. package/components/treeselect.json +612 -475
  105. package/components/upload.json +474 -473
  106. package/components/vdialog.json +309 -0
  107. package/components/vdrawer.json +335 -0
  108. package/components/virtuallist.json +7 -0
  109. package/dist/ast/index.d.mts +65 -2
  110. package/dist/ast/index.d.ts +65 -2
  111. package/dist/ast/index.js +4 -3
  112. package/dist/ast/index.mjs +2 -1
  113. package/dist/chunk-4OTQAQ6J.mjs +341 -0
  114. package/dist/{chunk-F26GUCGG.js → chunk-4WXOYU2N.js} +32 -9
  115. package/dist/chunk-6HOIRUQB.mjs +409 -0
  116. package/dist/chunk-DHLWNT53.js +364 -0
  117. package/dist/{chunk-H2ET6MMM.mjs → chunk-IPJJMPOO.mjs} +155 -66
  118. package/dist/{chunk-WYSRJVX4.js → chunk-JJ6AB4ZH.js} +2 -2
  119. package/dist/{chunk-2W6OCG2S.js → chunk-JNRGUR3O.js} +155 -67
  120. package/dist/chunk-KF5YBEM5.js +143 -0
  121. package/dist/{chunk-OJOHB64C.mjs → chunk-LRTDTFFQ.mjs} +28 -5
  122. package/dist/{chunk-DSWKLUIX.mjs → chunk-NZL6T22V.mjs} +1 -1
  123. package/dist/chunk-QC6VTSA3.mjs +117 -0
  124. package/dist/chunk-V5N65MRP.js +411 -0
  125. package/dist/full/index.d.mts +2 -0
  126. package/dist/full/index.d.ts +2 -0
  127. package/dist/full/index.js +7 -6
  128. package/dist/full/index.mjs +5 -4
  129. package/dist/index.d.mts +1 -0
  130. package/dist/index.d.ts +1 -0
  131. package/dist/index.js +14 -13
  132. package/dist/index.mjs +6 -5
  133. package/dist/metadata/index.d.mts +38 -3
  134. package/dist/metadata/index.d.ts +38 -3
  135. package/dist/metadata/index.js +26 -16
  136. package/dist/metadata/index.mjs +26 -15
  137. package/dist/resolve-BsLBxlBi.d.mts +24 -0
  138. package/dist/resolve-BsLBxlBi.d.ts +24 -0
  139. package/dist/runtime/index.d.mts +2 -0
  140. package/dist/runtime/index.d.ts +2 -0
  141. package/dist/runtime/index.js +4 -4
  142. package/dist/runtime/index.mjs +2 -2
  143. package/dist/shared/index.d.mts +10 -0
  144. package/dist/shared/index.d.ts +10 -0
  145. package/dist/shared/index.js +23 -0
  146. package/dist/shared/index.mjs +2 -0
  147. package/dist/static/index.js +5 -5
  148. package/dist/static/index.mjs +2 -2
  149. package/docs_for_llm/actions.doc.md +87 -0
  150. package/docs_for_llm/advancedset.doc.md +98 -0
  151. package/docs_for_llm/affix.doc.md +20 -7
  152. package/docs_for_llm/aksk.doc.md +111 -0
  153. package/docs_for_llm/anchor.doc.md +155 -0
  154. package/docs_for_llm/anchorlink.doc.md +75 -0
  155. package/docs_for_llm/az.doc.md +17 -11
  156. package/docs_for_llm/badge.doc.md +11 -5
  157. package/docs_for_llm/billtypes.doc.md +17 -11
  158. package/docs_for_llm/breadcrumb.doc.md +80 -4
  159. package/docs_for_llm/button.doc.md +91 -18
  160. package/docs_for_llm/buttonlink.doc.md +64 -0
  161. package/docs_for_llm/card.doc.md +58 -8
  162. package/docs_for_llm/cardcol.doc.md +78 -0
  163. package/docs_for_llm/cardcols.doc.md +84 -0
  164. package/docs_for_llm/cardcontent.doc.md +31 -10
  165. package/docs_for_llm/cardtabs.doc.md +106 -0
  166. package/docs_for_llm/carousel.doc.md +79 -7
  167. package/docs_for_llm/cascader.doc.md +106 -23
  168. package/docs_for_llm/checkbox.doc.md +25 -13
  169. package/docs_for_llm/cidrinput.doc.md +83 -0
  170. package/docs_for_llm/code.doc.md +22 -11
  171. package/docs_for_llm/collapse.doc.md +147 -14
  172. package/docs_for_llm/colorpicker.doc.md +104 -0
  173. package/docs_for_llm/configprovider.doc.md +77 -0
  174. package/docs_for_llm/copy.doc.md +15 -13
  175. package/docs_for_llm/copyhover.doc.md +59 -0
  176. package/docs_for_llm/copyrow.doc.md +80 -0
  177. package/docs_for_llm/datepicker.doc.md +66 -35
  178. package/docs_for_llm/description.doc.md +75 -0
  179. package/docs_for_llm/descriptions.doc.md +122 -10
  180. package/docs_for_llm/diagram.doc.md +343 -0
  181. package/docs_for_llm/dialog.doc.md +97 -77
  182. package/docs_for_llm/divider.doc.md +14 -7
  183. package/docs_for_llm/drawer.doc.md +114 -69
  184. package/docs_for_llm/dropdown.doc.md +290 -22
  185. package/docs_for_llm/duration.doc.md +76 -0
  186. package/docs_for_llm/editable.doc.md +36 -14
  187. package/docs_for_llm/ellipsis.doc.md +10 -5
  188. package/docs_for_llm/filtertablefieldsdialog.doc.md +99 -0
  189. package/docs_for_llm/flex.doc.md +83 -0
  190. package/docs_for_llm/form.doc.md +196 -18
  191. package/docs_for_llm/formiteminput.doc.md +128 -0
  192. package/docs_for_llm/formitemspinner.doc.md +105 -0
  193. package/docs_for_llm/formitemswitch.doc.md +113 -0
  194. package/docs_for_llm/formitemtableconfigs.doc.md +95 -0
  195. package/docs_for_llm/grid.doc.md +78 -5
  196. package/docs_for_llm/header.doc.md +114 -0
  197. package/docs_for_llm/icon.doc.md +12 -8
  198. package/docs_for_llm/icontooltip.doc.md +121 -0
  199. package/docs_for_llm/input.doc.md +199 -41
  200. package/docs_for_llm/instancelist.doc.md +113 -0
  201. package/docs_for_llm/instancenum.doc.md +95 -0
  202. package/docs_for_llm/ipinput.doc.md +77 -0
  203. package/docs_for_llm/kspstatus.doc.md +82 -0
  204. package/docs_for_llm/kvcode.doc.md +76 -0
  205. package/docs_for_llm/layoutcontent.doc.md +54 -17
  206. package/docs_for_llm/layoutlistcontent.doc.md +168 -0
  207. package/docs_for_llm/layoutpermissioncontent.doc.md +93 -0
  208. package/docs_for_llm/layoutstandardlist.doc.md +129 -0
  209. package/docs_for_llm/layouttabs.doc.md +101 -0
  210. package/docs_for_llm/lazymount.doc.md +82 -0
  211. package/docs_for_llm/lazyteleport.doc.md +85 -0
  212. package/docs_for_llm/menu.doc.md +139 -14
  213. package/docs_for_llm/message.doc.md +93 -10
  214. package/docs_for_llm/notification.doc.md +214 -0
  215. package/docs_for_llm/pagination.doc.md +30 -17
  216. package/docs_for_llm/paginationplus.doc.md +31 -10
  217. package/docs_for_llm/password.doc.md +86 -0
  218. package/docs_for_llm/popover.doc.md +24 -55
  219. package/docs_for_llm/progress.doc.md +13 -10
  220. package/docs_for_llm/projects.doc.md +91 -0
  221. package/docs_for_llm/protable.doc.md +98 -15
  222. package/docs_for_llm/queuevisualrange.doc.md +78 -0
  223. package/docs_for_llm/radio.doc.md +23 -8
  224. package/docs_for_llm/rate.doc.md +127 -0
  225. package/docs_for_llm/region.doc.md +25 -13
  226. package/docs_for_llm/scrollselect.doc.md +90 -0
  227. package/docs_for_llm/search.doc.md +120 -0
  228. package/docs_for_llm/searchinput.doc.md +111 -0
  229. package/docs_for_llm/searchitems.doc.md +116 -0
  230. package/docs_for_llm/searchselect.doc.md +126 -0
  231. package/docs_for_llm/select.doc.md +208 -49
  232. package/docs_for_llm/sidebar.doc.md +133 -0
  233. package/docs_for_llm/skeleton.doc.md +152 -0
  234. package/docs_for_llm/slider.doc.md +42 -22
  235. package/docs_for_llm/spin.doc.md +18 -6
  236. package/docs_for_llm/spinner.doc.md +28 -18
  237. package/docs_for_llm/split.doc.md +170 -0
  238. package/docs_for_llm/sshkeys.doc.md +88 -0
  239. package/docs_for_llm/status.doc.md +14 -9
  240. package/docs_for_llm/steps.doc.md +81 -7
  241. package/docs_for_llm/switch.doc.md +32 -16
  242. package/docs_for_llm/table.doc.md +317 -55
  243. package/docs_for_llm/tablecolumnid.doc.md +36 -16
  244. package/docs_for_llm/tabs.doc.md +117 -12
  245. package/docs_for_llm/tag.doc.md +167 -15
  246. package/docs_for_llm/timeline.doc.md +187 -0
  247. package/docs_for_llm/timepicker.doc.md +74 -36
  248. package/docs_for_llm/timerange.doc.md +157 -0
  249. package/docs_for_llm/tip.doc.md +50 -11
  250. package/docs_for_llm/tooltip.doc.md +99 -27
  251. package/docs_for_llm/tour.doc.md +125 -28
  252. package/docs_for_llm/transfer.doc.md +99 -33
  253. package/docs_for_llm/tree.doc.md +129 -24
  254. package/docs_for_llm/treeselect.doc.md +101 -44
  255. package/docs_for_llm/upload.doc.md +63 -32
  256. package/docs_for_llm/useCRUD.doc.md +49 -0
  257. package/docs_for_llm/useCountdown.doc.md +43 -0
  258. package/docs_for_llm/useDetail.doc.md +48 -0
  259. package/docs_for_llm/useDialog.doc.md +46 -0
  260. package/docs_for_llm/useEntity.doc.md +45 -0
  261. package/docs_for_llm/useEventListener.doc.md +44 -0
  262. package/docs_for_llm/useFalseUntilTruthy.doc.md +41 -0
  263. package/docs_for_llm/useGetCopyAuthText.doc.md +35 -0
  264. package/docs_for_llm/useGetUserPermission.doc.md +43 -0
  265. package/docs_for_llm/useGroup.doc.md +48 -0
  266. package/docs_for_llm/useIdEntities.doc.md +48 -0
  267. package/docs_for_llm/useIdEntity.doc.md +103 -0
  268. package/docs_for_llm/useInterval.doc.md +43 -0
  269. package/docs_for_llm/useLayoutStandardList.doc.md +38 -0
  270. package/docs_for_llm/useMessage.doc.md +46 -0
  271. package/docs_for_llm/useModifyCache.doc.md +37 -0
  272. package/docs_for_llm/useOpenDialog.doc.md +41 -0
  273. package/docs_for_llm/usePagination.doc.md +60 -0
  274. package/docs_for_llm/usePersist.doc.md +54 -0
  275. package/docs_for_llm/usePoll.doc.md +41 -0
  276. package/docs_for_llm/useRoutePlus.doc.md +34 -0
  277. package/docs_for_llm/useRouterPlus.doc.md +34 -0
  278. package/docs_for_llm/useSearch.doc.md +68 -0
  279. package/docs_for_llm/useShell.doc.md +43 -0
  280. package/docs_for_llm/useSkip.doc.md +41 -0
  281. package/docs_for_llm/useStorageIdEntity.doc.md +46 -0
  282. package/docs_for_llm/useStore.doc.md +34 -0
  283. package/docs_for_llm/useTable.doc.md +57 -0
  284. package/docs_for_llm/useTableGroup.doc.md +47 -0
  285. package/docs_for_llm/useTableSort.doc.md +40 -0
  286. package/docs_for_llm/useToState.doc.md +112 -0
  287. package/docs_for_llm/useUser.doc.md +38 -0
  288. package/docs_for_llm/useValidForm.doc.md +41 -0
  289. package/docs_for_llm/vdialog.doc.md +154 -0
  290. package/docs_for_llm/vdrawer.doc.md +148 -0
  291. package/docs_for_llm/virtuallist.doc.md +157 -3
  292. package/hooks/useCRUD.json +61 -0
  293. package/hooks/useCountdown.json +49 -0
  294. package/hooks/useDetail.json +67 -0
  295. package/hooks/useDialog.json +49 -0
  296. package/hooks/useEntity.json +61 -0
  297. package/hooks/useEventListener.json +61 -0
  298. package/hooks/useFalseUntilTruthy.json +43 -0
  299. package/hooks/useGetCopyAuthText.json +36 -0
  300. package/hooks/useGetUserPermission.json +55 -0
  301. package/hooks/useGroup.json +49 -0
  302. package/hooks/useIdEntities.json +61 -0
  303. package/hooks/useInterval.json +55 -0
  304. package/hooks/useLayoutStandardList.json +36 -0
  305. package/hooks/useMessage.json +73 -0
  306. package/hooks/useModifyCache.json +36 -0
  307. package/hooks/useOpenDialog.json +43 -0
  308. package/hooks/usePagination.json +49 -0
  309. package/hooks/usePersist.json +61 -0
  310. package/hooks/usePoll.json +43 -0
  311. package/hooks/useRoutePlus.json +36 -0
  312. package/hooks/useRouterPlus.json +36 -0
  313. package/hooks/useSearch.json +56 -0
  314. package/hooks/useShell.json +49 -0
  315. package/hooks/useSkip.json +43 -0
  316. package/hooks/useStorageIdEntity.json +67 -0
  317. package/hooks/useStore.json +36 -0
  318. package/hooks/useTable.json +49 -0
  319. package/hooks/useTableGroup.json +43 -0
  320. package/hooks/useTableSort.json +43 -0
  321. package/hooks/useUser.json +36 -0
  322. package/hooks/useValidForm.json +43 -0
  323. package/package.json +14 -8
  324. package/dist/chunk-D3Y6FGWA.js +0 -153
  325. package/dist/chunk-HPAUCD5I.js +0 -156
  326. package/dist/chunk-L4DS3EXI.mjs +0 -133
  327. package/dist/chunk-NZ6TLWMD.mjs +0 -151
@@ -12,26 +12,36 @@ import { Timepicker } from '@king-design/vue';
12
12
  ```
13
13
 
14
14
  ## 属性 (Props)
15
- | 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
16
- | --- | --- | --- | --- | --- | --- |
17
- | value | `Value | Value[] | [Value, Value] | [Value, Value][]` | `""` | 否 | 当前选中的时间,可用 v-model 双向绑定。范围选择时为 [Value, Value] | `<Timepicker v-model="time" />` |
18
- | range | `boolean` | `false` | 否 | 是否选择时间范围 | `<Timepicker range />` |
19
- | multiple | `boolean` | `false` | 否 | 是否支持多选 | `<Timepicker multiple />` |
20
- | disabled | `boolean` | `false` | 否 | 是否禁用 | `<Timepicker disabled />` |
21
- | clearable | `boolean` | `false` | 否 | 是否可清空 | `<Timepicker clearable />` |
22
- | size | `"large" | "default" | "small" | "mini"` | `"default"` | 否 | 尺寸 | `<Timepicker size="small" />` |
23
- | placeholder | `string` | `"请选择时间"` | 否 | 占位文案 | `<Timepicker placeholder="选择开始时间" />` |
24
- | format | `string` | `"YYYY-MM-DD HH:mm:ss"` | 否 | 时间格式化字符串 | `<Timepicker format="HH:mm" />` |
25
- | valueFormat | `string` | `undefined` | 否 | value 值的格式化字符串 | `<Timepicker valueFormat="HH:mm:ss" />` |
26
- | showFormat | `string` | `undefined` | 否 | 展示的格式化字符串 | `<Timepicker showFormat="HH时mm分" />` |
27
- | step | `string` | `undefined` | 否 | 固定时间点的步长,如 "00:30" 表示每 30 分钟一个选项 | `<Timepicker step="00:30" />` |
28
- | min | `Value` | `undefined` | 否 | 最小可选时间 | `<Timepicker min="09:00:00" />` |
29
- | max | `Value` | `undefined` | 否 | 最大可选时间 | `<Timepicker max="18:00:00" />` |
30
- | hideIcon | `boolean` | `false` | 否 | 是否隐藏后面的图标 | `<Timepicker hideIcon />` |
31
- | fluid | `boolean` | `false` | 否 | 是否宽度 100% | `<Timepicker fluid />` |
32
- | inline | `boolean` | `false` | 否 | 是否展示内联模式 | `<Timepicker inline />` |
33
- | flat | `boolean` | `false` | 否 | 是否展示扁平样式 | `<Timepicker flat />` |
34
- | width | `number | string` | `undefined` | 否 | 指定宽度,自动添加单位 px | `<Timepicker :width="150" />` |
15
+ | 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
16
+ | --- | --- | --- | --- | --- | --- | --- |
17
+ | value | `Value | Value[] | [Value, Value] | [Value, Value][]` | `""` | 否 | 当前选中的时间,可用 v-model 双向绑定。范围选择时为 [Value, Value] | - | `<Timepicker v-model="time" />` |
18
+ | range | `boolean` | `false` | 否 | 是否选择时间范围 | - | `<Timepicker range />` |
19
+ | multiple | `boolean` | `false` | 否 | 是否支持多选 | - | `<Timepicker multiple />` |
20
+ | filterable | `boolean` | `false` | 否 | 是否支持筛选输入 | - | `<Timepicker filterable />` |
21
+ | loading | `boolean` | `false` | 否 | 数据加载状态 | - | `<Timepicker :loading="loading" />` |
22
+ | disabled | `boolean` | `false` | 否 | 是否禁用 | - | `<Timepicker disabled />` |
23
+ | name | `string` | `undefined` | 否 | 表单元素的 name 属性 | - | `<Timepicker name="startTime" />` |
24
+ | clearable | `boolean` | `false` | 否 | 是否可清空 | - | `<Timepicker clearable />` |
25
+ | size | `"large" | "default" | "small" | "mini"` | `"default"` | 否 | 尺寸 | - | `<Timepicker size="small" />` |
26
+ | placeholder | `string` | `"请选择时间"` | 否 | 占位文案 | - | `<Timepicker placeholder="选择开始时间" />` |
27
+ | format | `string` | `"YYYY-MM-DD HH:mm:ss"` | 否 | 时间格式化字符串 | - | `<Timepicker format="HH:mm" />` |
28
+ | valueFormat | `string` | `undefined` | 否 | value 值的格式化字符串 | - | `<Timepicker valueFormat="HH:mm:ss" />` |
29
+ | showFormat | `string` | `undefined` | 否 | 展示的格式化字符串 | - | `<Timepicker showFormat="HH时mm分" />` |
30
+ | step | `string` | `undefined` | 否 | 固定时间点的步长,如 "00:30" 表示每 30 分钟一个选项 | - | `<Timepicker step="00:30" />` |
31
+ | min | `Value` | `undefined` | 否 | 最小可选时间 | - | `<Timepicker min="09:00:00" />` |
32
+ | max | `Value` | `undefined` | 否 | 最大可选时间 | - | `<Timepicker max="18:00:00" />` |
33
+ | disabledDate | `(v: Dayjs) => boolean` | `undefined` | 否 | 禁用日期的函数,返回 true 表示禁用该日期 | - | `<Timepicker :disabledDate="(d) => d.day() === 0" />` |
34
+ | hideIcon | `boolean` | `false` | 否 | 是否隐藏后面的图标 | - | `<Timepicker hideIcon />` |
35
+ | fluid | `boolean` | `false` | 否 | 是否宽度 100% | - | `<Timepicker fluid />` |
36
+ | inline | `boolean` | `false` | 否 | 是否展示内联模式 | - | `<Timepicker inline />` |
37
+ | flat | `boolean` | `false` | 否 | 是否展示扁平样式 | - | `<Timepicker flat />` |
38
+ | width | `number | string` | `undefined` | 否 | 指定宽度,自动添加单位 px | - | `<Timepicker :width="150" />` |
39
+ | container | `string | ((parentDom: Element, anchor: Node | null) => Element)` | `undefined` | 否 | 指定弹出菜单追加的位置,默认 Dialog 组件会追加到 Dialog 中,其他追加到 body | - | `<Timepicker :container="() => document.body" />` |
40
+ | show | `boolean` | `false` | 否 | 是否展示菜单项(受控模式) | - | `<Timepicker :show="visible" />` |
41
+ | position | `Position | "left" | "bottom" | "right" | "top"` | `{my: 'left top+8', at: 'left bottom'}` | 否 | 菜单弹出的位置 | - | `<Timepicker position="top" />` |
42
+ | nowrap | `boolean` | `false` | 否 | 选中值区域是否不换行展示,适合单行紧凑布局 | - | `<Timepicker nowrap />` |
43
+ | draggable | `boolean` | `false` | 否 | 多选值是否支持拖动排序 | - | `<Timepicker multiple draggable />` |
44
+ | virtual | `boolean` | `false` | 否 | 是否开启虚拟列表,用于大数据量场景 | - | `<Timepicker virtual />` |
35
45
 
36
46
  ## 事件 (Events)
37
47
  | 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
@@ -39,48 +49,76 @@ import { Timepicker } from '@king-design/vue';
39
49
  | show | `@show` | 菜单弹出时触发 | `-` | `<Timepicker @show="handleShow" />` |
40
50
  | hide | `@hide` | 菜单隐藏时触发 | `-` | `<Timepicker @hide="handleHide" />` |
41
51
  | change | `@change` | 用户操作完成且值变化时触发 | `value: string` | `<Timepicker @change="handleChange" />` |
42
- | selecting | `@selecting` | 范围选择时,用户正在操作选择时触发 | `value: [Dayjs, Dayjs?]` | `<Timepicker range @selecting="handleSelecting" />` |
52
+ | selecting | `@selecting` | 范围选择时,用户正在操作选择时触发 | `value: [Dayjs, Dayjs?], confirmed: boolean` | `<Timepicker range @selecting="handleSelecting" />` |
43
53
 
44
- ### 事件处理函数示例
45
- **show**:
54
+ ### 事件参数说明
55
+ **change**
56
+
57
+ | 参数 | 类型 | 必填 | 默认值 | 说明 |
58
+ | --- | --- | --- | --- | --- |
59
+ | value | `string` | 是 | - | 当前选择的时间值 |
60
+
61
+ 事件处理示例:
46
62
  ```typescript
47
- const handleShow = () => {
48
- console.log('时间选择器已打开');
63
+ const handleChange = (value: string) => {
64
+ console.log('选择的时间:', value);
49
65
  };
50
66
  ```
51
67
 
52
- **hide**:
68
+ **selecting**
69
+
70
+ | 参数 | 类型 | 必填 | 默认值 | 说明 |
71
+ | --- | --- | --- | --- | --- |
72
+ | value | `[Dayjs, Dayjs?]` | 是 | - | 当前选择的值 |
73
+ | confirmed | `boolean` | 是 | - | 当前这次 selecting 是否已经进入确认完成态;常见交互过程中通常为 `false`。 |
74
+
75
+ 事件处理示例:
53
76
  ```typescript
54
- const handleHide = () => {
55
- console.log('时间选择器已关闭');
77
+ const handleSelecting = (value, confirmed) => {
78
+ console.log('正在选择:', value, confirmed);
56
79
  };
57
80
  ```
58
81
 
59
- **change**:
82
+ ## 方法 (Methods)
83
+ | 方法名 | 说明 | 参数 | 返回值 |
84
+ | --- | --- | --- | --- |
85
+ | show | 主动展开时间选择面板。 | `-` | `void` |
86
+ | hide | 主动关闭时间选择面板。 | `-` | `void` |
87
+ | position | 重新计算时间选择面板的位置。 | `-` | `void` |
88
+
89
+ ### 方法调用示例
90
+ **show**
91
+
60
92
  ```typescript
61
- const handleChange = (value: string) => {
62
- console.log('选择的时间:', value);
63
- };
93
+ timepickerRef.value?.show();
64
94
  ```
65
95
 
66
- **selecting**:
96
+ **hide**
97
+
67
98
  ```typescript
68
- const handleSelecting = (value) => {
69
- console.log('正在选择:', value);
70
- };
99
+ timepickerRef.value?.hide();
100
+ ```
101
+
102
+ **position**
103
+
104
+ ```typescript
105
+ timepickerRef.value?.position();
71
106
  ```
72
107
 
73
108
  ## 常见错误与正确用法 (Anti-Hallucination)
109
+ ### 范围选择时 value 类型错误
74
110
  > **错误用法**: `const time = ref('');
75
111
  <Timepicker v-model="time" range />`
76
112
  > **正确写法**: `const timeRange = ref<[string, string]>(['', '']);
77
113
  <Timepicker v-model="timeRange" range />`
78
114
  > **说明**: 当 range 为 true 时,value 必须是 [string, string] 数组
79
115
 
116
+ ### step 格式错误
80
117
  > **错误用法**: `<Timepicker step="30" /> <!-- 期望 30 分钟 -->`
81
118
  > **正确写法**: `<Timepicker step="00:30" />`
82
119
  > **说明**: step 应使用时间格式字符串,如 "00:30" 表示 30 分钟
83
120
 
121
+ ### min/max 格式与 format 不匹配
84
122
  > **错误用法**: `<Timepicker min="9:00" max="18:00" /> <!-- 缺少秒 -->`
85
123
  > **正确写法**: `<Timepicker min="09:00:00" max="18:00:00" />`
86
124
  > **说明**: min/max 应使用完整的时间格式
@@ -0,0 +1,157 @@
1
+ # 时间范围 (TimeRange)
2
+
3
+ 面向报表、监控和日志场景的时间范围选择组件,支持快捷区间、自定义起止时间以及时间戳格式输出。
4
+
5
+ **关键词**: time range, date range, time filter, 时间范围, 时间筛选, 快捷时间, 监控时间段, 日志时间查询
6
+
7
+ **使用场景**: 监控页时间筛选、报表页时间范围选择、日志页最近时间窗口查询、按快捷区间切换统计周期
8
+
9
+ ## 导入语句
10
+ ```typescript
11
+ import { TimeRange } from '@ksyun-internal/versatile';
12
+ ```
13
+
14
+ ## 属性 (Props)
15
+ | 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
16
+ | --- | --- | --- | --- | --- | --- | --- |
17
+ | type | `"date" | "datetime" | "year" | "month"` | `"date"` | 否 | 组件类型 | `inherited:Datepicker` | `<Datepicker type="datetime" />` |
18
+ | range | `boolean` | `false` | 否 | 是否选择日期范围 | `inherited:Datepicker` | `<Datepicker range />` |
19
+ | multiple | `boolean` | `false` | 否 | 是否支持多选 | `inherited:Datepicker` | `<Datepicker multiple />` |
20
+ | filterable | `boolean` | `false` | 否 | 是否支持筛选输入 | `inherited:Datepicker` | `<Datepicker filterable />` |
21
+ | loading | `boolean` | `false` | 否 | 数据加载状态 | `inherited:Datepicker` | `<Datepicker :loading="loading" />` |
22
+ | disabled | `boolean` | `false` | 否 | 是否禁用 | `inherited:Datepicker` | `<Datepicker disabled />` |
23
+ | name | `string` | `undefined` | 否 | 表单元素的 name 属性 | `inherited:Datepicker` | `<Datepicker name="startDate" />` |
24
+ | clearable | `boolean` | `false` | 否 | 是否可清空 | `inherited:Datepicker` | `<Datepicker clearable />` |
25
+ | size | `"large" | "default" | "small" | "mini"` | `"default"` | 否 | 尺寸 | `inherited:Datepicker` | `<Datepicker size="small" />` |
26
+ | placeholder | `string` | `"请选择日期"` | 否 | 占位文案 | `inherited:Datepicker` | `<Datepicker placeholder="选择开始日期" />` |
27
+ | format | `string` | `"YYYY-MM-DD HH:mm:ss"` | 否 | 日期格式化字符串 | - | - |
28
+ | valueFormat | `string` | `undefined` | 否 | value 值的日期格式化字符串 | `inherited:Datepicker` | `<Datepicker valueFormat="YYYY-MM-DD" />` |
29
+ | showFormat | `string` | `undefined` | 否 | 展示的日期格式化字符串 | `inherited:Datepicker` | `<Datepicker showFormat="YYYY年MM月DD日" />` |
30
+ | min | `Value` | `undefined` | 否 | 最小可选日期 | `inherited:Datepicker` | `<Datepicker min="2024-01-01" />` |
31
+ | max | `Value` | `undefined` | 否 | 最大可选日期 | `inherited:Datepicker` | `<Datepicker max="2024-12-31" />` |
32
+ | disabledDate | `(v: Dayjs) => boolean` | `undefined` | 否 | 禁用日期的函数,返回 true 表示禁用该日期 | `inherited:Datepicker` | `<Datepicker :disabledDate="(d) => d.day() === 0" />` |
33
+ | shortcuts | `Shortcut[]` | `undefined` | 否 | 快捷方式配置 | `inherited:Datepicker` | `<Datepicker :shortcuts="shortcuts" />` |
34
+ | hideIcon | `boolean` | `false` | 否 | 是否隐藏后面的图标 | `inherited:Datepicker` | `<Datepicker hideIcon />` |
35
+ | fluid | `boolean` | `false` | 否 | 是否宽度 100% | `inherited:Datepicker` | `<Datepicker fluid />` |
36
+ | inline | `boolean` | `false` | 否 | 是否展示内联模式 | `inherited:Datepicker` | `<Datepicker inline />` |
37
+ | flat | `boolean` | `false` | 否 | 是否展示扁平样式 | `inherited:Datepicker` | `<Datepicker flat />` |
38
+ | width | `number | string` | `undefined` | 否 | 指定宽度,自动添加单位 px | `inherited:Datepicker` | `<Datepicker :width="200" />` |
39
+ | container | `Container` | `undefined` | 否 | 弹出层挂载容器 | - | - |
40
+ | show | `boolean` | `false` | 否 | 是否展示菜单项(受控模式) | `inherited:Datepicker` | `<Datepicker :show="visible" />` |
41
+ | position | `Position | "left" | "bottom" | "right" | "top"` | `{my: 'left top+8', at: 'left bottom'}` | 否 | 菜单弹出的位置 | `inherited:Datepicker` | `<Datepicker position="top" />` |
42
+ | nowrap | `boolean` | `false` | 否 | 选中值区域是否不换行展示,适合单行紧凑布局 | `inherited:Datepicker` | `<Datepicker nowrap />` |
43
+ | draggable | `boolean` | `false` | 否 | 多选值是否支持拖动排序 | `inherited:Datepicker` | `<Datepicker multiple draggable />` |
44
+ | virtual | `boolean` | `false` | 否 | 是否开启虚拟列表,用于大数据量场景 | `inherited:Datepicker` | `<Datepicker virtual />` |
45
+ | modelValue | `[number, number] | [string, string]` | `undefined` | 否 | 当前选中的时间范围 | - | - |
46
+ | startTime | `string | number` | `undefined` | 否 | 当前时间范围的开始时间 | - | - |
47
+ | endTime | `string | number` | `undefined` | 否 | 当前时间范围的结束时间 | - | - |
48
+ | label | `string` | `""` | 否 | 组件标题文案 | - | - |
49
+ | times | `(Time | number | 'today' | 'yesterday')[]` | `undefined` | 否 | 快捷时间范围配置,支持分钟数或 today / yesterday 等枚举 | - | - |
50
+ | defaultValue | `number | 'today' | 'yesterday'` | `undefined` | 否 | 首次渲染时使用的默认快捷值 | - | - |
51
+ | timestamp | `boolean` | `false` | 否 | 是否以时间戳格式返回值 | - | - |
52
+
53
+ ## 事件 (Events)
54
+ | 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
55
+ | --- | --- | --- | --- | --- |
56
+ | update:modelValue | `@update:modelValue` | 整个时间范围值变化时触发,适合直接驱动查询参数。 | `value?: TimeModelType` | - |
57
+ | update:startTime | `@update:startTime` | 开始时间变化时触发,可用于单独记录查询区间起点。 | `value?: string | number` | - |
58
+ | update:endTime | `@update:endTime` | 结束时间变化时触发,可用于单独记录查询区间终点。 | `value?: string | number` | - |
59
+
60
+ ### 事件参数说明
61
+ **update:modelValue**
62
+
63
+ | 参数 | 类型 | 必填 | 默认值 | 说明 |
64
+ | --- | --- | --- | --- | --- |
65
+ | value | `TimeModelType` | 否 | - | 当前完整时间范围,可能是时间戳元组或格式化后的字符串元组。 |
66
+
67
+ **update:startTime**
68
+
69
+ | 参数 | 类型 | 必填 | 默认值 | 说明 |
70
+ | --- | --- | --- | --- | --- |
71
+ | value | `string | number` | 否 | - | 当前开始时间值;`timestamp=true` 时通常是时间戳,否则为格式化字符串。 |
72
+
73
+ **update:endTime**
74
+
75
+ | 参数 | 类型 | 必填 | 默认值 | 说明 |
76
+ | --- | --- | --- | --- | --- |
77
+ | value | `string | number` | 否 | - | 当前结束时间值;`timestamp=true` 时通常是时间戳,否则为格式化字符串。 |
78
+
79
+ ## 方法 (Methods)
80
+ | 方法名 | 说明 | 参数 | 返回值 |
81
+ | --- | --- | --- | --- |
82
+ | setTimeValue | 按快捷值主动切换时间范围 | `value: number | 'today' | 'yesterday'` | `void` |
83
+ | refetch | 刷新当前时间范围到最新时间 | `value?: number | 'today' | 'yesterday'` | `void` |
84
+
85
+ ### 方法参数说明
86
+ **setTimeValue**
87
+
88
+ | 参数 | 类型 | 必填 | 默认值 | 说明 |
89
+ | --- | --- | --- | --- | --- |
90
+ | value | `number | 'today' | 'yesterday'` | 是 | - | 目标快捷值,可传分钟数或 `today`、`yesterday` 这类内置快捷标识。 |
91
+
92
+ **refetch**
93
+
94
+ | 参数 | 类型 | 必填 | 默认值 | 说明 |
95
+ | --- | --- | --- | --- | --- |
96
+ | value | `number | 'today' | 'yesterday'` | 否 | - | 可选的快捷值;传入后会先切换到该快捷区间,再把结束时间刷新到当前最新时刻。 |
97
+
98
+ ## 使用示例
99
+ ### 监控页时间筛选
100
+ **场景**: 在监控和报表页面中切换查询时间范围。
101
+
102
+ 提供最近 1 小时、最近 24 小时等快捷时间范围。
103
+
104
+ **使用的 API**: 属性: modelValue, label, times, timestamp | 事件: update:modelValue, update:startTime, update:endTime
105
+
106
+ ```vue
107
+ <script setup lang="ts">
108
+ import { ref } from 'vue';
109
+ import { TimeRange } from '@ksyun-internal/versatile';
110
+
111
+ const timeRange = ref<[number, number] | undefined>();
112
+ </script>
113
+
114
+ <template>
115
+ <TimeRange
116
+ v-model="timeRange"
117
+ label="统计周期"
118
+ :times="[60, 360, 'today']"
119
+ :timestamp="true"
120
+ />
121
+ </template>
122
+ ```
123
+
124
+ ### 刷新到最新时间窗口
125
+ **场景**: 在日志和监控页面中一键把查询区间重置到最新时间窗口。
126
+
127
+ 通过组件方法把当前时间范围刷新到最新时刻,适合日志和监控实时查看场景。
128
+
129
+ **使用的 API**: 属性: modelValue, times, defaultValue, timestamp | 事件: update:modelValue | 方法: refetch
130
+
131
+ ```vue
132
+ <script setup lang="ts">
133
+ import { ref } from 'vue';
134
+ import { TimeRange } from '@ksyun-internal/versatile';
135
+
136
+ const rangeRef = ref<InstanceType<typeof TimeRange>>();
137
+ const timeRange = ref<[number, number] | undefined>();
138
+ const refreshLatest = () => {
139
+ rangeRef.value?.refetch(60);
140
+ };
141
+ </script>
142
+
143
+ <template>
144
+ <button @click="refreshLatest">刷新最近 1 小时</button>
145
+ <TimeRange
146
+ ref="rangeRef"
147
+ v-model="timeRange"
148
+ :times="[60, 360, 1440]"
149
+ :default-value="60"
150
+ :timestamp="true"
151
+ />
152
+ </template>
153
+ ```
154
+
155
+ ## 相关组件
156
+ Datepicker, Duration
157
+
@@ -12,38 +12,77 @@ import { Tip } from '@king-design/vue';
12
12
  ```
13
13
 
14
14
  ## 属性 (Props)
15
- | 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
16
- | --- | --- | --- | --- | --- | --- |
17
- | type | `"default" | "primary" | "success" | "warning" | "danger"` | `"default"` | 否 | 提示类型 | `<Tip type="warning">警告内容</Tip>` |
18
- | closable | `boolean` | `false` | 否 | 是否可关闭 | `<Tip closable>可关闭的提示</Tip>` |
19
- | closed | `boolean` | `false` | 否 | 是否已关闭,可用 v-model:closed 双向绑定 | `<Tip :closed="isClosed">提示</Tip>` |
20
- | showIcon | `boolean` | `false` | 否 | 是否展示图标 | `<Tip type="success" showIcon>成功</Tip>` |
21
- | disabled | `boolean` | `false` | 否 | 是否展示禁用状态 | `<Tip disabled>禁用状态</Tip>` |
22
- | size | `"large" | "default" | "small" | "mini"` | `"default"` | 否 | 组件尺寸 | `<Tip size="small">小尺寸提示</Tip>` |
23
- | border | `"solid" | "dashed" | "none"` | `"solid"` | 否 | 边框样式 | `<Tip border="dashed">虚线边框</Tip>` |
15
+ | 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
16
+ | --- | --- | --- | --- | --- | --- | --- |
17
+ | type | `"default" | "primary" | "success" | "warning" | "danger"` | `"default"` | 否 | 提示类型 | - | `<Tip type="warning">警告内容</Tip>` |
18
+ | closable | `boolean` | `false` | 否 | 是否可关闭 | - | `<Tip closable>可关闭的提示</Tip>` |
19
+ | closed | `boolean` | `false` | 否 | 是否已关闭,可用 v-model:closed 双向绑定 | - | `<Tip :closed="isClosed">提示</Tip>` |
20
+ | showIcon | `boolean` | `false` | 否 | 是否展示图标 | - | `<Tip type="success" showIcon>成功</Tip>` |
21
+ | disabled | `boolean` | `false` | 否 | 是否展示禁用状态 | - | `<Tip disabled>禁用状态</Tip>` |
22
+ | size | `"large" | "default" | "small" | "mini"` | `"default"` | 否 | 组件尺寸 | - | `<Tip size="small">小尺寸提示</Tip>` |
23
+ | border | `"solid" | "dashed" | "none"` | `"solid"` | 否 | 边框样式 | - | `<Tip border="dashed">虚线边框</Tip>` |
24
24
 
25
25
  ## 事件 (Events)
26
26
  | 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
27
27
  | --- | --- | --- | --- | --- |
28
28
  | close | `@close` | 关闭时触发 | `e: MouseEvent` | `<Tip closable @close="handleClose"></Tip>` |
29
29
 
30
- ### 事件处理函数示例
31
- **close**:
30
+ ### 事件参数说明
31
+ **close**
32
+
33
+ | 参数 | 类型 | 必填 | 默认值 | 说明 |
34
+ | --- | --- | --- | --- | --- |
35
+ | e | `MouseEvent` | 是 | - | 原生鼠标事件 |
36
+
37
+ 事件处理示例:
32
38
  ```typescript
33
39
  const handleClose = (e: MouseEvent) => {
34
40
  console.log('提示已关闭');
35
41
  };
36
42
  ```
37
43
 
44
+ ## 插槽 (Slots)
45
+ | 插槽名 | 说明 | 模板写法 | 示例 |
46
+ | --- | --- | --- | --- |
47
+ | title | 自定义标题内容 | `<template #title>...</template>` | `<Tip>
48
+ <template <template #title>...</template>>自定义标题</template>
49
+ </Tip>` |
50
+ | close | 自定义关闭按钮内容 | `<template #close>...</template>` | `<Tip>
51
+ <template <template #close>...</template>>
52
+ 自定义close内容
53
+ </template>
54
+ </Tip>` |
55
+ | icon | 自定义Icon内容 | `<template #icon>...</template>` | `<Tip>
56
+ <template <template #icon>...</template>>
57
+ 自定义icon内容
58
+ </template>
59
+ </Tip>` |
60
+
61
+ ### 插槽参数说明
62
+ **title**
63
+
64
+ - 参数结构: 无参数
65
+
66
+ **close**
67
+
68
+ - 参数结构: 无参数
69
+
70
+ **icon**
71
+
72
+ - 参数结构: 无参数
73
+
38
74
  ## 常见错误与正确用法 (Anti-Hallucination)
75
+ ### 使用 closable 但未处理关闭逻辑
39
76
  > **错误用法**: `<Tip closable>提示</Tip> <!-- 点击关闭按钮不会隐藏 -->`
40
77
  > **正确写法**: `<Tip closable :closed="closed" @close="handleClose">提示</Tip>`
41
78
  > **说明**: closable 只显示关闭按钮,需要监听 close 事件并设置 closed 来隐藏
42
79
 
80
+ ### type 值拼写错误
43
81
  > **错误用法**: `<Tip type="error">错误</Tip>`
44
82
  > **正确写法**: `<Tip type="danger">错误</Tip>`
45
83
  > **说明**: 错误类型应使用 danger 而非 error
46
84
 
85
+ ### showIcon 大小写错误
47
86
  > **错误用法**: `<Tip showicon>提示</Tip>`
48
87
  > **正确写法**: `<Tip showIcon>提示</Tip>`
49
88
  > **说明**: 属性名是 showIcon(驼峰命名)
@@ -12,58 +12,130 @@ import { Tooltip } from '@king-design/vue';
12
12
  ```
13
13
 
14
14
  ## 属性 (Props)
15
- | 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
16
- | --- | --- | --- | --- | --- | --- |
17
- | content | `string | VNode` | `undefined` | 否 | 提示的内容 | `<Tooltip content="提示内容"></Tooltip>` |
18
- | trigger | `"hover" | "click" | "focus"` | `"hover"` | 否 | 触发方式 | `<Tooltip trigger="click"></Tooltip>` |
19
- | value | `boolean` | `false` | 否 | 是否展示弹层,可用 v-model 双向绑定 | `<Tooltip v-model="visible"></Tooltip>` |
20
- | disabled | `boolean` | `false` | 否 | 是否禁用提示 | `<Tooltip disabled></Tooltip>` |
21
- | position | `Position | "left" | "bottom" | "right" | "top"` | `{my: 'center bottom-10', at: 'center top', collision: 'flipfit'}` | 否 | 弹层弹出的位置,默认在触发器正上方 | `<Tooltip position="bottom"></Tooltip>` |
22
- | theme | `"dark" | "light"` | `"dark"` | 否 | 主题 | `<Tooltip theme="light"></Tooltip>` |
23
- | showArrow | `boolean` | `true` | 否 | 弹层是否展示箭头 | `<Tooltip :showArrow="false"></Tooltip>` |
24
- | hoverable | `boolean` | `false` | 否 | 对于悬浮触发方式,提示弹层是否在鼠标悬浮时仍然展示 | `<Tooltip hoverable></Tooltip>` |
25
- | always | `boolean` | `false` | 否 | 是否一直保持当前展示/隐藏状态 | `<Tooltip always></Tooltip>` |
26
- | size | `"default" | "small"` | `"default"` | 否 | 弹层尺寸 | `<Tooltip size="small"></Tooltip>` |
27
- | of | `"self" | "parent" | Event` | `"self"` | 否 | 弹出菜单的位置是相对当前触发元素还是父元素 | `<Tooltip of="parent"></Tooltip>` |
28
- | container | `string | ((parentDom: Element, anchor: Node | null) => Element)` | `undefined` | 否 | 指定弹出菜单追加的位置 | `<Tooltip :container="() => document.body"></Tooltip>` |
15
+ | 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
16
+ | --- | --- | --- | --- | --- | --- | --- |
17
+ | content | `string | VNode` | `undefined` | 否 | 提示的内容 | - | `<Tooltip content="提示内容">` |
18
+ | trigger | `"hover" | "click" | "focus"` | `"hover"` | 否 | 触发方式 | - | `<Tooltip trigger="click">` |
19
+ | value | `boolean` | `false` | 否 | 是否展示弹层,可用 v-model 双向绑定 | - | `<Tooltip v-model="visible">` |
20
+ | disabled | `boolean` | `false` | 否 | 是否禁用提示 | - | `<Tooltip disabled>` |
21
+ | position | `Position | "left" | "bottom" | "right" | "top"` | `{my: 'center bottom-10', at: 'center top', collision: 'flipfit'}` | 否 | 弹层弹出的位置,默认在触发器正上方 | - | `<Tooltip position="bottom">` |
22
+ | collison | `Collision | [Collision, Collision]` | `undefined` | 否 | 碰撞检测策略,控制弹层超出边界时的处理方式。注意源码字段名拼写为 collison。 | - | `<Tooltip :collison="'flipfit'">` |
23
+ | theme | `"dark" | "light"` | `"dark"` | 否 | 主题 | - | `<Tooltip theme="light">` |
24
+ | showArrow | `boolean` | `true` | 否 | 弹层是否展示箭头 | - | `<Tooltip :showArrow="false">` |
25
+ | hoverable | `boolean` | `false` | 否 | 对于悬浮触发方式,提示弹层是否在鼠标悬浮时仍然展示 | - | `<Tooltip hoverable>` |
26
+ | always | `boolean` | `false` | 否 | 是否一直保持当前展示/隐藏状态 | - | `<Tooltip always>` |
27
+ | size | `"default" | "small"` | `"default"` | 否 | 弹层尺寸 | - | `<Tooltip size="small">` |
28
+ | of | `"self" | "parent" | Event` | `"self"` | 否 | 弹出菜单的位置是相对当前触发元素还是父元素 | - | `<Tooltip of="parent">` |
29
+ | container | `string | ((parentDom: Element, anchor: Node | null) => Element)` | `undefined` | 否 | 指定弹出菜单追加的位置 | - | `<Tooltip :container="() => document.body">` |
30
+ | alwaysShowOnClick | `boolean` | `false` | 否 | 不管什么触发方式,重复点击触发器都不隐藏弹层 | - | `<Tooltip alwaysShowOnClick>` |
29
31
 
30
32
  ## 事件 (Events)
31
33
  | 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
32
34
  | --- | --- | --- | --- | --- |
33
- | show | `@show` | 弹层展示时触发 | `-` | `<Tooltip @show="handleShow"></Tooltip>` |
34
- | hide | `@hide` | 弹层隐藏时触发 | `-` | `<Tooltip @hide="handleHide"></Tooltip>` |
35
+ | show | `@show` | 弹层展示时触发 | `-` | `<Tooltip @show="handleShow">` |
36
+ | hide | `@hide` | 弹层隐藏时触发 | `-` | `<Tooltip @hide="handleHide">` |
37
+ | positioned | `@positioned` | 提示弹层完成定位计算后触发,可用于读取最终落位结果。 | `feedback: Feedback` | `<Tooltip @positioned="handlePositioned">` |
35
38
 
36
- ### 事件处理函数示例
37
- **show**:
38
- ```typescript
39
- const handleShow = () => {
40
- console.log('Tooltip 已展示');
41
- };
42
- ```
39
+ ### 事件参数说明
40
+ **positioned**
41
+
42
+ | 参数 | 类型 | 必填 | 默认值 | 说明 |
43
+ | --- | --- | --- | --- | --- |
44
+ | feedback | `Feedback` | 是 | - | 定位反馈对象,描述当前 Tooltip 的最终 placement 和坐标信息。 |
43
45
 
44
- **hide**:
46
+ 事件处理示例:
45
47
  ```typescript
46
- const handleHide = () => {
47
- console.log('Tooltip 已隐藏');
48
+ const handlePositioned = (feedback: Feedback) => {
49
+ console.log('Tooltip 最终位置', feedback.placement);
48
50
  };
49
51
  ```
50
52
 
51
53
  ## 插槽 (Slots)
52
54
  | 插槽名 | 说明 | 模板写法 | 示例 |
53
55
  | --- | --- | --- | --- |
54
- | content | 自定义提示内容 | `undefined` | - |
56
+ | content | 自定义提示内容 | `<template #content>...</template>` | `<Tooltip>
57
+ <template <template #content>...</template>>自定义内容</template>
58
+ </Tooltip>` |
59
+
60
+ ### 插槽参数说明
61
+ **content**
62
+
63
+ - 参数结构: 无参数
64
+
65
+ ## 方法 (Methods)
66
+ | 方法名 | 说明 | 参数 | 返回值 |
67
+ | --- | --- | --- | --- |
68
+ | show | 主动显示提示弹层。 | `shouldFocus?: boolean` | `void` |
69
+ | hide | 主动隐藏提示弹层。 | `immediately: boolean` | `void` |
70
+ | position | 重新计算提示弹层的位置。 | `callback?: (feedback: Feedback) => void` | `void` |
71
+
72
+ ### 方法参数说明
73
+ **show**
74
+
75
+ | 参数 | 类型 | 必填 | 默认值 | 说明 |
76
+ | --- | --- | --- | --- | --- |
77
+ | shouldFocus | `boolean` | 否 | - | 显示后是否尝试把焦点移动到弹层内容。 |
78
+
79
+ 调用示例:
80
+ ```typescript
81
+ tooltipRef.value?.show(true);
82
+ ```
83
+
84
+ **hide**
85
+
86
+ | 参数 | 类型 | 必填 | 默认值 | 说明 |
87
+ | --- | --- | --- | --- | --- |
88
+ | immediately | `boolean` | 是 | - | 是否立即隐藏,用于手动控制点击确认型 Tooltip 的关闭时机。 |
89
+
90
+ 调用示例:
91
+ ```typescript
92
+ tooltipRef.value?.hide(true);
93
+ ```
94
+
95
+ **position**
96
+
97
+ | 参数 | 类型 | 必填 | 默认值 | 说明 |
98
+ | --- | --- | --- | --- | --- |
99
+ | callback | `(feedback: Feedback) => void` | 否 | - | 定位完成后的回调,可读取最终 placement 和坐标。 |
100
+
101
+ 调用示例:
102
+ ```typescript
103
+ tooltipRef.value?.position((feedback) => console.log(feedback.placement));
104
+ ```
105
+
106
+ ### 方法调用示例
107
+ **show**
108
+
109
+ ```typescript
110
+ tooltipRef.value?.show(true);
111
+ ```
112
+
113
+ **hide**
114
+
115
+ ```typescript
116
+ tooltipRef.value?.hide(true);
117
+ ```
118
+
119
+ **position**
120
+
121
+ ```typescript
122
+ tooltipRef.value?.position((feedback) => console.log(feedback.placement));
123
+ ```
55
124
 
56
125
  ## 常见错误与正确用法 (Anti-Hallucination)
126
+ ### 未提供触发元素
57
127
  > **错误用法**: `<Tooltip content="提示" />`
58
128
  > **正确写法**: `<Tooltip content="提示">
59
129
  <Button>触发器</Button>
60
130
  </Tooltip>`
61
131
  > **说明**: Tooltip 需要包裹一个子元素作为触发器
62
132
 
133
+ ### position 值拼写错误
63
134
  > **错误用法**: `<Tooltip position="buttom">`
64
135
  > **正确写法**: `<Tooltip position="bottom">`
65
136
  > **说明**: position 只支持 top, bottom, left, right,注意拼写
66
137
 
138
+ ### 使用 hoverable 但 content 不可交互
67
139
  > **错误用法**: `<Tooltip hoverable content="纯文本" /> <!-- hoverable 无意义 -->`
68
140
  > **正确写法**: `<Tooltip hoverable>
69
141
  <Button>触发</Button>