@a2simcode/ui 0.0.187 → 0.0.188

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 (361) hide show
  1. package/.cursor/skills/ui-component-helper/README.md +86 -86
  2. package/.cursor/skills/ui-component-helper/SKILL.md +115 -115
  3. package/LICENSE +53 -53
  4. package/README.md +156 -156
  5. package/dist/components/buttons/src/interface.d.ts +4 -0
  6. package/dist/components/input/index.d.ts +3 -3
  7. package/dist/components/input/src/input.vue.d.ts +1 -1
  8. package/dist/components/input-layer/index.d.ts +3 -3
  9. package/dist/components/input-layer/src/input-layer.vue.d.ts +1 -1
  10. package/dist/components/input-map/index.d.ts +3 -3
  11. package/dist/components/input-map/src/input-map.vue.d.ts +1 -1
  12. package/dist/components/input-tag/index.d.ts +3 -3
  13. package/dist/components/input-tag/src/input-tag.vue.d.ts +1 -1
  14. package/dist/components/time/index.d.ts +3 -3
  15. package/dist/components/time/src/time.vue.d.ts +1 -1
  16. package/dist/components/upload/index.d.ts +24 -24
  17. package/dist/components/upload/src/list.vue.d.ts +1 -1
  18. package/dist/components/upload/src/upload.vue.d.ts +8 -8
  19. package/dist/simcode-ui.es.js +458 -441
  20. package/dist/simcode-ui.umd.js +2 -2
  21. package/dist/stats.html +1 -1
  22. package/dist/ui.css +1 -1
  23. package/docs/components/autocomplete.md +89 -89
  24. package/docs/components/barcode.md +101 -101
  25. package/docs/components/button-select.md +24 -24
  26. package/docs/components/button.md +117 -117
  27. package/docs/components/buttons.md +119 -119
  28. package/docs/components/cascader-select.md +114 -114
  29. package/docs/components/checkbox.md +114 -114
  30. package/docs/components/code-mirror.md +85 -85
  31. package/docs/components/collapse.md +26 -26
  32. package/docs/components/comp.md +71 -71
  33. package/docs/components/count-up.md +24 -24
  34. package/docs/components/count.md +24 -24
  35. package/docs/components/data-panel.md +24 -24
  36. package/docs/components/date.md +76 -76
  37. package/docs/components/dialog-full.md +112 -112
  38. package/docs/components/dialog.md +127 -127
  39. package/docs/components/divider.md +24 -24
  40. package/docs/components/drawer.md +127 -127
  41. package/docs/components/dynamic-layer.md +118 -118
  42. package/docs/components/echarts.md +72 -72
  43. package/docs/components/editor.md +24 -24
  44. package/docs/components/form.md +72 -72
  45. package/docs/components/guid.md +39 -39
  46. package/docs/components/hpanel.md +24 -24
  47. package/docs/components/icon.md +56 -56
  48. package/docs/components/input-button.md +24 -24
  49. package/docs/components/input-code.md +24 -24
  50. package/docs/components/input-color.md +114 -114
  51. package/docs/components/input-layer.md +56 -56
  52. package/docs/components/input-rows.md +370 -370
  53. package/docs/components/input-tag.md +50 -50
  54. package/docs/components/input.md +129 -129
  55. package/docs/components/layer-form.md +61 -61
  56. package/docs/components/layer.md +127 -127
  57. package/docs/components/layout.md +132 -132
  58. package/docs/components/map.md +24 -24
  59. package/docs/components/menu.md +121 -121
  60. package/docs/components/meta/button.ts +212 -212
  61. package/docs/components/meta/buttons.ts +76 -76
  62. package/docs/components/meta/code-mirror.ts +108 -108
  63. package/docs/components/meta/comp.ts +236 -236
  64. package/docs/components/meta/date.ts +267 -267
  65. package/docs/components/meta/echarts.ts +64 -64
  66. package/docs/components/meta/form-item.ts +50 -50
  67. package/docs/components/meta/form.ts +181 -181
  68. package/docs/components/meta/input-button.ts +165 -165
  69. package/docs/components/meta/input-cards.ts +112 -112
  70. package/docs/components/meta/input-code.ts +151 -151
  71. package/docs/components/meta/input-color.ts +243 -243
  72. package/docs/components/meta/input-layer.ts +382 -382
  73. package/docs/components/meta/input-rows.ts +119 -119
  74. package/docs/components/meta/layer-form.ts +56 -56
  75. package/docs/components/meta/map.ts +68 -68
  76. package/docs/components/meta/panel.ts +152 -152
  77. package/docs/components/meta/slider.ts +270 -270
  78. package/docs/components/meta/table-panel.ts +237 -237
  79. package/docs/components/meta/table.ts +391 -391
  80. package/docs/components/meta/tabs.ts +146 -146
  81. package/docs/components/meta/title.ts +91 -91
  82. package/docs/components/meta/tree-select.ts +199 -199
  83. package/docs/components/meta/tree.ts +219 -219
  84. package/docs/components/meta/vpanel.ts +19 -19
  85. package/docs/components/meta/workflow-viewer.ts +55 -55
  86. package/docs/components/number.md +124 -124
  87. package/docs/components/page.md +102 -102
  88. package/docs/components/panel.md +37 -37
  89. package/docs/components/radio.md +87 -87
  90. package/docs/components/rate.md +71 -71
  91. package/docs/components/select.md +133 -133
  92. package/docs/components/slider-captcha.md +41 -41
  93. package/docs/components/slider.md +101 -101
  94. package/docs/components/switch.md +90 -90
  95. package/docs/components/table-panel.md +251 -251
  96. package/docs/components/table.md +391 -391
  97. package/docs/components/tabs.md +26 -26
  98. package/docs/components/title.md +24 -24
  99. package/docs/components/tree.md +207 -207
  100. package/docs/components/upload.md +117 -117
  101. package/docs/components/workflow-viewer.md +21 -21
  102. package/docs/components/workflow.md +21 -21
  103. package/docs/examples/autocomplete/advanced.vue +35 -35
  104. package/docs/examples/autocomplete/basic.vue +32 -32
  105. package/docs/examples/autocomplete/clearable.vue +33 -33
  106. package/docs/examples/autocomplete/custom-template.vue +49 -49
  107. package/docs/examples/autocomplete/disabled.vue +33 -33
  108. package/docs/examples/autocomplete/icon.vue +37 -37
  109. package/docs/examples/barcode/all-types.vue +380 -380
  110. package/docs/examples/barcode/basic.vue +14 -14
  111. package/docs/examples/barcode/props-appearance.vue +243 -243
  112. package/docs/examples/barcode/props-geometry.vue +143 -143
  113. package/docs/examples/barcode/props-logic.vue +216 -216
  114. package/docs/examples/barcode/props-symbology.vue +199 -199
  115. package/docs/examples/barcode/props-text.vue +268 -268
  116. package/docs/examples/button/basic.vue +7 -7
  117. package/docs/examples/button/danger-ghost.vue +17 -17
  118. package/docs/examples/button/disabled.vue +10 -10
  119. package/docs/examples/button/loading.vue +6 -6
  120. package/docs/examples/button/shape.vue +7 -7
  121. package/docs/examples/button/size.vue +14 -14
  122. package/docs/examples/button/type.vue +10 -10
  123. package/docs/examples/button-select/basic.vue +19 -19
  124. package/docs/examples/buttons/basic.vue +62 -45
  125. package/docs/examples/buttons/disabled.vue +36 -36
  126. package/docs/examples/buttons/dropdown.vue +63 -63
  127. package/docs/examples/buttons/group.vue +52 -52
  128. package/docs/examples/buttons/link.vue +47 -47
  129. package/docs/examples/buttons/popup.vue +39 -39
  130. package/docs/examples/buttons/size.vue +45 -45
  131. package/docs/examples/cascader-select/basic.vue +28 -28
  132. package/docs/examples/cascader-select/clearable.vue +34 -34
  133. package/docs/examples/cascader-select/disabled.vue +43 -43
  134. package/docs/examples/cascader-select/filterable.vue +37 -37
  135. package/docs/examples/cascader-select/methods.vue +84 -84
  136. package/docs/examples/cascader-select/multiple.vue +38 -38
  137. package/docs/examples/cascader-select/slot.vue +45 -45
  138. package/docs/examples/checkbox/basic.vue +18 -18
  139. package/docs/examples/checkbox/button.vue +19 -19
  140. package/docs/examples/checkbox/color.vue +25 -25
  141. package/docs/examples/checkbox/disabled.vue +17 -17
  142. package/docs/examples/checkbox/min-max.vue +20 -20
  143. package/docs/examples/checkbox/mixed.vue +56 -56
  144. package/docs/examples/checkbox/size.vue +28 -28
  145. package/docs/examples/code-mirror/basic.vue +11 -11
  146. package/docs/examples/code-mirror/events.vue +42 -42
  147. package/docs/examples/code-mirror/height.vue +25 -25
  148. package/docs/examples/code-mirror/mode.vue +33 -33
  149. package/docs/examples/code-mirror/readonly.vue +14 -14
  150. package/docs/examples/collapse/basic.vue +82 -82
  151. package/docs/examples/comp/basic.vue +7 -7
  152. package/docs/examples/comp/collapse.vue +38 -38
  153. package/docs/examples/comp/tabs.vue +38 -38
  154. package/docs/examples/count/basic.vue +101 -101
  155. package/docs/examples/count-up/basic.vue +89 -89
  156. package/docs/examples/data-panel/basic.vue +110 -110
  157. package/docs/examples/date/basic.vue +73 -73
  158. package/docs/examples/date/default-value.vue +59 -59
  159. package/docs/examples/date/format.vue +75 -75
  160. package/docs/examples/date/range.vue +66 -66
  161. package/docs/examples/date/types.vue +79 -79
  162. package/docs/examples/decorated-title/basic.vue +31 -31
  163. package/docs/examples/dialog/basic.vue +36 -36
  164. package/docs/examples/dialog/custom-buttons.vue +44 -44
  165. package/docs/examples/dialog/fullscreen.vue +23 -23
  166. package/docs/examples/dialog/no-mask.vue +17 -17
  167. package/docs/examples/dialog/size.vue +44 -44
  168. package/docs/examples/dialog/steps.vue +57 -57
  169. package/docs/examples/dialog-full/basic.vue +29 -29
  170. package/docs/examples/dialog-full/custom-buttons.vue +45 -45
  171. package/docs/examples/dialog-full/no-buttons.vue +18 -18
  172. package/docs/examples/dialog-full/no-header.vue +27 -27
  173. package/docs/examples/dialog-full/steps.vue +71 -71
  174. package/docs/examples/divider/basic.vue +52 -52
  175. package/docs/examples/drawer/basic.vue +35 -35
  176. package/docs/examples/drawer/custom-buttons.vue +34 -34
  177. package/docs/examples/drawer/direction.vue +47 -47
  178. package/docs/examples/drawer/mask.vue +36 -36
  179. package/docs/examples/drawer/no-buttons.vue +20 -20
  180. package/docs/examples/drawer/size.vue +28 -28
  181. package/docs/examples/dynamic-layer/basic.vue +33 -33
  182. package/docs/examples/dynamic-layer/custom-buttons.vue +43 -43
  183. package/docs/examples/dynamic-layer/form.vue +73 -73
  184. package/docs/examples/dynamic-layer/steps.vue +52 -52
  185. package/docs/examples/dynamic-layer/types.vue +40 -40
  186. package/docs/examples/echarts/basic.vue +31 -31
  187. package/docs/examples/echarts/dynamic.vue +43 -43
  188. package/docs/examples/echarts/line.vue +46 -46
  189. package/docs/examples/echarts/pie.vue +44 -44
  190. package/docs/examples/editor/basic.vue +15 -15
  191. package/docs/examples/form/basic.vue +665 -665
  192. package/docs/examples/form/init.vue +76 -76
  193. package/docs/examples/form/master-detail.vue +203 -203
  194. package/docs/examples/form/rule-format.vue +179 -179
  195. package/docs/examples/guid/basic.vue +10 -10
  196. package/docs/examples/guid/size.vue +13 -13
  197. package/docs/examples/hpanel/basic.vue +79 -79
  198. package/docs/examples/icon/basic.vue +9 -9
  199. package/docs/examples/icon/rotate-flip.vue +9 -9
  200. package/docs/examples/icon/size.vue +7 -7
  201. package/docs/examples/input/basic.vue +10 -10
  202. package/docs/examples/input/clearable.vue +12 -12
  203. package/docs/examples/input/disabled.vue +6 -6
  204. package/docs/examples/input/icon.vue +23 -23
  205. package/docs/examples/input/password.vue +18 -18
  206. package/docs/examples/input/size.vue +13 -13
  207. package/docs/examples/input/textarea.vue +25 -25
  208. package/docs/examples/input/word-limit.vue +28 -28
  209. package/docs/examples/input-button/basic.vue +33 -33
  210. package/docs/examples/input-code/basic.vue +29 -29
  211. package/docs/examples/input-color/basic.vue +10 -10
  212. package/docs/examples/input-color/disabled.vue +13 -13
  213. package/docs/examples/input-color/format.vue +17 -17
  214. package/docs/examples/input-color/no-alpha.vue +13 -13
  215. package/docs/examples/input-color/only-button.vue +15 -15
  216. package/docs/examples/input-color/predefine.vue +31 -31
  217. package/docs/examples/input-color/size.vue +15 -15
  218. package/docs/examples/input-layer/basic.vue +86 -86
  219. package/docs/examples/input-layer/render-vnode-page.vue +160 -160
  220. package/docs/examples/input-layer/render-vnode.vue +127 -127
  221. package/docs/examples/input-rows/basic.vue +73 -73
  222. package/docs/examples/input-rows/drag.vue +48 -48
  223. package/docs/examples/input-rows/layer-form.vue +85 -85
  224. package/docs/examples/input-rows/nested.vue +91 -91
  225. package/docs/examples/input-tag/basic.vue +27 -27
  226. package/docs/examples/input-tag/colors.vue +23 -23
  227. package/docs/examples/input-tag/readonly.vue +17 -17
  228. package/docs/examples/layer/basic.vue +43 -43
  229. package/docs/examples/layer/custom-buttons.vue +61 -61
  230. package/docs/examples/layer/drawer.vue +37 -37
  231. package/docs/examples/layer/full.vue +38 -38
  232. package/docs/examples/layer/modal.vue +34 -34
  233. package/docs/examples/layer/steps.vue +46 -46
  234. package/docs/examples/layer-form/basic.vue +76 -76
  235. package/docs/examples/layer-form/config.vue +82 -82
  236. package/docs/examples/layer-form/size.vue +72 -72
  237. package/docs/examples/layout/basic.vue +36 -36
  238. package/docs/examples/layout/custom-size.vue +50 -50
  239. package/docs/examples/layout/disable-move.vue +37 -37
  240. package/docs/examples/layout/hide-mid-when-narrow.vue +96 -96
  241. package/docs/examples/layout/min-size.vue +73 -73
  242. package/docs/examples/layout/percent-size.vue +80 -80
  243. package/docs/examples/layout/simple.vue +22 -22
  244. package/docs/examples/layout/top-side.vue +34 -34
  245. package/docs/examples/map/basic.vue +22 -22
  246. package/docs/examples/menu/basic.vue +58 -58
  247. package/docs/examples/menu/collapsed.vue +49 -49
  248. package/docs/examples/menu/horizontal.vue +44 -44
  249. package/docs/examples/menu/selection-test.vue +104 -104
  250. package/docs/examples/menu/theme.vue +46 -46
  251. package/docs/examples/menu/vertical.vue +46 -46
  252. package/docs/examples/number/advanced.vue +143 -143
  253. package/docs/examples/number/basic.vue +63 -63
  254. package/docs/examples/number/disabled.vue +49 -49
  255. package/docs/examples/number/size.vue +42 -42
  256. package/docs/examples/number/slots.vue +123 -123
  257. package/docs/examples/number/step-strictly.vue +41 -41
  258. package/docs/examples/number/step.vue +47 -47
  259. package/docs/examples/page/basic.vue +41 -41
  260. package/docs/examples/page/code-table-model.vue +428 -428
  261. package/docs/examples/page/dept-user-management.vue +211 -211
  262. package/docs/examples/page/init.vue +87 -87
  263. package/docs/examples/page/log.vue +453 -453
  264. package/docs/examples/page/user-management.vue +313 -313
  265. package/docs/examples/panel/tool-buttons.vue +18 -18
  266. package/docs/examples/radio/basic.vue +17 -17
  267. package/docs/examples/radio/button.vue +17 -17
  268. package/docs/examples/radio/color.vue +18 -18
  269. package/docs/examples/radio/disabled.vue +17 -17
  270. package/docs/examples/radio/size.vue +29 -29
  271. package/docs/examples/rate/basic.vue +24 -24
  272. package/docs/examples/rate/half.vue +24 -24
  273. package/docs/examples/rate/readonly.vue +11 -11
  274. package/docs/examples/rate/text.vue +37 -37
  275. package/docs/examples/select/basic.vue +16 -16
  276. package/docs/examples/select/clearable.vue +22 -22
  277. package/docs/examples/select/disabled.vue +31 -31
  278. package/docs/examples/select/filterable.vue +24 -24
  279. package/docs/examples/select/group.vue +23 -23
  280. package/docs/examples/select/icon.vue +16 -16
  281. package/docs/examples/select/multiple.vue +18 -18
  282. package/docs/examples/select/size.vue +39 -39
  283. package/docs/examples/slider/basic.vue +42 -42
  284. package/docs/examples/slider/disabled.vue +17 -17
  285. package/docs/examples/slider/marks.vue +30 -30
  286. package/docs/examples/slider/size.vue +37 -37
  287. package/docs/examples/slider/tooltip.vue +36 -36
  288. package/docs/examples/slider/vertical.vue +26 -26
  289. package/docs/examples/slider-captcha/basic.vue +44 -44
  290. package/docs/examples/slider-captcha/custom.vue +48 -48
  291. package/docs/examples/switch/basic.vue +16 -16
  292. package/docs/examples/switch/disabled.vue +13 -13
  293. package/docs/examples/switch/loading.vue +13 -13
  294. package/docs/examples/switch/size.vue +15 -15
  295. package/docs/examples/switch/text.vue +13 -13
  296. package/docs/examples/table/action-filter.vue +126 -126
  297. package/docs/examples/table/actions.vue +116 -116
  298. package/docs/examples/table/add-row.vue +103 -103
  299. package/docs/examples/table/basic.vue +168 -168
  300. package/docs/examples/table/checkbox-layout.vue +68 -68
  301. package/docs/examples/table/custom-layout.vue +115 -115
  302. package/docs/examples/table/dynamic-type.vue +73 -73
  303. package/docs/examples/table/editable.vue +262 -262
  304. package/docs/examples/table/field-selection.vue +87 -87
  305. package/docs/examples/table/frozen-column.vue +140 -140
  306. package/docs/examples/table/height-mode.vue +99 -99
  307. package/docs/examples/table/icon.vue +85 -85
  308. package/docs/examples/table/link.vue +66 -66
  309. package/docs/examples/table/multiple.vue +188 -188
  310. package/docs/examples/table/pagination.vue +151 -151
  311. package/docs/examples/table/single-selection.vue +64 -64
  312. package/docs/examples/table/sub-table-lazy.vue +97 -97
  313. package/docs/examples/table/sub-table.vue +103 -103
  314. package/docs/examples/table/tag.vue +43 -43
  315. package/docs/examples/table/tree-column.vue +119 -119
  316. package/docs/examples/table/tree-data.vue +141 -141
  317. package/docs/examples/table/tree-default-expand-all.vue +60 -60
  318. package/docs/examples/table/tree-lazy.vue +80 -80
  319. package/docs/examples/table/tree-set-selection.vue +75 -75
  320. package/docs/examples/table-panel/basic.vue +229 -229
  321. package/docs/examples/table-panel/batch-operations.vue +285 -285
  322. package/docs/examples/table-panel/button-visibility.vue +88 -88
  323. package/docs/examples/table-panel/filter.vue +219 -219
  324. package/docs/examples/table-panel/get-selection.vue +111 -111
  325. package/docs/examples/table-panel/mask.vue +151 -151
  326. package/docs/examples/table-panel/multiple-selection.vue +243 -243
  327. package/docs/examples/table-panel/pagination.vue +133 -133
  328. package/docs/examples/table-panel/sub-table-lazy.vue +118 -118
  329. package/docs/examples/table-panel/tree-parent-key.vue +67 -67
  330. package/docs/examples/tabs/basic.vue +98 -98
  331. package/docs/examples/time/base.vue +67 -67
  332. package/docs/examples/title/basic.vue +87 -87
  333. package/docs/examples/tree/accordion.vue +46 -46
  334. package/docs/examples/tree/basic.vue +50 -50
  335. package/docs/examples/tree/buttons.vue +53 -53
  336. package/docs/examples/tree/checkable.vue +52 -52
  337. package/docs/examples/tree/custom-keys.vue +39 -39
  338. package/docs/examples/tree/default-expanded.vue +52 -52
  339. package/docs/examples/tree/draggable.vue +29 -29
  340. package/docs/examples/tree/expand-on-click.vue +39 -39
  341. package/docs/examples/tree/flat-data.vue +20 -20
  342. package/docs/examples/tree/icon.vue +40 -40
  343. package/docs/examples/tree/load-data.vue +37 -37
  344. package/docs/examples/tree/methods.vue +74 -74
  345. package/docs/examples/tree/theme.vue +33 -33
  346. package/docs/examples/tree-select/basic.vue +47 -47
  347. package/docs/examples/upload/accept.vue +31 -31
  348. package/docs/examples/upload/basic.vue +12 -12
  349. package/docs/examples/upload/drag.vue +11 -11
  350. package/docs/examples/upload/image.vue +17 -17
  351. package/docs/examples/upload/limit.vue +20 -20
  352. package/docs/examples/upload/multiple.vue +17 -17
  353. package/docs/examples/upload/readonly.vue +17 -17
  354. package/docs/examples/utils/cipher.vue +160 -160
  355. package/docs/examples/utils/common.vue +153 -153
  356. package/docs/examples/utils/date.vue +56 -56
  357. package/docs/examples/utils/dom.vue +52 -52
  358. package/docs/examples/utils/is.vue +70 -70
  359. package/docs/examples/workflow/basic.vue +265 -265
  360. package/docs/examples/workflow-viewer/basic.vue +248 -248
  361. package/package.json +23 -23
