@a2simcode/ui 0.0.67 → 0.0.68

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 (320) 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/components/input-layer/index.d.ts +40 -0
  6. package/dist/components/input-layer/src/input-layer.vue.d.ts +40 -0
  7. package/dist/components/table-panel/index.d.ts +60 -0
  8. package/dist/components/table-panel/src/table-panel.vue.d.ts +60 -0
  9. package/dist/simcode-ui.es.js +4350 -4285
  10. package/dist/simcode-ui.umd.js +2 -2
  11. package/dist/stats.html +1 -1
  12. package/dist/ui.css +1 -1
  13. package/docs/components/autocomplete.md +89 -89
  14. package/docs/components/barcode.md +101 -101
  15. package/docs/components/button-select.md +24 -24
  16. package/docs/components/button.md +117 -117
  17. package/docs/components/buttons.md +119 -119
  18. package/docs/components/cascader-select.md +114 -114
  19. package/docs/components/checkbox.md +114 -114
  20. package/docs/components/code-mirror.md +85 -85
  21. package/docs/components/collapse.md +26 -26
  22. package/docs/components/comp.md +71 -71
  23. package/docs/components/count-up.md +24 -24
  24. package/docs/components/count.md +24 -24
  25. package/docs/components/data-panel.md +24 -24
  26. package/docs/components/dialog-full.md +112 -112
  27. package/docs/components/dialog.md +127 -127
  28. package/docs/components/divider.md +24 -24
  29. package/docs/components/drawer.md +127 -127
  30. package/docs/components/dynamic-layer.md +118 -118
  31. package/docs/components/echarts.md +72 -72
  32. package/docs/components/editor.md +24 -24
  33. package/docs/components/form.md +27 -27
  34. package/docs/components/guid.md +39 -39
  35. package/docs/components/hpanel.md +24 -24
  36. package/docs/components/icon.md +56 -56
  37. package/docs/components/input-button.md +24 -24
  38. package/docs/components/input-code.md +24 -24
  39. package/docs/components/input-color.md +114 -114
  40. package/docs/components/input-layer.md +26 -26
  41. package/docs/components/input-rows.md +370 -370
  42. package/docs/components/input-tag.md +50 -50
  43. package/docs/components/input.md +129 -129
  44. package/docs/components/layer-form.md +61 -61
  45. package/docs/components/layer.md +127 -127
  46. package/docs/components/layout.md +132 -132
  47. package/docs/components/map.md +24 -24
  48. package/docs/components/menu.md +121 -121
  49. package/docs/components/meta/buttons.ts +56 -56
  50. package/docs/components/meta/comp.ts +230 -230
  51. package/docs/components/meta/dynamic-layer.ts +99 -99
  52. package/docs/components/meta/echarts.ts +64 -64
  53. package/docs/components/meta/form-item.ts +50 -50
  54. package/docs/components/meta/form.ts +160 -160
  55. package/docs/components/meta/guid.ts +42 -42
  56. package/docs/components/meta/input-cards.ts +112 -112
  57. package/docs/components/meta/input-color.ts +243 -243
  58. package/docs/components/meta/input-rows.ts +113 -113
  59. package/docs/components/meta/input.ts +411 -411
  60. package/docs/components/meta/layer-form.ts +56 -56
  61. package/docs/components/meta/map.ts +68 -68
  62. package/docs/components/meta/number.ts +296 -296
  63. package/docs/components/meta/page.ts +67 -67
  64. package/docs/components/meta/panel.ts +152 -152
  65. package/docs/components/meta/radio.ts +55 -55
  66. package/docs/components/meta/slider.ts +270 -270
  67. package/docs/components/meta/table-panel.ts +154 -154
  68. package/docs/components/meta/table.ts +363 -363
  69. package/docs/components/meta/tabs.ts +136 -136
  70. package/docs/components/meta/tree-select.ts +199 -199
  71. package/docs/components/meta/workflow-viewer.ts +55 -55
  72. package/docs/components/meta/workflow.ts +113 -113
  73. package/docs/components/number.md +124 -124
  74. package/docs/components/page.md +42 -42
  75. package/docs/components/panel.md +37 -37
  76. package/docs/components/radio.md +87 -87
  77. package/docs/components/rate.md +71 -71
  78. package/docs/components/select.md +133 -133
  79. package/docs/components/slider-captcha.md +41 -41
  80. package/docs/components/slider.md +101 -101
  81. package/docs/components/switch.md +90 -90
  82. package/docs/components/table-panel.md +199 -199
  83. package/docs/components/table.md +304 -304
  84. package/docs/components/tabs.md +26 -26
  85. package/docs/components/title.md +24 -24
  86. package/docs/components/tree.md +207 -207
  87. package/docs/components/upload.md +117 -117
  88. package/docs/components/workflow-viewer.md +21 -21
  89. package/docs/components/workflow.md +21 -21
  90. package/docs/examples/autocomplete/advanced.vue +35 -35
  91. package/docs/examples/autocomplete/basic.vue +32 -32
  92. package/docs/examples/autocomplete/clearable.vue +33 -33
  93. package/docs/examples/autocomplete/custom-template.vue +49 -49
  94. package/docs/examples/autocomplete/disabled.vue +33 -33
  95. package/docs/examples/autocomplete/icon.vue +37 -37
  96. package/docs/examples/barcode/all-types.vue +380 -380
  97. package/docs/examples/barcode/basic.vue +14 -14
  98. package/docs/examples/barcode/props-appearance.vue +243 -243
  99. package/docs/examples/barcode/props-geometry.vue +143 -143
  100. package/docs/examples/barcode/props-logic.vue +216 -216
  101. package/docs/examples/barcode/props-symbology.vue +199 -199
  102. package/docs/examples/barcode/props-text.vue +268 -268
  103. package/docs/examples/button/basic.vue +7 -7
  104. package/docs/examples/button/danger-ghost.vue +17 -17
  105. package/docs/examples/button/disabled.vue +10 -10
  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/type.vue +9 -9
  110. package/docs/examples/button-select/basic.vue +19 -19
  111. package/docs/examples/buttons/basic.vue +45 -45
  112. package/docs/examples/buttons/disabled.vue +36 -36
  113. package/docs/examples/buttons/dropdown.vue +63 -63
  114. package/docs/examples/buttons/group.vue +52 -52
  115. package/docs/examples/buttons/link.vue +47 -47
  116. package/docs/examples/buttons/popup.vue +39 -39
  117. package/docs/examples/buttons/size.vue +45 -45
  118. package/docs/examples/cascader-select/basic.vue +28 -28
  119. package/docs/examples/cascader-select/clearable.vue +34 -34
  120. package/docs/examples/cascader-select/disabled.vue +43 -43
  121. package/docs/examples/cascader-select/filterable.vue +37 -37
  122. package/docs/examples/cascader-select/methods.vue +84 -84
  123. package/docs/examples/cascader-select/multiple.vue +38 -38
  124. package/docs/examples/cascader-select/slot.vue +45 -45
  125. package/docs/examples/checkbox/basic.vue +18 -18
  126. package/docs/examples/checkbox/button.vue +19 -19
  127. package/docs/examples/checkbox/color.vue +25 -25
  128. package/docs/examples/checkbox/disabled.vue +17 -17
  129. package/docs/examples/checkbox/min-max.vue +20 -20
  130. package/docs/examples/checkbox/mixed.vue +56 -56
  131. package/docs/examples/checkbox/size.vue +28 -28
  132. package/docs/examples/code-mirror/basic.vue +11 -11
  133. package/docs/examples/code-mirror/events.vue +42 -42
  134. package/docs/examples/code-mirror/height.vue +25 -25
  135. package/docs/examples/code-mirror/mode.vue +33 -33
  136. package/docs/examples/code-mirror/readonly.vue +14 -14
  137. package/docs/examples/collapse/basic.vue +82 -82
  138. package/docs/examples/comp/basic.vue +7 -7
  139. package/docs/examples/comp/collapse.vue +38 -38
  140. package/docs/examples/comp/tabs.vue +38 -38
  141. package/docs/examples/count/basic.vue +54 -54
  142. package/docs/examples/count-up/basic.vue +89 -89
  143. package/docs/examples/data-panel/basic.vue +110 -110
  144. package/docs/examples/dialog/basic.vue +36 -36
  145. package/docs/examples/dialog/custom-buttons.vue +44 -44
  146. package/docs/examples/dialog/fullscreen.vue +23 -23
  147. package/docs/examples/dialog/no-mask.vue +17 -17
  148. package/docs/examples/dialog/size.vue +44 -44
  149. package/docs/examples/dialog/steps.vue +57 -57
  150. package/docs/examples/dialog-full/basic.vue +29 -29
  151. package/docs/examples/dialog-full/custom-buttons.vue +45 -45
  152. package/docs/examples/dialog-full/no-buttons.vue +18 -18
  153. package/docs/examples/dialog-full/no-header.vue +27 -27
  154. package/docs/examples/dialog-full/steps.vue +71 -71
  155. package/docs/examples/divider/basic.vue +52 -52
  156. package/docs/examples/drawer/basic.vue +35 -35
  157. package/docs/examples/drawer/custom-buttons.vue +34 -34
  158. package/docs/examples/drawer/direction.vue +47 -47
  159. package/docs/examples/drawer/mask.vue +36 -36
  160. package/docs/examples/drawer/no-buttons.vue +20 -20
  161. package/docs/examples/drawer/size.vue +28 -28
  162. package/docs/examples/dynamic-layer/basic.vue +33 -33
  163. package/docs/examples/dynamic-layer/custom-buttons.vue +43 -43
  164. package/docs/examples/dynamic-layer/form.vue +73 -73
  165. package/docs/examples/dynamic-layer/steps.vue +52 -52
  166. package/docs/examples/dynamic-layer/types.vue +40 -40
  167. package/docs/examples/echarts/basic.vue +31 -31
  168. package/docs/examples/echarts/dynamic.vue +43 -43
  169. package/docs/examples/echarts/line.vue +46 -46
  170. package/docs/examples/echarts/pie.vue +44 -44
  171. package/docs/examples/editor/basic.vue +15 -15
  172. package/docs/examples/form/basic.vue +450 -436
  173. package/docs/examples/guid/basic.vue +10 -10
  174. package/docs/examples/guid/size.vue +13 -13
  175. package/docs/examples/hpanel/basic.vue +79 -79
  176. package/docs/examples/icon/basic.vue +9 -9
  177. package/docs/examples/icon/rotate-flip.vue +9 -9
  178. package/docs/examples/icon/size.vue +7 -7
  179. package/docs/examples/input/basic.vue +10 -10
  180. package/docs/examples/input/clearable.vue +12 -12
  181. package/docs/examples/input/disabled.vue +6 -6
  182. package/docs/examples/input/icon.vue +23 -23
  183. package/docs/examples/input/password.vue +18 -18
  184. package/docs/examples/input/size.vue +13 -13
  185. package/docs/examples/input/textarea.vue +25 -25
  186. package/docs/examples/input/word-limit.vue +28 -28
  187. package/docs/examples/input-button/basic.vue +33 -33
  188. package/docs/examples/input-code/basic.vue +29 -29
  189. package/docs/examples/input-color/basic.vue +10 -10
  190. package/docs/examples/input-color/disabled.vue +13 -13
  191. package/docs/examples/input-color/format.vue +17 -17
  192. package/docs/examples/input-color/no-alpha.vue +13 -13
  193. package/docs/examples/input-color/only-button.vue +15 -15
  194. package/docs/examples/input-color/predefine.vue +31 -31
  195. package/docs/examples/input-color/size.vue +15 -15
  196. package/docs/examples/input-layer/basic.vue +69 -69
  197. package/docs/examples/input-rows/basic.vue +73 -73
  198. package/docs/examples/input-rows/drag.vue +48 -48
  199. package/docs/examples/input-rows/layer-form.vue +85 -85
  200. package/docs/examples/input-rows/nested.vue +91 -91
  201. package/docs/examples/input-tag/basic.vue +27 -27
  202. package/docs/examples/input-tag/colors.vue +23 -23
  203. package/docs/examples/input-tag/readonly.vue +17 -17
  204. package/docs/examples/layer/basic.vue +43 -43
  205. package/docs/examples/layer/custom-buttons.vue +61 -61
  206. package/docs/examples/layer/drawer.vue +37 -37
  207. package/docs/examples/layer/full.vue +38 -38
  208. package/docs/examples/layer/modal.vue +34 -34
  209. package/docs/examples/layer/steps.vue +46 -46
  210. package/docs/examples/layer-form/basic.vue +76 -76
  211. package/docs/examples/layer-form/config.vue +82 -82
  212. package/docs/examples/layer-form/size.vue +72 -72
  213. package/docs/examples/layout/basic.vue +36 -36
  214. package/docs/examples/layout/custom-size.vue +50 -50
  215. package/docs/examples/layout/disable-move.vue +37 -37
  216. package/docs/examples/layout/hide-mid-when-narrow.vue +96 -96
  217. package/docs/examples/layout/min-size.vue +73 -73
  218. package/docs/examples/layout/percent-size.vue +80 -80
  219. package/docs/examples/layout/simple.vue +22 -22
  220. package/docs/examples/layout/top-side.vue +34 -34
  221. package/docs/examples/map/basic.vue +22 -22
  222. package/docs/examples/menu/basic.vue +58 -58
  223. package/docs/examples/menu/collapsed.vue +49 -49
  224. package/docs/examples/menu/horizontal.vue +44 -44
  225. package/docs/examples/menu/selection-test.vue +104 -104
  226. package/docs/examples/menu/theme.vue +46 -46
  227. package/docs/examples/menu/vertical.vue +46 -46
  228. package/docs/examples/number/advanced.vue +143 -143
  229. package/docs/examples/number/basic.vue +63 -63
  230. package/docs/examples/number/disabled.vue +49 -49
  231. package/docs/examples/number/size.vue +42 -42
  232. package/docs/examples/number/slots.vue +123 -123
  233. package/docs/examples/number/step-strictly.vue +41 -41
  234. package/docs/examples/number/step.vue +47 -47
  235. package/docs/examples/page/basic.vue +41 -41
  236. package/docs/examples/page/init.vue +87 -87
  237. package/docs/examples/panel/tool-buttons.vue +18 -18
  238. package/docs/examples/radio/basic.vue +17 -17
  239. package/docs/examples/radio/button.vue +17 -17
  240. package/docs/examples/radio/color.vue +18 -18
  241. package/docs/examples/radio/disabled.vue +17 -17
  242. package/docs/examples/radio/size.vue +29 -29
  243. package/docs/examples/rate/basic.vue +24 -24
  244. package/docs/examples/rate/half.vue +24 -24
  245. package/docs/examples/rate/readonly.vue +11 -11
  246. package/docs/examples/rate/text.vue +32 -32
  247. package/docs/examples/select/basic.vue +16 -16
  248. package/docs/examples/select/clearable.vue +22 -22
  249. package/docs/examples/select/disabled.vue +31 -31
  250. package/docs/examples/select/filterable.vue +24 -24
  251. package/docs/examples/select/group.vue +23 -23
  252. package/docs/examples/select/icon.vue +16 -16
  253. package/docs/examples/select/multiple.vue +18 -18
  254. package/docs/examples/select/size.vue +39 -39
  255. package/docs/examples/slider/basic.vue +42 -42
  256. package/docs/examples/slider/disabled.vue +17 -17
  257. package/docs/examples/slider/marks.vue +30 -30
  258. package/docs/examples/slider/size.vue +37 -37
  259. package/docs/examples/slider/tooltip.vue +36 -36
  260. package/docs/examples/slider/vertical.vue +26 -26
  261. package/docs/examples/slider-captcha/basic.vue +44 -44
  262. package/docs/examples/slider-captcha/custom.vue +48 -48
  263. package/docs/examples/switch/basic.vue +16 -16
  264. package/docs/examples/switch/disabled.vue +13 -13
  265. package/docs/examples/switch/loading.vue +13 -13
  266. package/docs/examples/switch/size.vue +15 -15
  267. package/docs/examples/switch/text.vue +13 -13
  268. package/docs/examples/table/actions.vue +116 -116
  269. package/docs/examples/table/add-row.vue +103 -103
  270. package/docs/examples/table/basic.vue +168 -168
  271. package/docs/examples/table/custom-layout.vue +115 -115
  272. package/docs/examples/table/editable.vue +262 -262
  273. package/docs/examples/table/field-selection.vue +87 -87
  274. package/docs/examples/table/frozen-column.vue +140 -140
  275. package/docs/examples/table/height-mode.vue +99 -99
  276. package/docs/examples/table/icon.vue +85 -85
  277. package/docs/examples/table/link.vue +66 -66
  278. package/docs/examples/table/multiple.vue +178 -178
  279. package/docs/examples/table/pagination.vue +151 -151
  280. package/docs/examples/table/single-selection.vue +64 -64
  281. package/docs/examples/table/sub-table-lazy.vue +97 -97
  282. package/docs/examples/table/sub-table.vue +103 -103
  283. package/docs/examples/table/tag.vue +43 -43
  284. package/docs/examples/table/tree-column.vue +119 -119
  285. package/docs/examples/table/tree-data.vue +141 -141
  286. package/docs/examples/table-panel/basic.vue +228 -228
  287. package/docs/examples/table-panel/batch-operations.vue +285 -285
  288. package/docs/examples/table-panel/filter.vue +209 -209
  289. package/docs/examples/table-panel/multiple-selection.vue +243 -243
  290. package/docs/examples/table-panel/pagination.vue +133 -133
  291. package/docs/examples/tabs/basic.vue +98 -98
  292. package/docs/examples/title/basic.vue +80 -80
  293. package/docs/examples/tree/accordion.vue +46 -46
  294. package/docs/examples/tree/basic.vue +50 -50
  295. package/docs/examples/tree/buttons.vue +53 -53
  296. package/docs/examples/tree/checkable.vue +52 -52
  297. package/docs/examples/tree/custom-keys.vue +39 -39
  298. package/docs/examples/tree/default-expanded.vue +52 -52
  299. package/docs/examples/tree/draggable.vue +29 -29
  300. package/docs/examples/tree/expand-on-click.vue +39 -39
  301. package/docs/examples/tree/flat-data.vue +20 -20
  302. package/docs/examples/tree/icon.vue +40 -40
  303. package/docs/examples/tree/load-data.vue +37 -37
  304. package/docs/examples/tree/methods.vue +74 -74
  305. package/docs/examples/tree/theme.vue +33 -33
  306. package/docs/examples/upload/accept.vue +31 -31
  307. package/docs/examples/upload/basic.vue +12 -12
  308. package/docs/examples/upload/drag.vue +11 -11
  309. package/docs/examples/upload/image.vue +17 -17
  310. package/docs/examples/upload/limit.vue +20 -20
  311. package/docs/examples/upload/multiple.vue +17 -17
  312. package/docs/examples/upload/readonly.vue +17 -17
  313. package/docs/examples/utils/cipher.vue +160 -160
  314. package/docs/examples/utils/common.vue +153 -153
  315. package/docs/examples/utils/date.vue +56 -56
  316. package/docs/examples/utils/dom.vue +52 -52
  317. package/docs/examples/utils/is.vue +70 -70
  318. package/docs/examples/workflow/basic.vue +265 -265
  319. package/docs/examples/workflow-viewer/basic.vue +248 -248
  320. package/package.json +23 -23
