@a2simcode/ui 0.0.71 → 0.0.72

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 (317) hide show
  1. package/.cursor/skills/ui-component-helper/README.md +43 -43
  2. package/.cursor/skills/ui-component-helper/SKILL.md +81 -81
  3. package/LICENSE +53 -53
  4. package/README.md +156 -156
  5. package/dist/simcode-ui.es.js +370 -363
  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 +27 -27
  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 +26 -26
  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/buttons.ts +56 -56
  47. package/docs/components/meta/date.ts +275 -275
  48. package/docs/components/meta/echarts.ts +64 -64
  49. package/docs/components/meta/form.ts +160 -160
  50. package/docs/components/meta/input-cards.ts +112 -112
  51. package/docs/components/meta/input-color.ts +243 -243
  52. package/docs/components/meta/input-rows.ts +113 -113
  53. package/docs/components/meta/layer-form.ts +56 -56
  54. package/docs/components/meta/map.ts +68 -68
  55. package/docs/components/meta/panel.ts +152 -152
  56. package/docs/components/meta/slider.ts +270 -270
  57. package/docs/components/meta/table.ts +363 -363
  58. package/docs/components/meta/tabs.ts +136 -136
  59. package/docs/components/meta/tree-select.ts +199 -199
  60. package/docs/components/meta/workflow-viewer.ts +55 -55
  61. package/docs/components/meta/workflow.ts +113 -113
  62. package/docs/components/number.md +124 -124
  63. package/docs/components/page.md +57 -57
  64. package/docs/components/panel.md +37 -37
  65. package/docs/components/radio.md +87 -87
  66. package/docs/components/rate.md +71 -71
  67. package/docs/components/select.md +133 -133
  68. package/docs/components/slider-captcha.md +41 -41
  69. package/docs/components/slider.md +101 -101
  70. package/docs/components/switch.md +90 -90
  71. package/docs/components/table-panel.md +218 -218
  72. package/docs/components/table.md +319 -319
  73. package/docs/components/tabs.md +26 -26
  74. package/docs/components/title.md +24 -24
  75. package/docs/components/tree.md +207 -207
  76. package/docs/components/upload.md +117 -117
  77. package/docs/components/workflow-viewer.md +21 -21
  78. package/docs/components/workflow.md +21 -21
  79. package/docs/examples/autocomplete/advanced.vue +35 -35
  80. package/docs/examples/autocomplete/basic.vue +32 -32
  81. package/docs/examples/autocomplete/clearable.vue +33 -33
  82. package/docs/examples/autocomplete/custom-template.vue +49 -49
  83. package/docs/examples/autocomplete/disabled.vue +33 -33
  84. package/docs/examples/autocomplete/icon.vue +37 -37
  85. package/docs/examples/barcode/all-types.vue +380 -380
  86. package/docs/examples/barcode/basic.vue +14 -14
  87. package/docs/examples/barcode/props-appearance.vue +243 -243
  88. package/docs/examples/barcode/props-geometry.vue +143 -143
  89. package/docs/examples/barcode/props-logic.vue +216 -216
  90. package/docs/examples/barcode/props-symbology.vue +199 -199
  91. package/docs/examples/barcode/props-text.vue +268 -268
  92. package/docs/examples/button/basic.vue +7 -7
  93. package/docs/examples/button/danger-ghost.vue +17 -17
  94. package/docs/examples/button/disabled.vue +10 -10
  95. package/docs/examples/button/loading.vue +6 -6
  96. package/docs/examples/button/shape.vue +7 -7
  97. package/docs/examples/button/size.vue +14 -14
  98. package/docs/examples/button/type.vue +9 -9
  99. package/docs/examples/button-select/basic.vue +19 -19
  100. package/docs/examples/buttons/basic.vue +45 -45
  101. package/docs/examples/buttons/disabled.vue +36 -36
  102. package/docs/examples/buttons/dropdown.vue +63 -63
  103. package/docs/examples/buttons/group.vue +52 -52
  104. package/docs/examples/buttons/link.vue +47 -47
  105. package/docs/examples/buttons/popup.vue +39 -39
  106. package/docs/examples/buttons/size.vue +45 -45
  107. package/docs/examples/cascader-select/basic.vue +28 -28
  108. package/docs/examples/cascader-select/clearable.vue +34 -34
  109. package/docs/examples/cascader-select/disabled.vue +43 -43
  110. package/docs/examples/cascader-select/filterable.vue +37 -37
  111. package/docs/examples/cascader-select/methods.vue +84 -84
  112. package/docs/examples/cascader-select/multiple.vue +38 -38
  113. package/docs/examples/cascader-select/slot.vue +45 -45
  114. package/docs/examples/checkbox/basic.vue +18 -18
  115. package/docs/examples/checkbox/button.vue +19 -19
  116. package/docs/examples/checkbox/color.vue +25 -25
  117. package/docs/examples/checkbox/disabled.vue +17 -17
  118. package/docs/examples/checkbox/min-max.vue +20 -20
  119. package/docs/examples/checkbox/mixed.vue +56 -56
  120. package/docs/examples/checkbox/size.vue +28 -28
  121. package/docs/examples/code-mirror/basic.vue +11 -11
  122. package/docs/examples/code-mirror/events.vue +42 -42
  123. package/docs/examples/code-mirror/height.vue +25 -25
  124. package/docs/examples/code-mirror/mode.vue +33 -33
  125. package/docs/examples/code-mirror/readonly.vue +14 -14
  126. package/docs/examples/collapse/basic.vue +82 -82
  127. package/docs/examples/comp/basic.vue +7 -7
  128. package/docs/examples/comp/collapse.vue +38 -38
  129. package/docs/examples/comp/tabs.vue +38 -38
  130. package/docs/examples/count/basic.vue +54 -54
  131. package/docs/examples/count-up/basic.vue +89 -89
  132. package/docs/examples/data-panel/basic.vue +110 -110
  133. package/docs/examples/date/basic.vue +73 -73
  134. package/docs/examples/date/default-value.vue +59 -59
  135. package/docs/examples/date/format.vue +75 -75
  136. package/docs/examples/date/range.vue +66 -66
  137. package/docs/examples/date/types.vue +79 -79
  138. package/docs/examples/dialog/basic.vue +36 -36
  139. package/docs/examples/dialog/custom-buttons.vue +44 -44
  140. package/docs/examples/dialog/fullscreen.vue +23 -23
  141. package/docs/examples/dialog/no-mask.vue +17 -17
  142. package/docs/examples/dialog/size.vue +44 -44
  143. package/docs/examples/dialog/steps.vue +57 -57
  144. package/docs/examples/dialog-full/basic.vue +29 -29
  145. package/docs/examples/dialog-full/custom-buttons.vue +45 -45
  146. package/docs/examples/dialog-full/no-buttons.vue +18 -18
  147. package/docs/examples/dialog-full/no-header.vue +27 -27
  148. package/docs/examples/dialog-full/steps.vue +71 -71
  149. package/docs/examples/divider/basic.vue +52 -52
  150. package/docs/examples/drawer/basic.vue +35 -35
  151. package/docs/examples/drawer/custom-buttons.vue +34 -34
  152. package/docs/examples/drawer/direction.vue +47 -47
  153. package/docs/examples/drawer/mask.vue +36 -36
  154. package/docs/examples/drawer/no-buttons.vue +20 -20
  155. package/docs/examples/drawer/size.vue +28 -28
  156. package/docs/examples/dynamic-layer/basic.vue +33 -33
  157. package/docs/examples/dynamic-layer/custom-buttons.vue +43 -43
  158. package/docs/examples/dynamic-layer/form.vue +73 -73
  159. package/docs/examples/dynamic-layer/steps.vue +52 -52
  160. package/docs/examples/dynamic-layer/types.vue +40 -40
  161. package/docs/examples/echarts/basic.vue +31 -31
  162. package/docs/examples/echarts/dynamic.vue +43 -43
  163. package/docs/examples/echarts/line.vue +46 -46
  164. package/docs/examples/echarts/pie.vue +44 -44
  165. package/docs/examples/editor/basic.vue +15 -15
  166. package/docs/examples/form/basic.vue +450 -450
  167. package/docs/examples/guid/basic.vue +10 -10
  168. package/docs/examples/guid/size.vue +13 -13
  169. package/docs/examples/hpanel/basic.vue +79 -79
  170. package/docs/examples/icon/basic.vue +9 -9
  171. package/docs/examples/icon/rotate-flip.vue +9 -9
  172. package/docs/examples/icon/size.vue +7 -7
  173. package/docs/examples/input/basic.vue +10 -10
  174. package/docs/examples/input/clearable.vue +12 -12
  175. package/docs/examples/input/disabled.vue +6 -6
  176. package/docs/examples/input/icon.vue +23 -23
  177. package/docs/examples/input/password.vue +18 -18
  178. package/docs/examples/input/size.vue +13 -13
  179. package/docs/examples/input/textarea.vue +25 -25
  180. package/docs/examples/input/word-limit.vue +28 -28
  181. package/docs/examples/input-button/basic.vue +33 -33
  182. package/docs/examples/input-code/basic.vue +29 -29
  183. package/docs/examples/input-color/basic.vue +10 -10
  184. package/docs/examples/input-color/disabled.vue +13 -13
  185. package/docs/examples/input-color/format.vue +17 -17
  186. package/docs/examples/input-color/no-alpha.vue +13 -13
  187. package/docs/examples/input-color/only-button.vue +15 -15
  188. package/docs/examples/input-color/predefine.vue +31 -31
  189. package/docs/examples/input-color/size.vue +15 -15
  190. package/docs/examples/input-layer/basic.vue +69 -69
  191. package/docs/examples/input-rows/basic.vue +73 -73
  192. package/docs/examples/input-rows/drag.vue +48 -48
  193. package/docs/examples/input-rows/layer-form.vue +85 -85
  194. package/docs/examples/input-rows/nested.vue +91 -91
  195. package/docs/examples/input-tag/basic.vue +27 -27
  196. package/docs/examples/input-tag/colors.vue +23 -23
  197. package/docs/examples/input-tag/readonly.vue +17 -17
  198. package/docs/examples/layer/basic.vue +43 -43
  199. package/docs/examples/layer/custom-buttons.vue +61 -61
  200. package/docs/examples/layer/drawer.vue +37 -37
  201. package/docs/examples/layer/full.vue +38 -38
  202. package/docs/examples/layer/modal.vue +34 -34
  203. package/docs/examples/layer/steps.vue +46 -46
  204. package/docs/examples/layer-form/basic.vue +76 -76
  205. package/docs/examples/layer-form/config.vue +82 -82
  206. package/docs/examples/layer-form/size.vue +72 -72
  207. package/docs/examples/layout/basic.vue +36 -36
  208. package/docs/examples/layout/custom-size.vue +50 -50
  209. package/docs/examples/layout/disable-move.vue +37 -37
  210. package/docs/examples/layout/hide-mid-when-narrow.vue +96 -96
  211. package/docs/examples/layout/min-size.vue +73 -73
  212. package/docs/examples/layout/percent-size.vue +80 -80
  213. package/docs/examples/layout/simple.vue +22 -22
  214. package/docs/examples/layout/top-side.vue +34 -34
  215. package/docs/examples/map/basic.vue +22 -22
  216. package/docs/examples/menu/basic.vue +58 -58
  217. package/docs/examples/menu/collapsed.vue +49 -49
  218. package/docs/examples/menu/horizontal.vue +44 -44
  219. package/docs/examples/menu/selection-test.vue +104 -104
  220. package/docs/examples/menu/theme.vue +46 -46
  221. package/docs/examples/menu/vertical.vue +46 -46
  222. package/docs/examples/number/advanced.vue +143 -143
  223. package/docs/examples/number/basic.vue +63 -63
  224. package/docs/examples/number/disabled.vue +49 -49
  225. package/docs/examples/number/size.vue +42 -42
  226. package/docs/examples/number/slots.vue +123 -123
  227. package/docs/examples/number/step-strictly.vue +41 -41
  228. package/docs/examples/number/step.vue +47 -47
  229. package/docs/examples/page/basic.vue +41 -41
  230. package/docs/examples/page/init.vue +87 -87
  231. package/docs/examples/page/log.vue +453 -439
  232. package/docs/examples/panel/tool-buttons.vue +18 -18
  233. package/docs/examples/radio/basic.vue +17 -17
  234. package/docs/examples/radio/button.vue +17 -17
  235. package/docs/examples/radio/color.vue +18 -18
  236. package/docs/examples/radio/disabled.vue +17 -17
  237. package/docs/examples/radio/size.vue +29 -29
  238. package/docs/examples/rate/basic.vue +24 -24
  239. package/docs/examples/rate/half.vue +24 -24
  240. package/docs/examples/rate/readonly.vue +11 -11
  241. package/docs/examples/rate/text.vue +32 -32
  242. package/docs/examples/select/basic.vue +16 -16
  243. package/docs/examples/select/clearable.vue +22 -22
  244. package/docs/examples/select/disabled.vue +31 -31
  245. package/docs/examples/select/filterable.vue +24 -24
  246. package/docs/examples/select/group.vue +23 -23
  247. package/docs/examples/select/icon.vue +16 -16
  248. package/docs/examples/select/multiple.vue +18 -18
  249. package/docs/examples/select/size.vue +39 -39
  250. package/docs/examples/slider/basic.vue +42 -42
  251. package/docs/examples/slider/disabled.vue +17 -17
  252. package/docs/examples/slider/marks.vue +30 -30
  253. package/docs/examples/slider/size.vue +37 -37
  254. package/docs/examples/slider/tooltip.vue +36 -36
  255. package/docs/examples/slider/vertical.vue +26 -26
  256. package/docs/examples/slider-captcha/basic.vue +44 -44
  257. package/docs/examples/slider-captcha/custom.vue +48 -48
  258. package/docs/examples/switch/basic.vue +16 -16
  259. package/docs/examples/switch/disabled.vue +13 -13
  260. package/docs/examples/switch/loading.vue +13 -13
  261. package/docs/examples/switch/size.vue +15 -15
  262. package/docs/examples/switch/text.vue +13 -13
  263. package/docs/examples/table/actions.vue +116 -116
  264. package/docs/examples/table/add-row.vue +103 -103
  265. package/docs/examples/table/basic.vue +168 -168
  266. package/docs/examples/table/custom-layout.vue +115 -115
  267. package/docs/examples/table/editable.vue +263 -263
  268. package/docs/examples/table/field-selection.vue +87 -87
  269. package/docs/examples/table/frozen-column.vue +140 -140
  270. package/docs/examples/table/height-mode.vue +99 -99
  271. package/docs/examples/table/icon.vue +85 -85
  272. package/docs/examples/table/link.vue +66 -66
  273. package/docs/examples/table/multiple.vue +178 -178
  274. package/docs/examples/table/pagination.vue +151 -151
  275. package/docs/examples/table/single-selection.vue +64 -64
  276. package/docs/examples/table/sub-table-lazy.vue +97 -97
  277. package/docs/examples/table/sub-table.vue +103 -103
  278. package/docs/examples/table/tag.vue +43 -43
  279. package/docs/examples/table/tree-column.vue +119 -119
  280. package/docs/examples/table/tree-data.vue +141 -141
  281. package/docs/examples/table/tree-lazy.vue +80 -80
  282. package/docs/examples/table-panel/basic.vue +228 -228
  283. package/docs/examples/table-panel/batch-operations.vue +285 -285
  284. package/docs/examples/table-panel/filter.vue +219 -219
  285. package/docs/examples/table-panel/multiple-selection.vue +243 -243
  286. package/docs/examples/table-panel/pagination.vue +133 -133
  287. package/docs/examples/table-panel/sub-table-lazy.vue +118 -118
  288. package/docs/examples/tabs/basic.vue +98 -98
  289. package/docs/examples/title/basic.vue +80 -80
  290. package/docs/examples/tree/accordion.vue +46 -46
  291. package/docs/examples/tree/basic.vue +50 -50
  292. package/docs/examples/tree/buttons.vue +53 -53
  293. package/docs/examples/tree/checkable.vue +52 -52
  294. package/docs/examples/tree/custom-keys.vue +39 -39
  295. package/docs/examples/tree/default-expanded.vue +52 -52
  296. package/docs/examples/tree/draggable.vue +29 -29
  297. package/docs/examples/tree/expand-on-click.vue +39 -39
  298. package/docs/examples/tree/flat-data.vue +20 -20
  299. package/docs/examples/tree/icon.vue +40 -40
  300. package/docs/examples/tree/load-data.vue +37 -37
  301. package/docs/examples/tree/methods.vue +74 -74
  302. package/docs/examples/tree/theme.vue +33 -33
  303. package/docs/examples/upload/accept.vue +31 -31
  304. package/docs/examples/upload/basic.vue +12 -12
  305. package/docs/examples/upload/drag.vue +11 -11
  306. package/docs/examples/upload/image.vue +17 -17
  307. package/docs/examples/upload/limit.vue +20 -20
  308. package/docs/examples/upload/multiple.vue +17 -17
  309. package/docs/examples/upload/readonly.vue +17 -17
  310. package/docs/examples/utils/cipher.vue +160 -160
  311. package/docs/examples/utils/common.vue +153 -153
  312. package/docs/examples/utils/date.vue +56 -56
  313. package/docs/examples/utils/dom.vue +52 -52
  314. package/docs/examples/utils/is.vue +70 -70
  315. package/docs/examples/workflow/basic.vue +265 -265
  316. package/docs/examples/workflow-viewer/basic.vue +248 -248
  317. package/package.json +23 -23