@@ -1,117 +1,117 @@
1
- # Upload 上传
2
-
3
- 通过点击或者拖拽上传文件。
4
-
5
- ## 基础用法
6
-
7
- 最基本的上传组件。
8
-
9
- <Demo :source-code="uploadBasicCode">
10
- <template #source>
11
- <upload-basic />
12
- </template>
13
- <template #description>
14
- 使用 `v-model` 绑定文件ID值。设置 `is-not-api` 为 `true` 可在不调用后端API的情况下预览效果。
15
- </template>
16
- </Demo>
17
-
18
- ## 多文件上传
19
-
20
- 支持一次性选择多个文件进行上传。
21
-
22
- <Demo :source-code="uploadMultipleCode">
23
- <template #source>
24
- <upload-multiple />
25
- </template>
26
- <template #description>
27
- 设置 `multiple` 属性启用多选模式。使用 `limit` 属性限制上传数量,设置为 `-1` 表示不限制。
28
- </template>
29
- </Demo>
30
-
31
- ## 拖拽上传
32
-
33
- 支持拖拽文件到指定区域进行上传。
34
-
35
- <Demo :source-code="uploadDragCode">
36
- <template #source>
37
- <upload-drag />
38
- </template>
39
- <template #description>
40
- 设置 `drag` 属性为 `true` 即可启用拖拽上传功能。
41
- </template>
42
- </Demo>
43
-
44
- ## 图片上传
45
-
46
- 专门用于上传图片的模式,提供图片预览功能。
47
-
48
- <Demo :source-code="uploadImageCode">
49
- <template #source>
50
- <upload-image />
51
- </template>
52
- <template #description>
53
- 设置 `is-upload-img` 属性为 `true` 启用图片上传模式,会以卡片形式展示上传的图片。
54
- </template>
55
- </Demo>
56
-
57
- ## 限制上传数量和大小
58
-
59
- 可以限制上传文件的数量和大小。
60
-
61
- <Demo :source-code="uploadLimitCode">
62
- <template #source>
63
- <upload-limit />
64
- </template>
65
- <template #description>
66
- 使用 `limit` 属性限制上传数量,`max-size` 和 `size-type` 配合使用限制文件大小。设置 `is-tip` 显示提示信息。
67
- </template>
68
- </Demo>
69
-
70
- ## 文件类型限制
71
-
72
- 限制上传的文件类型。
73
-
74
- <Demo :source-code="uploadAcceptCode">
75
- <template #source>
76
- <upload-accept />
77
- </template>
78
- <template #description>
79
- 使用 `accept` 属性指定接受的文件类型,例如 `.pdf`、`.xlsx,.xls`、`image/*` 等。
80
- </template>
81
- </Demo>
82
-
83
- ## 只读模式
84
-
85
- 只读状态下不能上传,只能查看已上传的文件。
86
-
87
- <Demo :source-code="uploadReadonlyCode">
88
- <template #source>
89
- <upload-readonly />
90
- </template>
91
- <template #description>
92
- 设置 `readonly` 属性为 `true` 即可进入只读模式。可通过 `btn-text` 自定义按钮文字。
93
- </template>
94
- </Demo>
95
-
96
- ## API
97
-
98
- <ApiTable :data="uploadApi" componentName="upload" />
99
-
100
- <script setup>
101
- import UploadBasic from '../examples/upload/basic.vue'
102
- import UploadMultiple from '../examples/upload/multiple.vue'
103
- import UploadDrag from '../examples/upload/drag.vue'
104
- import UploadImage from '../examples/upload/image.vue'
105
- import UploadLimit from '../examples/upload/limit.vue'
106
- import UploadAccept from '../examples/upload/accept.vue'
107
- import UploadReadonly from '../examples/upload/readonly.vue'
108
- import uploadApi from './meta/upload'
109
-
110
- import uploadBasicCode from '../examples/upload/basic.vue?raw'
111
- import uploadMultipleCode from '../examples/upload/multiple.vue?raw'
112
- import uploadDragCode from '../examples/upload/drag.vue?raw'
113
- import uploadImageCode from '../examples/upload/image.vue?raw'
114
- import uploadLimitCode from '../examples/upload/limit.vue?raw'
115
- import uploadAcceptCode from '../examples/upload/accept.vue?raw'
116
- import uploadReadonlyCode from '../examples/upload/readonly.vue?raw'
117
- </script>
1
+ # Upload 上传
2
+
3
+ 通过点击或者拖拽上传文件。
4
+
5
+ ## 基础用法
6
+
7
+ 最基本的上传组件。
8
+
9
+ <Demo :source-code="uploadBasicCode">
10
+ <template #source>
11
+ <upload-basic />
12
+ </template>
13
+ <template #description>
14
+ 使用 `v-model` 绑定文件ID值。设置 `is-not-api` 为 `true` 可在不调用后端API的情况下预览效果。
15
+ </template>
16
+ </Demo>
17
+
18
+ ## 多文件上传
19
+
20
+ 支持一次性选择多个文件进行上传。
21
+
22
+ <Demo :source-code="uploadMultipleCode">
23
+ <template #source>
24
+ <upload-multiple />
25
+ </template>
26
+ <template #description>
27
+ 设置 `multiple` 属性启用多选模式。使用 `limit` 属性限制上传数量,设置为 `-1` 表示不限制。
28
+ </template>
29
+ </Demo>
30
+
31
+ ## 拖拽上传
32
+
33
+ 支持拖拽文件到指定区域进行上传。
34
+
35
+ <Demo :source-code="uploadDragCode">
36
+ <template #source>
37
+ <upload-drag />
38
+ </template>
39
+ <template #description>
40
+ 设置 `drag` 属性为 `true` 即可启用拖拽上传功能。
41
+ </template>
42
+ </Demo>
43
+
44
+ ## 图片上传
45
+
46
+ 专门用于上传图片的模式,提供图片预览功能。
47
+
48
+ <Demo :source-code="uploadImageCode">
49
+ <template #source>
50
+ <upload-image />
51
+ </template>
52
+ <template #description>
53
+ 设置 `is-upload-img` 属性为 `true` 启用图片上传模式,会以卡片形式展示上传的图片。
54
+ </template>
55
+ </Demo>
56
+
57
+ ## 限制上传数量和大小
58
+
59
+ 可以限制上传文件的数量和大小。
60
+
61
+ <Demo :source-code="uploadLimitCode">
62
+ <template #source>
63
+ <upload-limit />
64
+ </template>
65
+ <template #description>
66
+ 使用 `limit` 属性限制上传数量,`max-size` 和 `size-type` 配合使用限制文件大小。设置 `is-tip` 显示提示信息。
67
+ </template>
68
+ </Demo>
69
+
70
+ ## 文件类型限制
71
+
72
+ 限制上传的文件类型。
73
+
74
+ <Demo :source-code="uploadAcceptCode">
75
+ <template #source>
76
+ <upload-accept />
77
+ </template>
78
+ <template #description>
79
+ 使用 `accept` 属性指定接受的文件类型,例如 `.pdf`、`.xlsx,.xls`、`image/*` 等。
80
+ </template>
81
+ </Demo>
82
+
83
+ ## 只读模式
84
+
85
+ 只读状态下不能上传,只能查看已上传的文件。
86
+
87
+ <Demo :source-code="uploadReadonlyCode">
88
+ <template #source>
89
+ <upload-readonly />
90
+ </template>
91
+ <template #description>
92
+ 设置 `readonly` 属性为 `true` 即可进入只读模式。可通过 `btn-text` 自定义按钮文字。
93
+ </template>
94
+ </Demo>
95
+
96
+ ## API
97
+
98
+ <ApiTable :data="uploadApi" componentName="upload" />
99
+
100
+ <script setup>
101
+ import UploadBasic from '../examples/upload/basic.vue'
102
+ import UploadMultiple from '../examples/upload/multiple.vue'
103
+ import UploadDrag from '../examples/upload/drag.vue'
104
+ import UploadImage from '../examples/upload/image.vue'
105
+ import UploadLimit from '../examples/upload/limit.vue'
106
+ import UploadAccept from '../examples/upload/accept.vue'
107
+ import UploadReadonly from '../examples/upload/readonly.vue'
108
+ import uploadApi from './meta/upload'
109
+
110
+ import uploadBasicCode from '../examples/upload/basic.vue?raw'
111
+ import uploadMultipleCode from '../examples/upload/multiple.vue?raw'
112
+ import uploadDragCode from '../examples/upload/drag.vue?raw'
113
+ import uploadImageCode from '../examples/upload/image.vue?raw'
114
+ import uploadLimitCode from '../examples/upload/limit.vue?raw'
115
+ import uploadAcceptCode from '../examples/upload/accept.vue?raw'
116
+ import uploadReadonlyCode from '../examples/upload/readonly.vue?raw'
117
+ </script>
@@ -1,21 +1,21 @@
1
- # WorkflowViewer 工作流查看器
2
-
3
- 工作流查看器组件。
4
-
5
- ## 基础用法
6
-
7
- <Demo :source-code="basicCode">
8
- <template #source>
9
- <Basic />
10
- </template>
11
- </Demo>
12
-
13
- ## API
14
-
15
- <ApiTable :data="metaData" componentName="workflow-viewer" />
16
-
17
- <script setup>
18
- import Basic from '../examples/workflow-viewer/basic.vue'
19
- import basicCode from '../examples/workflow-viewer/basic.vue?raw'
20
- import metaData from './meta/workflow-viewer'
21
- </script>
1
+ # WorkflowViewer 工作流查看器
2
+
3
+ 工作流查看器组件。
4
+
5
+ ## 基础用法
6
+
7
+ <Demo :source-code="basicCode">
8
+ <template #source>
9
+ <Basic />
10
+ </template>
11
+ </Demo>
12
+
13
+ ## API
14
+
15
+ <ApiTable :data="metaData" componentName="workflow-viewer" />
16
+
17
+ <script setup>
18
+ import Basic from '../examples/workflow-viewer/basic.vue'
19
+ import basicCode from '../examples/workflow-viewer/basic.vue?raw'
20
+ import metaData from './meta/workflow-viewer'
21
+ </script>
@@ -1,21 +1,21 @@
1
- # Workflow 工作流
2
-
3
- 工作流编辑器组件,支持创建工作流图、编辑节点和连接线。
4
-
5
- ## 基础用法
6
-
7
- <Demo :source-code="basicCode">
8
- <template #source>
9
- <Basic />
10
- </template>
11
- </Demo>
12
-
13
- ## API
14
-
15
- <ApiTable :data="metaData" componentName="workflow" />
16
-
17
- <script setup>
18
- import Basic from '../examples/workflow/basic.vue'
19
- import basicCode from '../examples/workflow/basic.vue?raw'
20
- import metaData from './meta/workflow'
21
- </script>
1
+ # Workflow 工作流
2
+
3
+ 工作流编辑器组件,支持创建工作流图、编辑节点和连接线。
4
+
5
+ ## 基础用法
6
+
7
+ <Demo :source-code="basicCode">
8
+ <template #source>
9
+ <Basic />
10
+ </template>
11
+ </Demo>
12
+
13
+ ## API
14
+
15
+ <ApiTable :data="metaData" componentName="workflow" />
16
+
17
+ <script setup>
18
+ import Basic from '../examples/workflow/basic.vue'
19
+ import basicCode from '../examples/workflow/basic.vue?raw'
20
+ import metaData from './meta/workflow'
21
+ </script>
@@ -1,35 +1,35 @@
1
- <template>
2
- <j-autocomplete
3
- v-model="state"
4
- :options="restaurants"
5
- placeholder="请输入内容"
6
- :trigger-on-focus="false"
7
- :debounce="500"
8
- clearable
9
- @select="handleSelect"
10
- />
11
- </template>
12
-
13
- <script setup lang="ts">
14
- import { ref } from 'vue'
15
-
16
- interface RestaurantItem {
17
- value: string
18
- link: string
19
- }
20
-
21
- const state = ref('')
22
-
23
- const restaurants = ref<RestaurantItem[]>([
24
- { value: 'vue', link: 'https://github.com/vuejs/vue' },
25
- { value: 'element', link: 'https://github.com/ElemeFE/element' },
26
- { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
27
- { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
28
- { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
29
- { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
30
- { value: 'babel', link: 'https://github.com/babel/babel' },
31
- ])
32
- const handleSelect = (item: RestaurantItem) => {
33
- console.log(item)
34
- }
35
- </script>
1
+ <template>
2
+ <j-autocomplete
3
+ v-model="state"
4
+ :options="restaurants"
5
+ placeholder="请输入内容"
6
+ :trigger-on-focus="false"
7
+ :debounce="500"
8
+ clearable
9
+ @select="handleSelect"
10
+ />
11
+ </template>
12
+
13
+ <script setup lang="ts">
14
+ import { ref } from 'vue'
15
+
16
+ interface RestaurantItem {
17
+ value: string
18
+ link: string
19
+ }
20
+
21
+ const state = ref('')
22
+
23
+ const restaurants = ref<RestaurantItem[]>([
24
+ { value: 'vue', link: 'https://github.com/vuejs/vue' },
25
+ { value: 'element', link: 'https://github.com/ElemeFE/element' },
26
+ { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
27
+ { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
28
+ { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
29
+ { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
30
+ { value: 'babel', link: 'https://github.com/babel/babel' },
31
+ ])
32
+ const handleSelect = (item: RestaurantItem) => {
33
+ console.log(item)
34
+ }
35
+ </script>
@@ -1,32 +1,32 @@
1
- <template>
2
- <j-autocomplete
3
- v-model="state"
4
- :options="restaurants"
5
- placeholder="请输入内容"
6
- @select="handleSelect"
7
- />
8
- </template>
9
-
10
- <script setup lang="ts">
11
- import { ref } from 'vue'
12
-
13
- interface RestaurantItem {
14
- value: string
15
- link: string
16
- }
17
-
18
- const state = ref('')
19
-
20
- const restaurants = ref<RestaurantItem[]>([
21
- { value: 'vue', link: 'https://github.com/vuejs/vue' },
22
- { value: 'element', link: 'https://github.com/ElemeFE/element' },
23
- { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
24
- { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
25
- { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
26
- { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
27
- { value: 'babel', link: 'https://github.com/babel/babel' },
28
- ])
29
- const handleSelect = (item: RestaurantItem) => {
30
- console.log(item)
31
- }
32
- </script>
1
+ <template>
2
+ <j-autocomplete
3
+ v-model="state"
4
+ :options="restaurants"
5
+ placeholder="请输入内容"
6
+ @select="handleSelect"
7
+ />
8
+ </template>
9
+
10
+ <script setup lang="ts">
11
+ import { ref } from 'vue'
12
+
13
+ interface RestaurantItem {
14
+ value: string
15
+ link: string
16
+ }
17
+
18
+ const state = ref('')
19
+
20
+ const restaurants = ref<RestaurantItem[]>([
21
+ { value: 'vue', link: 'https://github.com/vuejs/vue' },
22
+ { value: 'element', link: 'https://github.com/ElemeFE/element' },
23
+ { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
24
+ { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
25
+ { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
26
+ { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
27
+ { value: 'babel', link: 'https://github.com/babel/babel' },
28
+ ])
29
+ const handleSelect = (item: RestaurantItem) => {
30
+ console.log(item)
31
+ }
32
+ </script>
@@ -1,33 +1,33 @@
1
- <template>
2
- <j-autocomplete
3
- v-model="state"
4
- :options="restaurants"
5
- placeholder="请输入内容"
6
- clearable
7
- @select="handleSelect"
8
- />
9
- </template>
10
-
11
- <script setup lang="ts">
12
- import { ref } from 'vue'
13
-
14
- interface RestaurantItem {
15
- value: string
16
- link: string
17
- }
18
-
19
- const state = ref('')
20
-
21
- const restaurants = ref<RestaurantItem[]>([
22
- { value: 'vue', link: 'https://github.com/vuejs/vue' },
23
- { value: 'element', link: 'https://github.com/ElemeFE/element' },
24
- { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
25
- { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
26
- { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
27
- { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
28
- { value: 'babel', link: 'https://github.com/babel/babel' },
29
- ])
30
- const handleSelect = (item: RestaurantItem) => {
31
- console.log(item)
32
- }
33
- </script>
1
+ <template>
2
+ <j-autocomplete
3
+ v-model="state"
4
+ :options="restaurants"
5
+ placeholder="请输入内容"
6
+ clearable
7
+ @select="handleSelect"
8
+ />
9
+ </template>
10
+
11
+ <script setup lang="ts">
12
+ import { ref } from 'vue'
13
+
14
+ interface RestaurantItem {
15
+ value: string
16
+ link: string
17
+ }
18
+
19
+ const state = ref('')
20
+
21
+ const restaurants = ref<RestaurantItem[]>([
22
+ { value: 'vue', link: 'https://github.com/vuejs/vue' },
23
+ { value: 'element', link: 'https://github.com/ElemeFE/element' },
24
+ { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
25
+ { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
26
+ { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
27
+ { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
28
+ { value: 'babel', link: 'https://github.com/babel/babel' },
29
+ ])
30
+ const handleSelect = (item: RestaurantItem) => {
31
+ console.log(item)
32
+ }
33
+ </script>
@@ -1,49 +1,49 @@
1
- <template>
2
- <j-autocomplete
3
- v-model="state"
4
- :options="restaurants"
5
- placeholder="请输入内容"
6
- @select="handleSelect"
7
- >
8
- <template #default="{ item }">
9
- <div class="value">{{ item.value }}</div>
10
- <span class="link">{{ item.link }}</span>
11
- </template>
12
- </j-autocomplete>
13
- </template>
14
-
15
- <script setup lang="ts">
16
- import { ref } from 'vue'
17
-
18
- interface RestaurantItem {
19
- value: string
20
- link: string
21
- }
22
-
23
- const state = ref('')
24
-
25
- const restaurants = ref<RestaurantItem[]>([
26
- { value: 'vue', link: 'https://github.com/vuejs/vue' },
27
- { value: 'element', link: 'https://github.com/ElemeFE/element' },
28
- { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
29
- { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
30
- { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
31
- { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
32
- { value: 'babel', link: 'https://github.com/babel/babel' },
33
- ])
34
- const handleSelect = (item: RestaurantItem) => {
35
- console.log(item)
36
- }
37
- </script>
38
-
39
- <style scoped>
40
- .link {
41
- font-size: 12px;
42
- color: #b4b4b4;
43
- }
44
-
45
- .value {
46
- line-height: 26px;
47
- padding-right: 10px;
48
- }
49
- </style>
1
+ <template>
2
+ <j-autocomplete
3
+ v-model="state"
4
+ :options="restaurants"
5
+ placeholder="请输入内容"
6
+ @select="handleSelect"
7
+ >
8
+ <template #default="{ item }">
9
+ <div class="value">{{ item.value }}</div>
10
+ <span class="link">{{ item.link }}</span>
11
+ </template>
12
+ </j-autocomplete>
13
+ </template>
14
+
15
+ <script setup lang="ts">
16
+ import { ref } from 'vue'
17
+
18
+ interface RestaurantItem {
19
+ value: string
20
+ link: string
21
+ }
22
+
23
+ const state = ref('')
24
+
25
+ const restaurants = ref<RestaurantItem[]>([
26
+ { value: 'vue', link: 'https://github.com/vuejs/vue' },
27
+ { value: 'element', link: 'https://github.com/ElemeFE/element' },
28
+ { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
29
+ { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
30
+ { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
31
+ { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
32
+ { value: 'babel', link: 'https://github.com/babel/babel' },
33
+ ])
34
+ const handleSelect = (item: RestaurantItem) => {
35
+ console.log(item)
36
+ }
37
+ </script>
38
+
39
+ <style scoped>
40
+ .link {
41
+ font-size: 12px;
42
+ color: #b4b4b4;
43
+ }
44
+
45
+ .value {
46
+ line-height: 26px;
47
+ padding-right: 10px;
48
+ }
49
+ </style>