@@ -1,41 +1,41 @@
1
- # SliderCaptcha 滑块验证
2
-
3
- 通过拖动滑块进行人机验证。
4
-
5
- ## 基础用法
6
-
7
- 最简单的滑块验证码使用方式。
8
-
9
- <Demo :source-code="sliderCaptchaBasicCode">
10
- <template #source>
11
- <slider-captcha-basic />
12
- </template>
13
- <template #description>
14
- 使用 v-model 绑定验证状态,可以通过 text 和 success-text 自定义提示文字。
15
- </template>
16
- </Demo>
17
-
18
- ## 自定义样式
19
-
20
- 可以通过样式属性自定义滑块验证码的外观。
21
-
22
- <Demo :source-code="sliderCaptchaCustomCode">
23
- <template #source>
24
- <slider-captcha-custom />
25
- </template>
26
- <template #description>
27
- 通过 wrapper-style、bar-style、action-style 和 content-style 属性可以自定义组件各部分的样式。
28
- </template>
29
- </Demo>
30
-
31
- ## API
32
-
33
- <ApiTable :data="sliderCaptchaApi" componentName="slider-captcha" />
34
-
35
- <script setup>
36
- import SliderCaptchaBasic from '../examples/slider-captcha/basic.vue'
37
- import SliderCaptchaCustom from '../examples/slider-captcha/custom.vue'
38
- import sliderCaptchaApi from './meta/slider-captcha'
39
- import sliderCaptchaBasicCode from '../examples/slider-captcha/basic.vue?raw'
40
- import sliderCaptchaCustomCode from '../examples/slider-captcha/custom.vue?raw'
41
- </script>
1
+ # SliderCaptcha 滑块验证
2
+
3
+ 通过拖动滑块进行人机验证。
4
+
5
+ ## 基础用法
6
+
7
+ 最简单的滑块验证码使用方式。
8
+
9
+ <Demo :source-code="sliderCaptchaBasicCode">
10
+ <template #source>
11
+ <slider-captcha-basic />
12
+ </template>
13
+ <template #description>
14
+ 使用 v-model 绑定验证状态,可以通过 text 和 success-text 自定义提示文字。
15
+ </template>
16
+ </Demo>
17
+
18
+ ## 自定义样式
19
+
20
+ 可以通过样式属性自定义滑块验证码的外观。
21
+
22
+ <Demo :source-code="sliderCaptchaCustomCode">
23
+ <template #source>
24
+ <slider-captcha-custom />
25
+ </template>
26
+ <template #description>
27
+ 通过 wrapper-style、bar-style、action-style 和 content-style 属性可以自定义组件各部分的样式。
28
+ </template>
29
+ </Demo>
30
+
31
+ ## API
32
+
33
+ <ApiTable :data="sliderCaptchaApi" componentName="slider-captcha" />
34
+
35
+ <script setup>
36
+ import SliderCaptchaBasic from '../examples/slider-captcha/basic.vue'
37
+ import SliderCaptchaCustom from '../examples/slider-captcha/custom.vue'
38
+ import sliderCaptchaApi from './meta/slider-captcha'
39
+ import sliderCaptchaBasicCode from '../examples/slider-captcha/basic.vue?raw'
40
+ import sliderCaptchaCustomCode from '../examples/slider-captcha/custom.vue?raw'
41
+ </script>
@@ -1,101 +1,101 @@
1
- # Slider 滑块
2
-
3
- 通过拖动滑块在一个固定区间内进行选择。
4
-
5
- ## 基础用法
6
-
7
- 在自定义间距内选择一个数值。
8
-
9
- <Demo :source-code="sliderBasicCode">
10
- <template #source>
11
- <slider-basic />
12
- </template>
13
- <template #description>
14
- 展示了基础用法、间断点、带有输入框以及范围选择。
15
- </template>
16
- </Demo>
17
-
18
- ## 禁用状态
19
-
20
- 通过设置 `readonly` 属性禁用滑块。
21
-
22
- <Demo :source-code="sliderDisabledCode">
23
- <template #source>
24
- <slider-disabled />
25
- </template>
26
- <template #description>
27
- 禁用状态下滑块不可拖动。
28
- </template>
29
- </Demo>
30
-
31
- ## 自定义提示
32
-
33
- 可以自定义提示信息的格式或隐藏提示。
34
-
35
- <Demo :source-code="sliderTooltipCode">
36
- <template #source>
37
- <slider-tooltip />
38
- </template>
39
- <template #description>
40
- 使用 `format-tooltip` 自定义提示内容,使用 `show-tooltip` 控制提示的显示。
41
- </template>
42
- </Demo>
43
-
44
- ## 垂直模式
45
-
46
- 设置 `vertical` 属性为 true 可以启用垂直模式。
47
-
48
- <Demo :source-code="sliderVerticalCode">
49
- <template #source>
50
- <slider-vertical />
51
- </template>
52
- <template #description>
53
- 垂直模式下必须设置高度 `height` 属性。
54
- </template>
55
- </Demo>
56
-
57
- ## 显示标记
58
-
59
- 使用 `marks` 属性标注关键节点。
60
-
61
- <Demo :source-code="sliderMarksCode">
62
- <template #source>
63
- <slider-marks />
64
- </template>
65
- <template #description>
66
- 通过 `marks` 对象可以在滑块上显示标记,key 为位置,value 为标记内容。
67
- </template>
68
- </Demo>
69
-
70
- ## 不同尺寸
71
-
72
- Slider 组件提供三种尺寸。
73
-
74
- <Demo :source-code="sliderSizeCode">
75
- <template #source>
76
- <slider-size />
77
- </template>
78
- <template #description>
79
- 通过 `size` 属性设置不同的尺寸:large、default、small。
80
- </template>
81
- </Demo>
82
-
83
- ## API
84
-
85
- <ApiTable :data="sliderApi" componentName="slider" />
86
-
87
- <script setup>
88
- import SliderBasic from '../examples/slider/basic.vue'
89
- import SliderDisabled from '../examples/slider/disabled.vue'
90
- import SliderTooltip from '../examples/slider/tooltip.vue'
91
- import SliderVertical from '../examples/slider/vertical.vue'
92
- import SliderMarks from '../examples/slider/marks.vue'
93
- import SliderSize from '../examples/slider/size.vue'
94
- import sliderApi from './meta/slider'
95
- import sliderBasicCode from '../examples/slider/basic.vue?raw'
96
- import sliderDisabledCode from '../examples/slider/disabled.vue?raw'
97
- import sliderTooltipCode from '../examples/slider/tooltip.vue?raw'
98
- import sliderVerticalCode from '../examples/slider/vertical.vue?raw'
99
- import sliderMarksCode from '../examples/slider/marks.vue?raw'
100
- import sliderSizeCode from '../examples/slider/size.vue?raw'
101
- </script>
1
+ # Slider 滑块
2
+
3
+ 通过拖动滑块在一个固定区间内进行选择。
4
+
5
+ ## 基础用法
6
+
7
+ 在自定义间距内选择一个数值。
8
+
9
+ <Demo :source-code="sliderBasicCode">
10
+ <template #source>
11
+ <slider-basic />
12
+ </template>
13
+ <template #description>
14
+ 展示了基础用法、间断点、带有输入框以及范围选择。
15
+ </template>
16
+ </Demo>
17
+
18
+ ## 禁用状态
19
+
20
+ 通过设置 `readonly` 属性禁用滑块。
21
+
22
+ <Demo :source-code="sliderDisabledCode">
23
+ <template #source>
24
+ <slider-disabled />
25
+ </template>
26
+ <template #description>
27
+ 禁用状态下滑块不可拖动。
28
+ </template>
29
+ </Demo>
30
+
31
+ ## 自定义提示
32
+
33
+ 可以自定义提示信息的格式或隐藏提示。
34
+
35
+ <Demo :source-code="sliderTooltipCode">
36
+ <template #source>
37
+ <slider-tooltip />
38
+ </template>
39
+ <template #description>
40
+ 使用 `format-tooltip` 自定义提示内容,使用 `show-tooltip` 控制提示的显示。
41
+ </template>
42
+ </Demo>
43
+
44
+ ## 垂直模式
45
+
46
+ 设置 `vertical` 属性为 true 可以启用垂直模式。
47
+
48
+ <Demo :source-code="sliderVerticalCode">
49
+ <template #source>
50
+ <slider-vertical />
51
+ </template>
52
+ <template #description>
53
+ 垂直模式下必须设置高度 `height` 属性。
54
+ </template>
55
+ </Demo>
56
+
57
+ ## 显示标记
58
+
59
+ 使用 `marks` 属性标注关键节点。
60
+
61
+ <Demo :source-code="sliderMarksCode">
62
+ <template #source>
63
+ <slider-marks />
64
+ </template>
65
+ <template #description>
66
+ 通过 `marks` 对象可以在滑块上显示标记,key 为位置,value 为标记内容。
67
+ </template>
68
+ </Demo>
69
+
70
+ ## 不同尺寸
71
+
72
+ Slider 组件提供三种尺寸。
73
+
74
+ <Demo :source-code="sliderSizeCode">
75
+ <template #source>
76
+ <slider-size />
77
+ </template>
78
+ <template #description>
79
+ 通过 `size` 属性设置不同的尺寸:large、default、small。
80
+ </template>
81
+ </Demo>
82
+
83
+ ## API
84
+
85
+ <ApiTable :data="sliderApi" componentName="slider" />
86
+
87
+ <script setup>
88
+ import SliderBasic from '../examples/slider/basic.vue'
89
+ import SliderDisabled from '../examples/slider/disabled.vue'
90
+ import SliderTooltip from '../examples/slider/tooltip.vue'
91
+ import SliderVertical from '../examples/slider/vertical.vue'
92
+ import SliderMarks from '../examples/slider/marks.vue'
93
+ import SliderSize from '../examples/slider/size.vue'
94
+ import sliderApi from './meta/slider'
95
+ import sliderBasicCode from '../examples/slider/basic.vue?raw'
96
+ import sliderDisabledCode from '../examples/slider/disabled.vue?raw'
97
+ import sliderTooltipCode from '../examples/slider/tooltip.vue?raw'
98
+ import sliderVerticalCode from '../examples/slider/vertical.vue?raw'
99
+ import sliderMarksCode from '../examples/slider/marks.vue?raw'
100
+ import sliderSizeCode from '../examples/slider/size.vue?raw'
101
+ </script>
@@ -1,90 +1,90 @@
1
- # Switch 开关
2
-
3
- 在两种状态之间切换。
4
-
5
- ## 基础用法
6
-
7
- 绑定 v-model 到一个 Boolean 类型的变量。
8
-
9
- <Demo :source-code="basicCode">
10
- <template #source>
11
- <basic />
12
- </template>
13
- <template #description>
14
- 最基本的用法。
15
- </template>
16
- </Demo>
17
-
18
- ## 尺寸
19
-
20
- 提供三种不同尺寸。
21
-
22
- <Demo :source-code="sizeCode">
23
- <template #source>
24
- <size />
25
- </template>
26
- <template #description>
27
- 通过 `size` 属性设置尺寸,可选值为 `large`、`default`、`small`。
28
- </template>
29
- </Demo>
30
-
31
- ## 文字描述
32
-
33
- 你可以添加 `active-text` 和 `inactive-text` 属性来显示文字描述。
34
-
35
- <Demo :source-code="textCode">
36
- <template #source>
37
- <text />
38
- </template>
39
- <template #description>
40
- 使用 `active-text` 和 `inactive-text` 属性来显示开关状态的文字描述。
41
- </template>
42
- </Demo>
43
-
44
- ## 禁用状态
45
-
46
- 设置 `disabled` 属性来禁用开关。
47
-
48
- <Demo :source-code="disabledCode">
49
- <template #source>
50
- <disabled />
51
- </template>
52
- <template #description>
53
- 使用 `disabled` 属性来设置开关为禁用状态。
54
- </template>
55
- </Demo>
56
-
57
- ## 加载状态
58
-
59
- 设置 `loading` 属性来显示加载状态。
60
-
61
- <Demo :source-code="loadingCode">
62
- <template #source>
63
- <loading />
64
- </template>
65
- <template #description>
66
- 使用 `loading` 属性来显示开关的加载状态。
67
- </template>
68
- </Demo>
69
-
70
- ## API
71
-
72
- ### 属性
73
-
74
- <ApiTable :data="switchApi" componentName="switch" />
75
-
76
- <script setup>
77
- import basicCode from '../examples/switch/basic.vue?raw'
78
- import sizeCode from '../examples/switch/size.vue?raw'
79
- import textCode from '../examples/switch/text.vue?raw'
80
- import disabledCode from '../examples/switch/disabled.vue?raw'
81
- import loadingCode from '../examples/switch/loading.vue?raw'
82
-
83
- import Basic from '../examples/switch/basic.vue'
84
- import Size from '../examples/switch/size.vue'
85
- import Text from '../examples/switch/text.vue'
86
- import Disabled from '../examples/switch/disabled.vue'
87
- import Loading from '../examples/switch/loading.vue'
88
-
89
- import switchApi from '../components/meta/switch'
90
- </script>
1
+ # Switch 开关
2
+
3
+ 在两种状态之间切换。
4
+
5
+ ## 基础用法
6
+
7
+ 绑定 v-model 到一个 Boolean 类型的变量。
8
+
9
+ <Demo :source-code="basicCode">
10
+ <template #source>
11
+ <basic />
12
+ </template>
13
+ <template #description>
14
+ 最基本的用法。
15
+ </template>
16
+ </Demo>
17
+
18
+ ## 尺寸
19
+
20
+ 提供三种不同尺寸。
21
+
22
+ <Demo :source-code="sizeCode">
23
+ <template #source>
24
+ <size />
25
+ </template>
26
+ <template #description>
27
+ 通过 `size` 属性设置尺寸,可选值为 `large`、`default`、`small`。
28
+ </template>
29
+ </Demo>
30
+
31
+ ## 文字描述
32
+
33
+ 你可以添加 `active-text` 和 `inactive-text` 属性来显示文字描述。
34
+
35
+ <Demo :source-code="textCode">
36
+ <template #source>
37
+ <text />
38
+ </template>
39
+ <template #description>
40
+ 使用 `active-text` 和 `inactive-text` 属性来显示开关状态的文字描述。
41
+ </template>
42
+ </Demo>
43
+
44
+ ## 禁用状态
45
+
46
+ 设置 `disabled` 属性来禁用开关。
47
+
48
+ <Demo :source-code="disabledCode">
49
+ <template #source>
50
+ <disabled />
51
+ </template>
52
+ <template #description>
53
+ 使用 `disabled` 属性来设置开关为禁用状态。
54
+ </template>
55
+ </Demo>
56
+
57
+ ## 加载状态
58
+
59
+ 设置 `loading` 属性来显示加载状态。
60
+
61
+ <Demo :source-code="loadingCode">
62
+ <template #source>
63
+ <loading />
64
+ </template>
65
+ <template #description>
66
+ 使用 `loading` 属性来显示开关的加载状态。
67
+ </template>
68
+ </Demo>
69
+
70
+ ## API
71
+
72
+ ### 属性
73
+
74
+ <ApiTable :data="switchApi" componentName="switch" />
75
+
76
+ <script setup>
77
+ import basicCode from '../examples/switch/basic.vue?raw'
78
+ import sizeCode from '../examples/switch/size.vue?raw'
79
+ import textCode from '../examples/switch/text.vue?raw'
80
+ import disabledCode from '../examples/switch/disabled.vue?raw'
81
+ import loadingCode from '../examples/switch/loading.vue?raw'
82
+
83
+ import Basic from '../examples/switch/basic.vue'
84
+ import Size from '../examples/switch/size.vue'
85
+ import Text from '../examples/switch/text.vue'
86
+ import Disabled from '../examples/switch/disabled.vue'
87
+ import Loading from '../examples/switch/loading.vue'
88
+
89
+ import switchApi from '../components/meta/switch'
90
+ </script>