@@ -1,101 +1,101 @@
1
- # Barcode 条码
2
-
3
- 条码/二维码生成组件,支持多种条码格式和二维码,使用SVG渲染。
4
-
5
- ## 所有条码类型
6
-
7
- 组件支持多种条码格式,包括常用零售条码、通用一维码、二维码、邮政编码和医药行业条码。
8
-
9
- <Demo :source-code="barcodeAllTypesCode">
10
- <template #source>
11
- <barcode-all-types />
12
- </template>
13
- <template #description>
14
- 展示所有支持的条码类型,包括常用零售条码(EAN-13、EAN-8、UPC-A、UPC-E、ITF-14、GS1-128)、通用一维码(CODE128、CODE39、CODE93、Interleaved 2 of 5、Codabar、MSI)、二维码(QR Code、Micro QR Code、Data Matrix、PDF417、Aztec Code、Hanxin)、邮政编码(USPS OneCode、POSTNET、PLANET、Royal Mail、Japan Post、AUSPOST)和医药行业条码(Pharmacode、CODE32、HIBCCode128、PZN)。
15
- </template>
16
- </Demo>
17
-
18
- ## 几何尺寸属性
19
-
20
- 控制条码的尺寸、缩放和旋转。
21
-
22
- <Demo :source-code="barcodePropsGeometryCode">
23
- <template #source>
24
- <barcode-props-geometry />
25
- </template>
26
- <template #description>
27
- 展示几何尺寸相关属性:scale(整体缩放比例)、scaleX/scaleY(水平和垂直缩放)、height(一维码高度)、rotate(旋转角度:N/R/L/I)。
28
- </template>
29
- </Demo>
30
-
31
- ## 颜色与外观属性
32
-
33
- 自定义条码的颜色、背景和内边距。
34
-
35
- <Demo :source-code="barcodePropsAppearanceCode">
36
- <template #source>
37
- <barcode-props-appearance />
38
- </template>
39
- <template #description>
40
- 展示颜色与外观相关属性:barcolor(条码前景色)、backgroundcolor(背景色)、padding(内边距)、paddingwidth/paddingheight(左右/上下内边距)、inkspread(油墨扩散补偿)。
41
- </template>
42
- </Demo>
43
-
44
- ## 文本设置属性
45
-
46
- 控制条码下方人眼可读文本的显示方式。
47
-
48
- <Demo :source-code="barcodePropsTextCode">
49
- <template #source>
50
- <barcode-props-text />
51
- </template>
52
- <template #description>
53
- 展示文本设置相关属性:includetext(是否显示文本)、alttext(替代显示文本)、textfont(字体:OCR-A/OCR-B/Helvetica/Courier)、textsize(字体大小)、textxalign/textyalign(文本对齐方式)、textxoffset/textyoffset(文本偏移)、textcolor(文本颜色)。
54
- </template>
55
- </Demo>
56
-
57
- ## 校验与逻辑属性
58
-
59
- 控制条码的校验位显示和字符解析。
60
-
61
- <Demo :source-code="barcodePropsLogicCode">
62
- <template #source>
63
- <barcode-props-logic />
64
- </template>
65
- <template #description>
66
- 展示校验与逻辑相关属性:includecheck(在文本中包含校验位)、includecheckintext(针对特定码制的校验位显示)、parse(启用转义字符解析)、parsefnc(启用功能字符解析)、guardwhitespace(强制显示两侧静区)、guardwidth(静区宽度)。
67
- </template>
68
- </Demo>
69
-
70
- ## 专用条码参数
71
-
72
- 针对特定条码类型的专用参数设置。
73
-
74
- <Demo :source-code="barcodePropsSymbologyCode">
75
- <template #source>
76
- <barcode-props-symbology />
77
- </template>
78
- <template #description>
79
- 展示专用条码参数:eclevel(QR码/Aztec纠错等级:L/M/Q/H)、version(QR码强制版本:1-40)、format(Data Matrix形状:square/rect)、columns/rows(PDF417列数/行数)、errorlevel(PDF417纠错等级:0-8)。
80
- </template>
81
- </Demo>
82
-
83
- ## API
84
-
85
- <ApiTable :data="barcodeApi" componentName="barcode" />
86
-
87
- <script setup>
88
- import BarcodeAllTypes from '../examples/barcode/all-types.vue'
89
- import BarcodePropsGeometry from '../examples/barcode/props-geometry.vue'
90
- import BarcodePropsAppearance from '../examples/barcode/props-appearance.vue'
91
- import BarcodePropsText from '../examples/barcode/props-text.vue'
92
- import BarcodePropsLogic from '../examples/barcode/props-logic.vue'
93
- import BarcodePropsSymbology from '../examples/barcode/props-symbology.vue'
94
- import barcodeApi from './meta/barcode'
95
- import barcodeAllTypesCode from '../examples/barcode/all-types.vue?raw'
96
- import barcodePropsGeometryCode from '../examples/barcode/props-geometry.vue?raw'
97
- import barcodePropsAppearanceCode from '../examples/barcode/props-appearance.vue?raw'
98
- import barcodePropsTextCode from '../examples/barcode/props-text.vue?raw'
99
- import barcodePropsLogicCode from '../examples/barcode/props-logic.vue?raw'
100
- import barcodePropsSymbologyCode from '../examples/barcode/props-symbology.vue?raw'
101
- </script>
1
+ # Barcode 条码
2
+
3
+ 条码/二维码生成组件,支持多种条码格式和二维码,使用SVG渲染。
4
+
5
+ ## 所有条码类型
6
+
7
+ 组件支持多种条码格式,包括常用零售条码、通用一维码、二维码、邮政编码和医药行业条码。
8
+
9
+ <Demo :source-code="barcodeAllTypesCode">
10
+ <template #source>
11
+ <barcode-all-types />
12
+ </template>
13
+ <template #description>
14
+ 展示所有支持的条码类型,包括常用零售条码(EAN-13、EAN-8、UPC-A、UPC-E、ITF-14、GS1-128)、通用一维码(CODE128、CODE39、CODE93、Interleaved 2 of 5、Codabar、MSI)、二维码(QR Code、Micro QR Code、Data Matrix、PDF417、Aztec Code、Hanxin)、邮政编码(USPS OneCode、POSTNET、PLANET、Royal Mail、Japan Post、AUSPOST)和医药行业条码(Pharmacode、CODE32、HIBCCode128、PZN)。
15
+ </template>
16
+ </Demo>
17
+
18
+ ## 几何尺寸属性
19
+
20
+ 控制条码的尺寸、缩放和旋转。
21
+
22
+ <Demo :source-code="barcodePropsGeometryCode">
23
+ <template #source>
24
+ <barcode-props-geometry />
25
+ </template>
26
+ <template #description>
27
+ 展示几何尺寸相关属性:scale(整体缩放比例)、scaleX/scaleY(水平和垂直缩放)、height(一维码高度)、rotate(旋转角度:N/R/L/I)。
28
+ </template>
29
+ </Demo>
30
+
31
+ ## 颜色与外观属性
32
+
33
+ 自定义条码的颜色、背景和内边距。
34
+
35
+ <Demo :source-code="barcodePropsAppearanceCode">
36
+ <template #source>
37
+ <barcode-props-appearance />
38
+ </template>
39
+ <template #description>
40
+ 展示颜色与外观相关属性:barcolor(条码前景色)、backgroundcolor(背景色)、padding(内边距)、paddingwidth/paddingheight(左右/上下内边距)、inkspread(油墨扩散补偿)。
41
+ </template>
42
+ </Demo>
43
+
44
+ ## 文本设置属性
45
+
46
+ 控制条码下方人眼可读文本的显示方式。
47
+
48
+ <Demo :source-code="barcodePropsTextCode">
49
+ <template #source>
50
+ <barcode-props-text />
51
+ </template>
52
+ <template #description>
53
+ 展示文本设置相关属性:includetext(是否显示文本)、alttext(替代显示文本)、textfont(字体:OCR-A/OCR-B/Helvetica/Courier)、textsize(字体大小)、textxalign/textyalign(文本对齐方式)、textxoffset/textyoffset(文本偏移)、textcolor(文本颜色)。
54
+ </template>
55
+ </Demo>
56
+
57
+ ## 校验与逻辑属性
58
+
59
+ 控制条码的校验位显示和字符解析。
60
+
61
+ <Demo :source-code="barcodePropsLogicCode">
62
+ <template #source>
63
+ <barcode-props-logic />
64
+ </template>
65
+ <template #description>
66
+ 展示校验与逻辑相关属性:includecheck(在文本中包含校验位)、includecheckintext(针对特定码制的校验位显示)、parse(启用转义字符解析)、parsefnc(启用功能字符解析)、guardwhitespace(强制显示两侧静区)、guardwidth(静区宽度)。
67
+ </template>
68
+ </Demo>
69
+
70
+ ## 专用条码参数
71
+
72
+ 针对特定条码类型的专用参数设置。
73
+
74
+ <Demo :source-code="barcodePropsSymbologyCode">
75
+ <template #source>
76
+ <barcode-props-symbology />
77
+ </template>
78
+ <template #description>
79
+ 展示专用条码参数:eclevel(QR码/Aztec纠错等级:L/M/Q/H)、version(QR码强制版本:1-40)、format(Data Matrix形状:square/rect)、columns/rows(PDF417列数/行数)、errorlevel(PDF417纠错等级:0-8)。
80
+ </template>
81
+ </Demo>
82
+
83
+ ## API
84
+
85
+ <ApiTable :data="barcodeApi" componentName="barcode" />
86
+
87
+ <script setup>
88
+ import BarcodeAllTypes from '../examples/barcode/all-types.vue'
89
+ import BarcodePropsGeometry from '../examples/barcode/props-geometry.vue'
90
+ import BarcodePropsAppearance from '../examples/barcode/props-appearance.vue'
91
+ import BarcodePropsText from '../examples/barcode/props-text.vue'
92
+ import BarcodePropsLogic from '../examples/barcode/props-logic.vue'
93
+ import BarcodePropsSymbology from '../examples/barcode/props-symbology.vue'
94
+ import barcodeApi from './meta/barcode'
95
+ import barcodeAllTypesCode from '../examples/barcode/all-types.vue?raw'
96
+ import barcodePropsGeometryCode from '../examples/barcode/props-geometry.vue?raw'
97
+ import barcodePropsAppearanceCode from '../examples/barcode/props-appearance.vue?raw'
98
+ import barcodePropsTextCode from '../examples/barcode/props-text.vue?raw'
99
+ import barcodePropsLogicCode from '../examples/barcode/props-logic.vue?raw'
100
+ import barcodePropsSymbologyCode from '../examples/barcode/props-symbology.vue?raw'
101
+ </script>
@@ -1,24 +1,24 @@
1
- # ButtonSelect 按钮选择
2
-
3
- 通过点击按钮弹出选项面板,支持搜索与多次添加。
4
-
5
- ## 基础用法
6
-
7
- <Demo :source-code="basicCode">
8
- <template #source>
9
- <button-select-basic />
10
- </template>
11
- <template #description>
12
- 使用 v-model 以逗号分隔的字符串记录已选择项。
13
- </template>
14
- </Demo>
15
-
16
- ## API
17
-
18
- <ApiTable :data="buttonSelectApi" componentName="button-select" />
19
-
20
- <script setup>
21
- import ButtonSelectBasic from '../examples/button-select/basic.vue'
22
- import buttonSelectApi from './meta/button-select'
23
- import basicCode from '../examples/button-select/basic.vue?raw'
24
- </script>
1
+ # ButtonSelect 按钮选择
2
+
3
+ 通过点击按钮弹出选项面板,支持搜索与多次添加。
4
+
5
+ ## 基础用法
6
+
7
+ <Demo :source-code="basicCode">
8
+ <template #source>
9
+ <button-select-basic />
10
+ </template>
11
+ <template #description>
12
+ 使用 v-model 以逗号分隔的字符串记录已选择项。
13
+ </template>
14
+ </Demo>
15
+
16
+ ## API
17
+
18
+ <ApiTable :data="buttonSelectApi" componentName="button-select" />
19
+
20
+ <script setup>
21
+ import ButtonSelectBasic from '../examples/button-select/basic.vue'
22
+ import buttonSelectApi from './meta/button-select'
23
+ import basicCode from '../examples/button-select/basic.vue?raw'
24
+ </script>
@@ -1,117 +1,117 @@
1
- # Button 按钮
2
-
3
- 常用的操作按钮。
4
-
5
- ## 按钮类型
6
-
7
- 使用 `type` 属性来定义按钮的样式。
8
-
9
- <Demo :source-code="buttonTypeCode">
10
- <template #source>
11
- <button-type />
12
- </template>
13
- <template #description>
14
- 按钮有五种类型:主要按钮、次要按钮(默认)、虚框按钮、文字按钮和链接按钮。
15
- </template>
16
- </Demo>
17
-
18
- ## 图标按钮
19
-
20
- 使用 `icon` 属性或者 `icon` 插槽来设置按钮图标。
21
-
22
- <Demo :source-code="buttonBasicCode">
23
- <template #source>
24
- <button-basic />
25
- </template>
26
- <template #description>
27
- 可以通过 `icon` 属性设置图标,或者通过 `#icon` 插槽自定义图标内容。
28
- </template>
29
- </Demo>
30
-
31
- ## 加载状态
32
-
33
- 使用 `loading` 属性来设置旋转的加载图标。
34
-
35
- <Demo :source-code="buttonLoadingCode">
36
- <template #source>
37
- <button-loading />
38
- </template>
39
- <template #description>
40
- 设置 `loading` 属性为 `true` 即可。也可以设置 `{ delay: number }` 来延迟显示加载状态。
41
- </template>
42
- </Demo>
43
-
44
- ## 按钮形状
45
-
46
- 使用 `shape` 属性定义按钮形状。
47
-
48
- <Demo :source-code="buttonShapeCode">
49
- <template #source>
50
- <button-shape />
51
- </template>
52
- <template #description>
53
- 支持 `default`、`circle`、`round` 三种形状。
54
- </template>
55
- </Demo>
56
-
57
- ## 不同尺寸
58
-
59
- Button 组件提供三种尺寸。
60
-
61
- <Demo :source-code="buttonSizeCode">
62
- <template #source>
63
- <button-size />
64
- </template>
65
- <template #description>
66
- 使用 `size` 属性配置尺寸,可选值为 `large`、`default` 和 `small`。
67
- </template>
68
- </Demo>
69
-
70
- ## 禁用状态
71
-
72
- 使用 `disabled` 属性来定义按钮是否被禁用。
73
-
74
- <Demo :source-code="buttonDisabledCode">
75
- <template #source>
76
- <button-disabled />
77
- </template>
78
- <template #description>
79
- 你可以使用 `disabled` 属性来定义按钮是否可用。
80
- </template>
81
- </Demo>
82
-
83
- ## 危险按钮 & 幽灵按钮
84
-
85
- `danger` 属性用于表示危险操作。`ghost` 属性使按钮背景透明,常用于深色背景。
86
-
87
- <Demo :source-code="buttonDangerGhostCode">
88
- <template #source>
89
- <button-danger-ghost />
90
- </template>
91
- <template #description>
92
- 危险按钮通常用于删除等不可逆操作。幽灵按钮则常用于有背景色的界面。
93
- </template>
94
- </Demo>
95
-
96
- ## API
97
-
98
- <ApiTable :data="buttonApi" componentName="button" />
99
-
100
- <script setup>
101
- import ButtonType from '../examples/button/type.vue'
102
- import ButtonBasic from '../examples/button/basic.vue'
103
- import ButtonLoading from '../examples/button/loading.vue'
104
- import ButtonShape from '../examples/button/shape.vue'
105
- import ButtonSize from '../examples/button/size.vue'
106
- import ButtonDisabled from '../examples/button/disabled.vue'
107
- import ButtonDangerGhost from '../examples/button/danger-ghost.vue'
108
- import buttonApi from './meta/button'
109
-
110
- import buttonTypeCode from '../examples/button/type.vue?raw'
111
- import buttonBasicCode from '../examples/button/basic.vue?raw'
112
- import buttonLoadingCode from '../examples/button/loading.vue?raw'
113
- import buttonShapeCode from '../examples/button/shape.vue?raw'
114
- import buttonSizeCode from '../examples/button/size.vue?raw'
115
- import buttonDisabledCode from '../examples/button/disabled.vue?raw'
116
- import buttonDangerGhostCode from '../examples/button/danger-ghost.vue?raw'
117
- </script>
1
+ # Button 按钮
2
+
3
+ 常用的操作按钮。
4
+
5
+ ## 按钮类型
6
+
7
+ 使用 `type` 属性来定义按钮的样式。
8
+
9
+ <Demo :source-code="buttonTypeCode">
10
+ <template #source>
11
+ <button-type />
12
+ </template>
13
+ <template #description>
14
+ 按钮有五种类型:主要按钮、次要按钮(默认)、虚框按钮、文字按钮和链接按钮。
15
+ </template>
16
+ </Demo>
17
+
18
+ ## 图标按钮
19
+
20
+ 使用 `icon` 属性或者 `icon` 插槽来设置按钮图标。
21
+
22
+ <Demo :source-code="buttonBasicCode">
23
+ <template #source>
24
+ <button-basic />
25
+ </template>
26
+ <template #description>
27
+ 可以通过 `icon` 属性设置图标,或者通过 `#icon` 插槽自定义图标内容。
28
+ </template>
29
+ </Demo>
30
+
31
+ ## 加载状态
32
+
33
+ 使用 `loading` 属性来设置旋转的加载图标。
34
+
35
+ <Demo :source-code="buttonLoadingCode">
36
+ <template #source>
37
+ <button-loading />
38
+ </template>
39
+ <template #description>
40
+ 设置 `loading` 属性为 `true` 即可。也可以设置 `{ delay: number }` 来延迟显示加载状态。
41
+ </template>
42
+ </Demo>
43
+
44
+ ## 按钮形状
45
+
46
+ 使用 `shape` 属性定义按钮形状。
47
+
48
+ <Demo :source-code="buttonShapeCode">
49
+ <template #source>
50
+ <button-shape />
51
+ </template>
52
+ <template #description>
53
+ 支持 `default`、`circle`、`round` 三种形状。
54
+ </template>
55
+ </Demo>
56
+
57
+ ## 不同尺寸
58
+
59
+ Button 组件提供三种尺寸。
60
+
61
+ <Demo :source-code="buttonSizeCode">
62
+ <template #source>
63
+ <button-size />
64
+ </template>
65
+ <template #description>
66
+ 使用 `size` 属性配置尺寸,可选值为 `large`、`default` 和 `small`。
67
+ </template>
68
+ </Demo>
69
+
70
+ ## 禁用状态
71
+
72
+ 使用 `disabled` 属性来定义按钮是否被禁用。
73
+
74
+ <Demo :source-code="buttonDisabledCode">
75
+ <template #source>
76
+ <button-disabled />
77
+ </template>
78
+ <template #description>
79
+ 你可以使用 `disabled` 属性来定义按钮是否可用。
80
+ </template>
81
+ </Demo>
82
+
83
+ ## 危险按钮 & 幽灵按钮
84
+
85
+ `danger` 属性用于表示危险操作。`ghost` 属性使按钮背景透明,常用于深色背景。
86
+
87
+ <Demo :source-code="buttonDangerGhostCode">
88
+ <template #source>
89
+ <button-danger-ghost />
90
+ </template>
91
+ <template #description>
92
+ 危险按钮通常用于删除等不可逆操作。幽灵按钮则常用于有背景色的界面。
93
+ </template>
94
+ </Demo>
95
+
96
+ ## API
97
+
98
+ <ApiTable :data="buttonApi" componentName="button" />
99
+
100
+ <script setup>
101
+ import ButtonType from '../examples/button/type.vue'
102
+ import ButtonBasic from '../examples/button/basic.vue'
103
+ import ButtonLoading from '../examples/button/loading.vue'
104
+ import ButtonShape from '../examples/button/shape.vue'
105
+ import ButtonSize from '../examples/button/size.vue'
106
+ import ButtonDisabled from '../examples/button/disabled.vue'
107
+ import ButtonDangerGhost from '../examples/button/danger-ghost.vue'
108
+ import buttonApi from './meta/button'
109
+
110
+ import buttonTypeCode from '../examples/button/type.vue?raw'
111
+ import buttonBasicCode from '../examples/button/basic.vue?raw'
112
+ import buttonLoadingCode from '../examples/button/loading.vue?raw'
113
+ import buttonShapeCode from '../examples/button/shape.vue?raw'
114
+ import buttonSizeCode from '../examples/button/size.vue?raw'
115
+ import buttonDisabledCode from '../examples/button/disabled.vue?raw'
116
+ import buttonDangerGhostCode from '../examples/button/danger-ghost.vue?raw'
117
+ </script>