@a2simcode/ui 0.0.245 → 0.0.246

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 (358) 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/simcode-ui.es.js +1240 -1237
  6. package/dist/simcode-ui.umd.js +2 -2
  7. package/dist/stats.html +1 -1
  8. package/dist/ui.css +1 -1
  9. package/docs/components/autocomplete.md +89 -89
  10. package/docs/components/barcode.md +101 -101
  11. package/docs/components/button-select.md +24 -24
  12. package/docs/components/button.md +117 -117
  13. package/docs/components/buttons.md +119 -119
  14. package/docs/components/cascader-select.md +114 -114
  15. package/docs/components/checkbox.md +114 -114
  16. package/docs/components/code-mirror.md +85 -85
  17. package/docs/components/collapse.md +26 -26
  18. package/docs/components/comp.md +71 -71
  19. package/docs/components/count-up.md +24 -24
  20. package/docs/components/count.md +24 -24
  21. package/docs/components/data-panel.md +24 -24
  22. package/docs/components/date.md +76 -76
  23. package/docs/components/dialog-full.md +112 -112
  24. package/docs/components/dialog.md +127 -127
  25. package/docs/components/divider.md +24 -24
  26. package/docs/components/drawer.md +127 -127
  27. package/docs/components/dynamic-layer.md +118 -118
  28. package/docs/components/echarts.md +72 -72
  29. package/docs/components/editor.md +24 -24
  30. package/docs/components/form.md +87 -87
  31. package/docs/components/guid.md +39 -39
  32. package/docs/components/hpanel.md +24 -24
  33. package/docs/components/icon.md +56 -56
  34. package/docs/components/input-button.md +24 -24
  35. package/docs/components/input-code.md +24 -24
  36. package/docs/components/input-color.md +114 -114
  37. package/docs/components/input-layer.md +56 -56
  38. package/docs/components/input-rows.md +370 -370
  39. package/docs/components/input-tag.md +50 -50
  40. package/docs/components/input.md +129 -129
  41. package/docs/components/layer-form.md +61 -61
  42. package/docs/components/layer.md +127 -127
  43. package/docs/components/layout.md +132 -132
  44. package/docs/components/map.md +24 -24
  45. package/docs/components/menu.md +121 -121
  46. package/docs/components/meta/button.ts +212 -212
  47. package/docs/components/meta/buttons.ts +76 -76
  48. package/docs/components/meta/code-mirror.ts +108 -108
  49. package/docs/components/meta/comp.ts +236 -236
  50. package/docs/components/meta/date.ts +267 -267
  51. package/docs/components/meta/echarts.ts +64 -64
  52. package/docs/components/meta/form-item.ts +50 -50
  53. package/docs/components/meta/form.ts +181 -181
  54. package/docs/components/meta/input-button.ts +175 -175
  55. package/docs/components/meta/input-cards.ts +112 -112
  56. package/docs/components/meta/input-code.ts +161 -161
  57. package/docs/components/meta/input-color.ts +243 -243
  58. package/docs/components/meta/input-layer.ts +382 -382
  59. package/docs/components/meta/input-rows.ts +119 -119
  60. package/docs/components/meta/layer-form.ts +74 -74
  61. package/docs/components/meta/map.ts +68 -68
  62. package/docs/components/meta/panel.ts +152 -152
  63. package/docs/components/meta/radio.ts +55 -55
  64. package/docs/components/meta/select.ts +279 -279
  65. package/docs/components/meta/slider.ts +270 -270
  66. package/docs/components/meta/table-panel.ts +272 -272
  67. package/docs/components/meta/table.ts +409 -409
  68. package/docs/components/meta/tabs.ts +146 -146
  69. package/docs/components/meta/title.ts +91 -91
  70. package/docs/components/meta/tree-select.ts +199 -199
  71. package/docs/components/meta/tree.ts +219 -219
  72. package/docs/components/meta/vpanel.ts +19 -19
  73. package/docs/components/meta/workflow-viewer.ts +55 -55
  74. package/docs/components/number.md +124 -124
  75. package/docs/components/page.md +102 -102
  76. package/docs/components/panel.md +37 -37
  77. package/docs/components/radio.md +87 -87
  78. package/docs/components/rate.md +71 -71
  79. package/docs/components/select.md +133 -133
  80. package/docs/components/slider-captcha.md +41 -41
  81. package/docs/components/slider.md +101 -101
  82. package/docs/components/switch.md +90 -90
  83. package/docs/components/table-panel.md +297 -297
  84. package/docs/components/table.md +450 -450
  85. package/docs/components/tabs.md +26 -26
  86. package/docs/components/title.md +24 -24
  87. package/docs/components/tree.md +207 -207
  88. package/docs/components/upload.md +117 -117
  89. package/docs/components/workflow-viewer.md +21 -21
  90. package/docs/components/workflow.md +21 -21
  91. package/docs/examples/autocomplete/advanced.vue +35 -35
  92. package/docs/examples/autocomplete/basic.vue +32 -32
  93. package/docs/examples/autocomplete/clearable.vue +33 -33
  94. package/docs/examples/autocomplete/custom-template.vue +49 -49
  95. package/docs/examples/autocomplete/disabled.vue +33 -33
  96. package/docs/examples/autocomplete/icon.vue +37 -37
  97. package/docs/examples/barcode/all-types.vue +380 -380
  98. package/docs/examples/barcode/basic.vue +14 -14
  99. package/docs/examples/barcode/props-appearance.vue +243 -243
  100. package/docs/examples/barcode/props-geometry.vue +143 -143
  101. package/docs/examples/barcode/props-logic.vue +216 -216
  102. package/docs/examples/barcode/props-symbology.vue +199 -199
  103. package/docs/examples/barcode/props-text.vue +268 -268
  104. package/docs/examples/button/basic.vue +7 -7
  105. package/docs/examples/button/disabled.vue +42 -42
  106. package/docs/examples/button/loading.vue +6 -6
  107. package/docs/examples/button/shape.vue +7 -7
  108. package/docs/examples/button/size.vue +14 -14
  109. package/docs/examples/button/status.vue +34 -34
  110. package/docs/examples/button/type.vue +10 -10
  111. package/docs/examples/button-select/basic.vue +19 -19
  112. package/docs/examples/buttons/basic.vue +62 -62
  113. package/docs/examples/buttons/disabled.vue +36 -36
  114. package/docs/examples/buttons/dropdown.vue +63 -63
  115. package/docs/examples/buttons/group.vue +52 -52
  116. package/docs/examples/buttons/link.vue +47 -47
  117. package/docs/examples/buttons/popup.vue +39 -39
  118. package/docs/examples/buttons/size.vue +45 -45
  119. package/docs/examples/cascader-select/basic.vue +28 -28
  120. package/docs/examples/cascader-select/clearable.vue +34 -34
  121. package/docs/examples/cascader-select/disabled.vue +43 -43
  122. package/docs/examples/cascader-select/filterable.vue +37 -37
  123. package/docs/examples/cascader-select/methods.vue +84 -84
  124. package/docs/examples/cascader-select/multiple.vue +38 -38
  125. package/docs/examples/cascader-select/slot.vue +45 -45
  126. package/docs/examples/checkbox/basic.vue +18 -18
  127. package/docs/examples/checkbox/button.vue +19 -19
  128. package/docs/examples/checkbox/color.vue +25 -25
  129. package/docs/examples/checkbox/disabled.vue +17 -17
  130. package/docs/examples/checkbox/min-max.vue +20 -20
  131. package/docs/examples/checkbox/mixed.vue +56 -56
  132. package/docs/examples/checkbox/size.vue +28 -28
  133. package/docs/examples/code-mirror/basic.vue +11 -11
  134. package/docs/examples/code-mirror/events.vue +42 -42
  135. package/docs/examples/code-mirror/height.vue +25 -25
  136. package/docs/examples/code-mirror/mode.vue +33 -33
  137. package/docs/examples/code-mirror/readonly.vue +14 -14
  138. package/docs/examples/collapse/basic.vue +82 -82
  139. package/docs/examples/comp/basic.vue +7 -7
  140. package/docs/examples/comp/collapse.vue +38 -38
  141. package/docs/examples/comp/tabs.vue +38 -38
  142. package/docs/examples/count/basic.vue +101 -101
  143. package/docs/examples/count-up/basic.vue +89 -89
  144. package/docs/examples/data-panel/basic.vue +110 -110
  145. package/docs/examples/date/basic.vue +73 -73
  146. package/docs/examples/date/default-value.vue +59 -59
  147. package/docs/examples/date/format.vue +75 -75
  148. package/docs/examples/date/range.vue +66 -66
  149. package/docs/examples/date/types.vue +79 -79
  150. package/docs/examples/decorated-title/basic.vue +31 -31
  151. package/docs/examples/dialog/basic.vue +36 -36
  152. package/docs/examples/dialog/custom-buttons.vue +44 -44
  153. package/docs/examples/dialog/fullscreen.vue +23 -23
  154. package/docs/examples/dialog/no-mask.vue +17 -17
  155. package/docs/examples/dialog/size.vue +44 -44
  156. package/docs/examples/dialog/steps.vue +57 -57
  157. package/docs/examples/dialog-full/basic.vue +29 -29
  158. package/docs/examples/dialog-full/custom-buttons.vue +45 -45
  159. package/docs/examples/dialog-full/no-buttons.vue +18 -18
  160. package/docs/examples/dialog-full/no-header.vue +27 -27
  161. package/docs/examples/dialog-full/steps.vue +71 -71
  162. package/docs/examples/divider/basic.vue +52 -52
  163. package/docs/examples/drawer/basic.vue +35 -35
  164. package/docs/examples/drawer/custom-buttons.vue +34 -34
  165. package/docs/examples/drawer/direction.vue +47 -47
  166. package/docs/examples/drawer/mask.vue +36 -36
  167. package/docs/examples/drawer/no-buttons.vue +20 -20
  168. package/docs/examples/drawer/size.vue +28 -28
  169. package/docs/examples/dynamic-layer/basic.vue +33 -33
  170. package/docs/examples/dynamic-layer/custom-buttons.vue +43 -43
  171. package/docs/examples/dynamic-layer/form.vue +73 -73
  172. package/docs/examples/dynamic-layer/steps.vue +52 -52
  173. package/docs/examples/dynamic-layer/types.vue +40 -40
  174. package/docs/examples/echarts/basic.vue +31 -31
  175. package/docs/examples/echarts/dynamic.vue +43 -43
  176. package/docs/examples/echarts/line.vue +46 -46
  177. package/docs/examples/echarts/pie.vue +44 -44
  178. package/docs/examples/editor/basic.vue +15 -15
  179. package/docs/examples/form/basic.vue +663 -663
  180. package/docs/examples/form/init.vue +76 -76
  181. package/docs/examples/form/master-detail.vue +203 -203
  182. package/docs/examples/form/rule-format.vue +179 -179
  183. package/docs/examples/form/view-table.vue +378 -378
  184. package/docs/examples/guid/basic.vue +10 -10
  185. package/docs/examples/guid/size.vue +13 -13
  186. package/docs/examples/hpanel/basic.vue +79 -79
  187. package/docs/examples/icon/basic.vue +9 -9
  188. package/docs/examples/icon/rotate-flip.vue +9 -9
  189. package/docs/examples/icon/size.vue +7 -7
  190. package/docs/examples/input/basic.vue +10 -10
  191. package/docs/examples/input/clearable.vue +12 -12
  192. package/docs/examples/input/disabled.vue +6 -6
  193. package/docs/examples/input/icon.vue +23 -23
  194. package/docs/examples/input/password.vue +18 -18
  195. package/docs/examples/input/size.vue +13 -13
  196. package/docs/examples/input/textarea.vue +25 -25
  197. package/docs/examples/input/word-limit.vue +28 -28
  198. package/docs/examples/input-button/basic.vue +33 -33
  199. package/docs/examples/input-cards/basic.vue +79 -79
  200. package/docs/examples/input-code/basic.vue +29 -29
  201. package/docs/examples/input-color/basic.vue +10 -10
  202. package/docs/examples/input-color/disabled.vue +13 -13
  203. package/docs/examples/input-color/format.vue +17 -17
  204. package/docs/examples/input-color/no-alpha.vue +13 -13
  205. package/docs/examples/input-color/only-button.vue +15 -15
  206. package/docs/examples/input-color/predefine.vue +31 -31
  207. package/docs/examples/input-color/size.vue +15 -15
  208. package/docs/examples/input-layer/basic.vue +85 -85
  209. package/docs/examples/input-layer/render-vnode-page.vue +160 -160
  210. package/docs/examples/input-layer/render-vnode.vue +127 -127
  211. package/docs/examples/input-rows/basic.vue +73 -73
  212. package/docs/examples/input-rows/drag.vue +48 -48
  213. package/docs/examples/input-rows/layer-form.vue +85 -85
  214. package/docs/examples/input-rows/nested.vue +91 -91
  215. package/docs/examples/input-tag/basic.vue +27 -27
  216. package/docs/examples/input-tag/colors.vue +23 -23
  217. package/docs/examples/input-tag/readonly.vue +17 -17
  218. package/docs/examples/layer/basic.vue +43 -43
  219. package/docs/examples/layer/custom-buttons.vue +61 -61
  220. package/docs/examples/layer/drawer.vue +37 -37
  221. package/docs/examples/layer/full.vue +38 -38
  222. package/docs/examples/layer/modal.vue +34 -34
  223. package/docs/examples/layer/steps.vue +46 -46
  224. package/docs/examples/layer-form/basic.vue +76 -76
  225. package/docs/examples/layer-form/config.vue +82 -82
  226. package/docs/examples/layer-form/size.vue +72 -72
  227. package/docs/examples/layout/basic.vue +36 -36
  228. package/docs/examples/layout/custom-size.vue +50 -50
  229. package/docs/examples/layout/disable-move.vue +37 -37
  230. package/docs/examples/layout/hide-mid-when-narrow.vue +96 -96
  231. package/docs/examples/layout/min-size.vue +73 -73
  232. package/docs/examples/layout/percent-size.vue +80 -80
  233. package/docs/examples/layout/simple.vue +22 -22
  234. package/docs/examples/layout/top-side.vue +34 -34
  235. package/docs/examples/map/basic.vue +22 -22
  236. package/docs/examples/menu/basic.vue +58 -58
  237. package/docs/examples/menu/collapsed.vue +49 -49
  238. package/docs/examples/menu/horizontal.vue +44 -44
  239. package/docs/examples/menu/selection-test.vue +104 -104
  240. package/docs/examples/menu/theme.vue +46 -46
  241. package/docs/examples/menu/vertical.vue +46 -46
  242. package/docs/examples/number/advanced.vue +143 -143
  243. package/docs/examples/number/basic.vue +63 -63
  244. package/docs/examples/number/disabled.vue +49 -49
  245. package/docs/examples/number/size.vue +42 -42
  246. package/docs/examples/number/slots.vue +123 -123
  247. package/docs/examples/number/step-strictly.vue +41 -41
  248. package/docs/examples/number/step.vue +47 -47
  249. package/docs/examples/page/basic.vue +41 -41
  250. package/docs/examples/page/code-table-model.vue +428 -428
  251. package/docs/examples/page/dept-user-management.vue +211 -211
  252. package/docs/examples/page/init.vue +87 -87
  253. package/docs/examples/page/log.vue +453 -453
  254. package/docs/examples/page/user-management.vue +313 -313
  255. package/docs/examples/panel/tool-buttons.vue +18 -18
  256. package/docs/examples/radio/basic.vue +17 -17
  257. package/docs/examples/radio/button.vue +17 -17
  258. package/docs/examples/radio/color.vue +18 -18
  259. package/docs/examples/radio/disabled.vue +17 -17
  260. package/docs/examples/radio/size.vue +29 -29
  261. package/docs/examples/rate/basic.vue +24 -24
  262. package/docs/examples/rate/half.vue +24 -24
  263. package/docs/examples/rate/readonly.vue +11 -11
  264. package/docs/examples/rate/text.vue +37 -37
  265. package/docs/examples/select/basic.vue +16 -16
  266. package/docs/examples/select/clearable.vue +22 -22
  267. package/docs/examples/select/disabled.vue +31 -31
  268. package/docs/examples/select/filterable.vue +24 -24
  269. package/docs/examples/select/group.vue +23 -23
  270. package/docs/examples/select/icon.vue +16 -16
  271. package/docs/examples/select/multiple.vue +18 -18
  272. package/docs/examples/select/size.vue +39 -39
  273. package/docs/examples/slider/basic.vue +42 -42
  274. package/docs/examples/slider/disabled.vue +17 -17
  275. package/docs/examples/slider/marks.vue +30 -30
  276. package/docs/examples/slider/size.vue +37 -37
  277. package/docs/examples/slider/tooltip.vue +36 -36
  278. package/docs/examples/slider/vertical.vue +26 -26
  279. package/docs/examples/slider-captcha/basic.vue +44 -44
  280. package/docs/examples/slider-captcha/custom.vue +48 -48
  281. package/docs/examples/switch/basic.vue +16 -16
  282. package/docs/examples/switch/disabled.vue +13 -13
  283. package/docs/examples/switch/loading.vue +13 -13
  284. package/docs/examples/switch/size.vue +15 -15
  285. package/docs/examples/switch/text.vue +13 -13
  286. package/docs/examples/table/action-filter.vue +126 -126
  287. package/docs/examples/table/actions.vue +116 -116
  288. package/docs/examples/table/add-row.vue +103 -103
  289. package/docs/examples/table/basic.vue +168 -168
  290. package/docs/examples/table/checkbox-layout.vue +68 -68
  291. package/docs/examples/table/column-filter.vue +96 -96
  292. package/docs/examples/table/custom-layout.vue +115 -115
  293. package/docs/examples/table/dynamic-type.vue +73 -73
  294. package/docs/examples/table/editable.vue +262 -262
  295. package/docs/examples/table/field-selection.vue +87 -87
  296. package/docs/examples/table/frozen-column.vue +140 -140
  297. package/docs/examples/table/height-mode.vue +99 -99
  298. package/docs/examples/table/icon.vue +85 -85
  299. package/docs/examples/table/layer-form.vue +133 -133
  300. package/docs/examples/table/link.vue +66 -66
  301. package/docs/examples/table/multiple-disabled.vue +112 -112
  302. package/docs/examples/table/multiple.vue +188 -188
  303. package/docs/examples/table/pagination.vue +151 -151
  304. package/docs/examples/table/row-drag.vue +67 -67
  305. package/docs/examples/table/single-selection.vue +64 -64
  306. package/docs/examples/table/sub-table-lazy.vue +97 -97
  307. package/docs/examples/table/sub-table.vue +103 -103
  308. package/docs/examples/table/tag.vue +43 -43
  309. package/docs/examples/table/tree-column.vue +119 -119
  310. package/docs/examples/table/tree-data.vue +141 -141
  311. package/docs/examples/table/tree-default-expand-all.vue +60 -60
  312. package/docs/examples/table/tree-lazy.vue +80 -80
  313. package/docs/examples/table/tree-set-selection.vue +75 -75
  314. package/docs/examples/table-panel/basic.vue +229 -229
  315. package/docs/examples/table-panel/batch-operations.vue +286 -286
  316. package/docs/examples/table-panel/button-visibility.vue +88 -88
  317. package/docs/examples/table-panel/column-filter.vue +116 -116
  318. package/docs/examples/table-panel/filter.vue +219 -219
  319. package/docs/examples/table-panel/get-selection.vue +111 -111
  320. package/docs/examples/table-panel/mask.vue +151 -151
  321. package/docs/examples/table-panel/model-value.vue +87 -87
  322. package/docs/examples/table-panel/multiple-selection.vue +243 -243
  323. package/docs/examples/table-panel/pagination.vue +133 -133
  324. package/docs/examples/table-panel/search-list.vue +207 -207
  325. package/docs/examples/table-panel/sub-table-lazy.vue +118 -118
  326. package/docs/examples/table-panel/tree-parent-key.vue +67 -67
  327. package/docs/examples/tabs/basic.vue +98 -98
  328. package/docs/examples/time/base.vue +67 -67
  329. package/docs/examples/title/basic.vue +87 -87
  330. package/docs/examples/tree/accordion.vue +46 -46
  331. package/docs/examples/tree/basic.vue +50 -50
  332. package/docs/examples/tree/buttons.vue +53 -53
  333. package/docs/examples/tree/checkable.vue +52 -52
  334. package/docs/examples/tree/custom-keys.vue +39 -39
  335. package/docs/examples/tree/default-expanded.vue +52 -52
  336. package/docs/examples/tree/draggable.vue +29 -29
  337. package/docs/examples/tree/expand-on-click.vue +39 -39
  338. package/docs/examples/tree/flat-data.vue +20 -20
  339. package/docs/examples/tree/icon.vue +40 -40
  340. package/docs/examples/tree/load-data.vue +37 -37
  341. package/docs/examples/tree/methods.vue +74 -74
  342. package/docs/examples/tree/theme.vue +33 -33
  343. package/docs/examples/tree-select/basic.vue +47 -47
  344. package/docs/examples/upload/accept.vue +31 -31
  345. package/docs/examples/upload/basic.vue +12 -12
  346. package/docs/examples/upload/drag.vue +11 -11
  347. package/docs/examples/upload/image.vue +17 -17
  348. package/docs/examples/upload/limit.vue +20 -20
  349. package/docs/examples/upload/multiple.vue +17 -17
  350. package/docs/examples/upload/readonly.vue +17 -17
  351. package/docs/examples/utils/cipher.vue +160 -160
  352. package/docs/examples/utils/common.vue +153 -153
  353. package/docs/examples/utils/date.vue +56 -56
  354. package/docs/examples/utils/dom.vue +52 -52
  355. package/docs/examples/utils/is.vue +70 -70
  356. package/docs/examples/workflow/basic.vue +265 -265
  357. package/docs/examples/workflow-viewer/basic.vue +248 -248
  358. 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>