@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.
- package/.cursor/skills/ui-component-helper/README.md +43 -43
- package/.cursor/skills/ui-component-helper/SKILL.md +81 -81
- package/LICENSE +53 -53
- package/README.md +156 -156
- package/dist/simcode-ui.es.js +370 -363
- package/dist/simcode-ui.umd.js +2 -2
- package/dist/stats.html +1 -1
- package/dist/ui.css +1 -1
- package/docs/components/autocomplete.md +89 -89
- package/docs/components/barcode.md +101 -101
- package/docs/components/button-select.md +24 -24
- package/docs/components/button.md +117 -117
- package/docs/components/buttons.md +119 -119
- package/docs/components/cascader-select.md +114 -114
- package/docs/components/checkbox.md +114 -114
- package/docs/components/code-mirror.md +85 -85
- package/docs/components/collapse.md +26 -26
- package/docs/components/comp.md +71 -71
- package/docs/components/count-up.md +24 -24
- package/docs/components/count.md +24 -24
- package/docs/components/data-panel.md +24 -24
- package/docs/components/date.md +76 -76
- package/docs/components/dialog-full.md +112 -112
- package/docs/components/dialog.md +127 -127
- package/docs/components/divider.md +24 -24
- package/docs/components/drawer.md +127 -127
- package/docs/components/dynamic-layer.md +118 -118
- package/docs/components/echarts.md +72 -72
- package/docs/components/editor.md +24 -24
- package/docs/components/form.md +27 -27
- package/docs/components/guid.md +39 -39
- package/docs/components/hpanel.md +24 -24
- package/docs/components/icon.md +56 -56
- package/docs/components/input-button.md +24 -24
- package/docs/components/input-code.md +24 -24
- package/docs/components/input-color.md +114 -114
- package/docs/components/input-layer.md +26 -26
- package/docs/components/input-rows.md +370 -370
- package/docs/components/input-tag.md +50 -50
- package/docs/components/input.md +129 -129
- package/docs/components/layer-form.md +61 -61
- package/docs/components/layer.md +127 -127
- package/docs/components/layout.md +132 -132
- package/docs/components/map.md +24 -24
- package/docs/components/menu.md +121 -121
- package/docs/components/meta/buttons.ts +56 -56
- package/docs/components/meta/date.ts +275 -275
- package/docs/components/meta/echarts.ts +64 -64
- package/docs/components/meta/form.ts +160 -160
- package/docs/components/meta/input-cards.ts +112 -112
- package/docs/components/meta/input-color.ts +243 -243
- package/docs/components/meta/input-rows.ts +113 -113
- package/docs/components/meta/layer-form.ts +56 -56
- package/docs/components/meta/map.ts +68 -68
- package/docs/components/meta/panel.ts +152 -152
- package/docs/components/meta/slider.ts +270 -270
- package/docs/components/meta/table.ts +363 -363
- package/docs/components/meta/tabs.ts +136 -136
- package/docs/components/meta/tree-select.ts +199 -199
- package/docs/components/meta/workflow-viewer.ts +55 -55
- package/docs/components/meta/workflow.ts +113 -113
- package/docs/components/number.md +124 -124
- package/docs/components/page.md +57 -57
- package/docs/components/panel.md +37 -37
- package/docs/components/radio.md +87 -87
- package/docs/components/rate.md +71 -71
- package/docs/components/select.md +133 -133
- package/docs/components/slider-captcha.md +41 -41
- package/docs/components/slider.md +101 -101
- package/docs/components/switch.md +90 -90
- package/docs/components/table-panel.md +218 -218
- package/docs/components/table.md +319 -319
- package/docs/components/tabs.md +26 -26
- package/docs/components/title.md +24 -24
- package/docs/components/tree.md +207 -207
- package/docs/components/upload.md +117 -117
- package/docs/components/workflow-viewer.md +21 -21
- package/docs/components/workflow.md +21 -21
- package/docs/examples/autocomplete/advanced.vue +35 -35
- package/docs/examples/autocomplete/basic.vue +32 -32
- package/docs/examples/autocomplete/clearable.vue +33 -33
- package/docs/examples/autocomplete/custom-template.vue +49 -49
- package/docs/examples/autocomplete/disabled.vue +33 -33
- package/docs/examples/autocomplete/icon.vue +37 -37
- package/docs/examples/barcode/all-types.vue +380 -380
- package/docs/examples/barcode/basic.vue +14 -14
- package/docs/examples/barcode/props-appearance.vue +243 -243
- package/docs/examples/barcode/props-geometry.vue +143 -143
- package/docs/examples/barcode/props-logic.vue +216 -216
- package/docs/examples/barcode/props-symbology.vue +199 -199
- package/docs/examples/barcode/props-text.vue +268 -268
- package/docs/examples/button/basic.vue +7 -7
- package/docs/examples/button/danger-ghost.vue +17 -17
- package/docs/examples/button/disabled.vue +10 -10
- package/docs/examples/button/loading.vue +6 -6
- package/docs/examples/button/shape.vue +7 -7
- package/docs/examples/button/size.vue +14 -14
- package/docs/examples/button/type.vue +9 -9
- package/docs/examples/button-select/basic.vue +19 -19
- package/docs/examples/buttons/basic.vue +45 -45
- package/docs/examples/buttons/disabled.vue +36 -36
- package/docs/examples/buttons/dropdown.vue +63 -63
- package/docs/examples/buttons/group.vue +52 -52
- package/docs/examples/buttons/link.vue +47 -47
- package/docs/examples/buttons/popup.vue +39 -39
- package/docs/examples/buttons/size.vue +45 -45
- package/docs/examples/cascader-select/basic.vue +28 -28
- package/docs/examples/cascader-select/clearable.vue +34 -34
- package/docs/examples/cascader-select/disabled.vue +43 -43
- package/docs/examples/cascader-select/filterable.vue +37 -37
- package/docs/examples/cascader-select/methods.vue +84 -84
- package/docs/examples/cascader-select/multiple.vue +38 -38
- package/docs/examples/cascader-select/slot.vue +45 -45
- package/docs/examples/checkbox/basic.vue +18 -18
- package/docs/examples/checkbox/button.vue +19 -19
- package/docs/examples/checkbox/color.vue +25 -25
- package/docs/examples/checkbox/disabled.vue +17 -17
- package/docs/examples/checkbox/min-max.vue +20 -20
- package/docs/examples/checkbox/mixed.vue +56 -56
- package/docs/examples/checkbox/size.vue +28 -28
- package/docs/examples/code-mirror/basic.vue +11 -11
- package/docs/examples/code-mirror/events.vue +42 -42
- package/docs/examples/code-mirror/height.vue +25 -25
- package/docs/examples/code-mirror/mode.vue +33 -33
- package/docs/examples/code-mirror/readonly.vue +14 -14
- package/docs/examples/collapse/basic.vue +82 -82
- package/docs/examples/comp/basic.vue +7 -7
- package/docs/examples/comp/collapse.vue +38 -38
- package/docs/examples/comp/tabs.vue +38 -38
- package/docs/examples/count/basic.vue +54 -54
- package/docs/examples/count-up/basic.vue +89 -89
- package/docs/examples/data-panel/basic.vue +110 -110
- package/docs/examples/date/basic.vue +73 -73
- package/docs/examples/date/default-value.vue +59 -59
- package/docs/examples/date/format.vue +75 -75
- package/docs/examples/date/range.vue +66 -66
- package/docs/examples/date/types.vue +79 -79
- package/docs/examples/dialog/basic.vue +36 -36
- package/docs/examples/dialog/custom-buttons.vue +44 -44
- package/docs/examples/dialog/fullscreen.vue +23 -23
- package/docs/examples/dialog/no-mask.vue +17 -17
- package/docs/examples/dialog/size.vue +44 -44
- package/docs/examples/dialog/steps.vue +57 -57
- package/docs/examples/dialog-full/basic.vue +29 -29
- package/docs/examples/dialog-full/custom-buttons.vue +45 -45
- package/docs/examples/dialog-full/no-buttons.vue +18 -18
- package/docs/examples/dialog-full/no-header.vue +27 -27
- package/docs/examples/dialog-full/steps.vue +71 -71
- package/docs/examples/divider/basic.vue +52 -52
- package/docs/examples/drawer/basic.vue +35 -35
- package/docs/examples/drawer/custom-buttons.vue +34 -34
- package/docs/examples/drawer/direction.vue +47 -47
- package/docs/examples/drawer/mask.vue +36 -36
- package/docs/examples/drawer/no-buttons.vue +20 -20
- package/docs/examples/drawer/size.vue +28 -28
- package/docs/examples/dynamic-layer/basic.vue +33 -33
- package/docs/examples/dynamic-layer/custom-buttons.vue +43 -43
- package/docs/examples/dynamic-layer/form.vue +73 -73
- package/docs/examples/dynamic-layer/steps.vue +52 -52
- package/docs/examples/dynamic-layer/types.vue +40 -40
- package/docs/examples/echarts/basic.vue +31 -31
- package/docs/examples/echarts/dynamic.vue +43 -43
- package/docs/examples/echarts/line.vue +46 -46
- package/docs/examples/echarts/pie.vue +44 -44
- package/docs/examples/editor/basic.vue +15 -15
- package/docs/examples/form/basic.vue +450 -450
- package/docs/examples/guid/basic.vue +10 -10
- package/docs/examples/guid/size.vue +13 -13
- package/docs/examples/hpanel/basic.vue +79 -79
- package/docs/examples/icon/basic.vue +9 -9
- package/docs/examples/icon/rotate-flip.vue +9 -9
- package/docs/examples/icon/size.vue +7 -7
- package/docs/examples/input/basic.vue +10 -10
- package/docs/examples/input/clearable.vue +12 -12
- package/docs/examples/input/disabled.vue +6 -6
- package/docs/examples/input/icon.vue +23 -23
- package/docs/examples/input/password.vue +18 -18
- package/docs/examples/input/size.vue +13 -13
- package/docs/examples/input/textarea.vue +25 -25
- package/docs/examples/input/word-limit.vue +28 -28
- package/docs/examples/input-button/basic.vue +33 -33
- package/docs/examples/input-code/basic.vue +29 -29
- package/docs/examples/input-color/basic.vue +10 -10
- package/docs/examples/input-color/disabled.vue +13 -13
- package/docs/examples/input-color/format.vue +17 -17
- package/docs/examples/input-color/no-alpha.vue +13 -13
- package/docs/examples/input-color/only-button.vue +15 -15
- package/docs/examples/input-color/predefine.vue +31 -31
- package/docs/examples/input-color/size.vue +15 -15
- package/docs/examples/input-layer/basic.vue +69 -69
- package/docs/examples/input-rows/basic.vue +73 -73
- package/docs/examples/input-rows/drag.vue +48 -48
- package/docs/examples/input-rows/layer-form.vue +85 -85
- package/docs/examples/input-rows/nested.vue +91 -91
- package/docs/examples/input-tag/basic.vue +27 -27
- package/docs/examples/input-tag/colors.vue +23 -23
- package/docs/examples/input-tag/readonly.vue +17 -17
- package/docs/examples/layer/basic.vue +43 -43
- package/docs/examples/layer/custom-buttons.vue +61 -61
- package/docs/examples/layer/drawer.vue +37 -37
- package/docs/examples/layer/full.vue +38 -38
- package/docs/examples/layer/modal.vue +34 -34
- package/docs/examples/layer/steps.vue +46 -46
- package/docs/examples/layer-form/basic.vue +76 -76
- package/docs/examples/layer-form/config.vue +82 -82
- package/docs/examples/layer-form/size.vue +72 -72
- package/docs/examples/layout/basic.vue +36 -36
- package/docs/examples/layout/custom-size.vue +50 -50
- package/docs/examples/layout/disable-move.vue +37 -37
- package/docs/examples/layout/hide-mid-when-narrow.vue +96 -96
- package/docs/examples/layout/min-size.vue +73 -73
- package/docs/examples/layout/percent-size.vue +80 -80
- package/docs/examples/layout/simple.vue +22 -22
- package/docs/examples/layout/top-side.vue +34 -34
- package/docs/examples/map/basic.vue +22 -22
- package/docs/examples/menu/basic.vue +58 -58
- package/docs/examples/menu/collapsed.vue +49 -49
- package/docs/examples/menu/horizontal.vue +44 -44
- package/docs/examples/menu/selection-test.vue +104 -104
- package/docs/examples/menu/theme.vue +46 -46
- package/docs/examples/menu/vertical.vue +46 -46
- package/docs/examples/number/advanced.vue +143 -143
- package/docs/examples/number/basic.vue +63 -63
- package/docs/examples/number/disabled.vue +49 -49
- package/docs/examples/number/size.vue +42 -42
- package/docs/examples/number/slots.vue +123 -123
- package/docs/examples/number/step-strictly.vue +41 -41
- package/docs/examples/number/step.vue +47 -47
- package/docs/examples/page/basic.vue +41 -41
- package/docs/examples/page/init.vue +87 -87
- package/docs/examples/page/log.vue +453 -439
- package/docs/examples/panel/tool-buttons.vue +18 -18
- package/docs/examples/radio/basic.vue +17 -17
- package/docs/examples/radio/button.vue +17 -17
- package/docs/examples/radio/color.vue +18 -18
- package/docs/examples/radio/disabled.vue +17 -17
- package/docs/examples/radio/size.vue +29 -29
- package/docs/examples/rate/basic.vue +24 -24
- package/docs/examples/rate/half.vue +24 -24
- package/docs/examples/rate/readonly.vue +11 -11
- package/docs/examples/rate/text.vue +32 -32
- package/docs/examples/select/basic.vue +16 -16
- package/docs/examples/select/clearable.vue +22 -22
- package/docs/examples/select/disabled.vue +31 -31
- package/docs/examples/select/filterable.vue +24 -24
- package/docs/examples/select/group.vue +23 -23
- package/docs/examples/select/icon.vue +16 -16
- package/docs/examples/select/multiple.vue +18 -18
- package/docs/examples/select/size.vue +39 -39
- package/docs/examples/slider/basic.vue +42 -42
- package/docs/examples/slider/disabled.vue +17 -17
- package/docs/examples/slider/marks.vue +30 -30
- package/docs/examples/slider/size.vue +37 -37
- package/docs/examples/slider/tooltip.vue +36 -36
- package/docs/examples/slider/vertical.vue +26 -26
- package/docs/examples/slider-captcha/basic.vue +44 -44
- package/docs/examples/slider-captcha/custom.vue +48 -48
- package/docs/examples/switch/basic.vue +16 -16
- package/docs/examples/switch/disabled.vue +13 -13
- package/docs/examples/switch/loading.vue +13 -13
- package/docs/examples/switch/size.vue +15 -15
- package/docs/examples/switch/text.vue +13 -13
- package/docs/examples/table/actions.vue +116 -116
- package/docs/examples/table/add-row.vue +103 -103
- package/docs/examples/table/basic.vue +168 -168
- package/docs/examples/table/custom-layout.vue +115 -115
- package/docs/examples/table/editable.vue +263 -263
- package/docs/examples/table/field-selection.vue +87 -87
- package/docs/examples/table/frozen-column.vue +140 -140
- package/docs/examples/table/height-mode.vue +99 -99
- package/docs/examples/table/icon.vue +85 -85
- package/docs/examples/table/link.vue +66 -66
- package/docs/examples/table/multiple.vue +178 -178
- package/docs/examples/table/pagination.vue +151 -151
- package/docs/examples/table/single-selection.vue +64 -64
- package/docs/examples/table/sub-table-lazy.vue +97 -97
- package/docs/examples/table/sub-table.vue +103 -103
- package/docs/examples/table/tag.vue +43 -43
- package/docs/examples/table/tree-column.vue +119 -119
- package/docs/examples/table/tree-data.vue +141 -141
- package/docs/examples/table/tree-lazy.vue +80 -80
- package/docs/examples/table-panel/basic.vue +228 -228
- package/docs/examples/table-panel/batch-operations.vue +285 -285
- package/docs/examples/table-panel/filter.vue +219 -219
- package/docs/examples/table-panel/multiple-selection.vue +243 -243
- package/docs/examples/table-panel/pagination.vue +133 -133
- package/docs/examples/table-panel/sub-table-lazy.vue +118 -118
- package/docs/examples/tabs/basic.vue +98 -98
- package/docs/examples/title/basic.vue +80 -80
- package/docs/examples/tree/accordion.vue +46 -46
- package/docs/examples/tree/basic.vue +50 -50
- package/docs/examples/tree/buttons.vue +53 -53
- package/docs/examples/tree/checkable.vue +52 -52
- package/docs/examples/tree/custom-keys.vue +39 -39
- package/docs/examples/tree/default-expanded.vue +52 -52
- package/docs/examples/tree/draggable.vue +29 -29
- package/docs/examples/tree/expand-on-click.vue +39 -39
- package/docs/examples/tree/flat-data.vue +20 -20
- package/docs/examples/tree/icon.vue +40 -40
- package/docs/examples/tree/load-data.vue +37 -37
- package/docs/examples/tree/methods.vue +74 -74
- package/docs/examples/tree/theme.vue +33 -33
- package/docs/examples/upload/accept.vue +31 -31
- package/docs/examples/upload/basic.vue +12 -12
- package/docs/examples/upload/drag.vue +11 -11
- package/docs/examples/upload/image.vue +17 -17
- package/docs/examples/upload/limit.vue +20 -20
- package/docs/examples/upload/multiple.vue +17 -17
- package/docs/examples/upload/readonly.vue +17 -17
- package/docs/examples/utils/cipher.vue +160 -160
- package/docs/examples/utils/common.vue +153 -153
- package/docs/examples/utils/date.vue +56 -56
- package/docs/examples/utils/dom.vue +52 -52
- package/docs/examples/utils/is.vue +70 -70
- package/docs/examples/workflow/basic.vue +265 -265
- package/docs/examples/workflow-viewer/basic.vue +248 -248
- package/package.json +23 -23
package/docs/components/icon.md
CHANGED
|
@@ -1,56 +1,56 @@
|
|
|
1
|
-
# Icon 图标
|
|
2
|
-
|
|
3
|
-
语义化的矢量图形。使用了 [@iconify/vue](https://iconify.design/docs/icon-components/vue/)。
|
|
4
|
-
|
|
5
|
-
## 基础用法
|
|
6
|
-
|
|
7
|
-
通过 `icon` 属性来指定图标名称。你可以从 [Iconify](https://icon-sets.iconify.design/) 搜索成千上万个图标。
|
|
8
|
-
|
|
9
|
-
<Demo :source-code="iconBasicCode">
|
|
10
|
-
<template #source>
|
|
11
|
-
<icon-basic />
|
|
12
|
-
</template>
|
|
13
|
-
<template #description>
|
|
14
|
-
使用 icon、color 来定义图标和颜色。
|
|
15
|
-
</template>
|
|
16
|
-
</Demo>
|
|
17
|
-
|
|
18
|
-
## 不同尺寸
|
|
19
|
-
|
|
20
|
-
使用 `size` 属性来配置图标尺寸。
|
|
21
|
-
|
|
22
|
-
<Demo :source-code="iconSizeCode">
|
|
23
|
-
<template #source>
|
|
24
|
-
<icon-size />
|
|
25
|
-
</template>
|
|
26
|
-
<template #description>
|
|
27
|
-
size 接受数字(单位为px)。
|
|
28
|
-
</template>
|
|
29
|
-
</Demo>
|
|
30
|
-
|
|
31
|
-
## 旋转与翻转
|
|
32
|
-
|
|
33
|
-
使用 `rotate` 和 `flip` 属性来调整图标方向。
|
|
34
|
-
|
|
35
|
-
<Demo :source-code="iconRotateFlipCode">
|
|
36
|
-
<template #source>
|
|
37
|
-
<icon-rotate-flip />
|
|
38
|
-
</template>
|
|
39
|
-
<template #description>
|
|
40
|
-
使用 rotate 定义角度,使用 flip 定义翻转方向。
|
|
41
|
-
</template>
|
|
42
|
-
</Demo>
|
|
43
|
-
|
|
44
|
-
## API
|
|
45
|
-
|
|
46
|
-
<ApiTable :data="iconApi" componentName="icon" />
|
|
47
|
-
|
|
48
|
-
<script setup>
|
|
49
|
-
import IconBasic from '../examples/icon/basic.vue'
|
|
50
|
-
import IconSize from '../examples/icon/size.vue'
|
|
51
|
-
import IconRotateFlip from '../examples/icon/rotate-flip.vue'
|
|
52
|
-
import iconApi from './meta/icon'
|
|
53
|
-
import iconBasicCode from '../examples/icon/basic.vue?raw'
|
|
54
|
-
import iconSizeCode from '../examples/icon/size.vue?raw'
|
|
55
|
-
import iconRotateFlipCode from '../examples/icon/rotate-flip.vue?raw'
|
|
56
|
-
</script>
|
|
1
|
+
# Icon 图标
|
|
2
|
+
|
|
3
|
+
语义化的矢量图形。使用了 [@iconify/vue](https://iconify.design/docs/icon-components/vue/)。
|
|
4
|
+
|
|
5
|
+
## 基础用法
|
|
6
|
+
|
|
7
|
+
通过 `icon` 属性来指定图标名称。你可以从 [Iconify](https://icon-sets.iconify.design/) 搜索成千上万个图标。
|
|
8
|
+
|
|
9
|
+
<Demo :source-code="iconBasicCode">
|
|
10
|
+
<template #source>
|
|
11
|
+
<icon-basic />
|
|
12
|
+
</template>
|
|
13
|
+
<template #description>
|
|
14
|
+
使用 icon、color 来定义图标和颜色。
|
|
15
|
+
</template>
|
|
16
|
+
</Demo>
|
|
17
|
+
|
|
18
|
+
## 不同尺寸
|
|
19
|
+
|
|
20
|
+
使用 `size` 属性来配置图标尺寸。
|
|
21
|
+
|
|
22
|
+
<Demo :source-code="iconSizeCode">
|
|
23
|
+
<template #source>
|
|
24
|
+
<icon-size />
|
|
25
|
+
</template>
|
|
26
|
+
<template #description>
|
|
27
|
+
size 接受数字(单位为px)。
|
|
28
|
+
</template>
|
|
29
|
+
</Demo>
|
|
30
|
+
|
|
31
|
+
## 旋转与翻转
|
|
32
|
+
|
|
33
|
+
使用 `rotate` 和 `flip` 属性来调整图标方向。
|
|
34
|
+
|
|
35
|
+
<Demo :source-code="iconRotateFlipCode">
|
|
36
|
+
<template #source>
|
|
37
|
+
<icon-rotate-flip />
|
|
38
|
+
</template>
|
|
39
|
+
<template #description>
|
|
40
|
+
使用 rotate 定义角度,使用 flip 定义翻转方向。
|
|
41
|
+
</template>
|
|
42
|
+
</Demo>
|
|
43
|
+
|
|
44
|
+
## API
|
|
45
|
+
|
|
46
|
+
<ApiTable :data="iconApi" componentName="icon" />
|
|
47
|
+
|
|
48
|
+
<script setup>
|
|
49
|
+
import IconBasic from '../examples/icon/basic.vue'
|
|
50
|
+
import IconSize from '../examples/icon/size.vue'
|
|
51
|
+
import IconRotateFlip from '../examples/icon/rotate-flip.vue'
|
|
52
|
+
import iconApi from './meta/icon'
|
|
53
|
+
import iconBasicCode from '../examples/icon/basic.vue?raw'
|
|
54
|
+
import iconSizeCode from '../examples/icon/size.vue?raw'
|
|
55
|
+
import iconRotateFlipCode from '../examples/icon/rotate-flip.vue?raw'
|
|
56
|
+
</script>
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
# InputButton 输入按钮
|
|
2
|
-
|
|
3
|
-
通过点击按钮打开一个弹窗层,用于输入或选择复杂的数据。
|
|
4
|
-
|
|
5
|
-
## 基础用法
|
|
6
|
-
|
|
7
|
-
<Demo :source-code="inputButtonBasicCode">
|
|
8
|
-
<template #source>
|
|
9
|
-
<input-button-basic />
|
|
10
|
-
</template>
|
|
11
|
-
<template #description>
|
|
12
|
-
点击按钮打开弹窗,在弹窗中完成输入后点击确定。
|
|
13
|
-
</template>
|
|
14
|
-
</Demo>
|
|
15
|
-
|
|
16
|
-
## API
|
|
17
|
-
|
|
18
|
-
<ApiTable :data="inputButtonApi" componentName="input-button" />
|
|
19
|
-
|
|
20
|
-
<script setup>
|
|
21
|
-
import InputButtonBasic from '../examples/input-button/basic.vue'
|
|
22
|
-
import inputButtonApi from './meta/input-button'
|
|
23
|
-
import inputButtonBasicCode from '../examples/input-button/basic.vue?raw'
|
|
24
|
-
</script>
|
|
1
|
+
# InputButton 输入按钮
|
|
2
|
+
|
|
3
|
+
通过点击按钮打开一个弹窗层,用于输入或选择复杂的数据。
|
|
4
|
+
|
|
5
|
+
## 基础用法
|
|
6
|
+
|
|
7
|
+
<Demo :source-code="inputButtonBasicCode">
|
|
8
|
+
<template #source>
|
|
9
|
+
<input-button-basic />
|
|
10
|
+
</template>
|
|
11
|
+
<template #description>
|
|
12
|
+
点击按钮打开弹窗,在弹窗中完成输入后点击确定。
|
|
13
|
+
</template>
|
|
14
|
+
</Demo>
|
|
15
|
+
|
|
16
|
+
## API
|
|
17
|
+
|
|
18
|
+
<ApiTable :data="inputButtonApi" componentName="input-button" />
|
|
19
|
+
|
|
20
|
+
<script setup>
|
|
21
|
+
import InputButtonBasic from '../examples/input-button/basic.vue'
|
|
22
|
+
import inputButtonApi from './meta/input-button'
|
|
23
|
+
import inputButtonBasicCode from '../examples/input-button/basic.vue?raw'
|
|
24
|
+
</script>
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
# InputCode 脚本输入框
|
|
2
|
-
|
|
3
|
-
通过点击按钮打开一个集成了脚本编辑器的弹窗,用于编写代码或脚本内容。
|
|
4
|
-
|
|
5
|
-
## 基础用法
|
|
6
|
-
|
|
7
|
-
<Demo :source-code="inputCodeBasicCode">
|
|
8
|
-
<template #source>
|
|
9
|
-
<input-code-basic />
|
|
10
|
-
</template>
|
|
11
|
-
<template #description>
|
|
12
|
-
点击按钮打开代码编辑器,支持多种语言模式和示例代码对比。
|
|
13
|
-
</template>
|
|
14
|
-
</Demo>
|
|
15
|
-
|
|
16
|
-
## API
|
|
17
|
-
|
|
18
|
-
<ApiTable :data="inputCodeApi" componentName="input-code" />
|
|
19
|
-
|
|
20
|
-
<script setup>
|
|
21
|
-
import InputCodeBasic from '../examples/input-code/basic.vue'
|
|
22
|
-
import inputCodeApi from './meta/input-code'
|
|
23
|
-
import inputCodeBasicCode from '../examples/input-code/basic.vue?raw'
|
|
24
|
-
</script>
|
|
1
|
+
# InputCode 脚本输入框
|
|
2
|
+
|
|
3
|
+
通过点击按钮打开一个集成了脚本编辑器的弹窗,用于编写代码或脚本内容。
|
|
4
|
+
|
|
5
|
+
## 基础用法
|
|
6
|
+
|
|
7
|
+
<Demo :source-code="inputCodeBasicCode">
|
|
8
|
+
<template #source>
|
|
9
|
+
<input-code-basic />
|
|
10
|
+
</template>
|
|
11
|
+
<template #description>
|
|
12
|
+
点击按钮打开代码编辑器,支持多种语言模式和示例代码对比。
|
|
13
|
+
</template>
|
|
14
|
+
</Demo>
|
|
15
|
+
|
|
16
|
+
## API
|
|
17
|
+
|
|
18
|
+
<ApiTable :data="inputCodeApi" componentName="input-code" />
|
|
19
|
+
|
|
20
|
+
<script setup>
|
|
21
|
+
import InputCodeBasic from '../examples/input-code/basic.vue'
|
|
22
|
+
import inputCodeApi from './meta/input-code'
|
|
23
|
+
import inputCodeBasicCode from '../examples/input-code/basic.vue?raw'
|
|
24
|
+
</script>
|
|
@@ -1,114 +1,114 @@
|
|
|
1
|
-
# InputColor 颜色选择器
|
|
2
|
-
|
|
3
|
-
用于颜色选择,支持多种颜色格式。
|
|
4
|
-
|
|
5
|
-
## 基础用法
|
|
6
|
-
|
|
7
|
-
<Demo :source-code="inputColorBasicCode">
|
|
8
|
-
<template #source>
|
|
9
|
-
<input-color-basic />
|
|
10
|
-
</template>
|
|
11
|
-
<template #description>
|
|
12
|
-
使用 v-model 实现双向数据绑定。
|
|
13
|
-
</template>
|
|
14
|
-
</Demo>
|
|
15
|
-
|
|
16
|
-
## 不同尺寸
|
|
17
|
-
|
|
18
|
-
InputColor 组件提供三种尺寸。
|
|
19
|
-
|
|
20
|
-
<Demo :source-code="inputColorSizeCode">
|
|
21
|
-
<template #source>
|
|
22
|
-
<input-color-size />
|
|
23
|
-
</template>
|
|
24
|
-
<template #description>
|
|
25
|
-
使用 size 属性改变输入框大小。除了默认大小外,还有另外两个选项: large, small。
|
|
26
|
-
</template>
|
|
27
|
-
</Demo>
|
|
28
|
-
|
|
29
|
-
## 禁用和只读
|
|
30
|
-
|
|
31
|
-
通过 `disabled` 和 `readonly` 属性指定输入框的状态。
|
|
32
|
-
|
|
33
|
-
<Demo :source-code="inputColorDisabledCode">
|
|
34
|
-
<template #source>
|
|
35
|
-
<input-color-disabled />
|
|
36
|
-
</template>
|
|
37
|
-
<template #description>
|
|
38
|
-
通过 disabled 属性指定是否禁用 input-color 组件,通过 readonly 属性指定是否只读。
|
|
39
|
-
</template>
|
|
40
|
-
</Demo>
|
|
41
|
-
|
|
42
|
-
## 仅显示按钮
|
|
43
|
-
|
|
44
|
-
使用 `only-button` 属性可以只显示颜色选择器按钮,隐藏输入框。
|
|
45
|
-
|
|
46
|
-
<Demo :source-code="inputColorOnlyButtonCode">
|
|
47
|
-
<template #source>
|
|
48
|
-
<input-color-only-button />
|
|
49
|
-
</template>
|
|
50
|
-
<template #description>
|
|
51
|
-
设置 `only-button` 属性为 `true` 即可只显示颜色选择器按钮。
|
|
52
|
-
</template>
|
|
53
|
-
</Demo>
|
|
54
|
-
|
|
55
|
-
## 预定义颜色
|
|
56
|
-
|
|
57
|
-
使用 `predefine-colors` 属性可以设置预定义的颜色选项。
|
|
58
|
-
|
|
59
|
-
<Demo :source-code="inputColorPredefineCode">
|
|
60
|
-
<template #source>
|
|
61
|
-
<input-color-predefine />
|
|
62
|
-
</template>
|
|
63
|
-
<template #description>
|
|
64
|
-
通过 `predefine-colors` 属性设置预定义的颜色数组,支持多种颜色格式。
|
|
65
|
-
</template>
|
|
66
|
-
</Demo>
|
|
67
|
-
|
|
68
|
-
## 透明度支持
|
|
69
|
-
|
|
70
|
-
使用 `show-alpha` 属性控制是否支持透明度选择。
|
|
71
|
-
|
|
72
|
-
<Demo :source-code="inputColorNoAlphaCode">
|
|
73
|
-
<template #source>
|
|
74
|
-
<input-color-no-alpha />
|
|
75
|
-
</template>
|
|
76
|
-
<template #description>
|
|
77
|
-
设置 `show-alpha` 属性为 `true` 或 `false` 来控制是否支持透明度选择。
|
|
78
|
-
</template>
|
|
79
|
-
</Demo>
|
|
80
|
-
|
|
81
|
-
## 颜色格式
|
|
82
|
-
|
|
83
|
-
使用 `color-format` 属性可以设置写入 v-model 的颜色的格式。
|
|
84
|
-
|
|
85
|
-
<Demo :source-code="inputColorFormatCode">
|
|
86
|
-
<template #source>
|
|
87
|
-
<input-color-format />
|
|
88
|
-
</template>
|
|
89
|
-
<template #description>
|
|
90
|
-
通过 `color-format` 属性设置颜色格式,支持 hex、rgb、hsl、hsv 四种格式。
|
|
91
|
-
</template>
|
|
92
|
-
</Demo>
|
|
93
|
-
|
|
94
|
-
## API
|
|
95
|
-
|
|
96
|
-
<ApiTable :data="inputColorApi" componentName="input-color" />
|
|
97
|
-
|
|
98
|
-
<script setup>
|
|
99
|
-
import InputColorBasic from '../examples/input-color/basic.vue'
|
|
100
|
-
import InputColorSize from '../examples/input-color/size.vue'
|
|
101
|
-
import InputColorDisabled from '../examples/input-color/disabled.vue'
|
|
102
|
-
import InputColorOnlyButton from '../examples/input-color/only-button.vue'
|
|
103
|
-
import InputColorPredefine from '../examples/input-color/predefine.vue'
|
|
104
|
-
import InputColorNoAlpha from '../examples/input-color/no-alpha.vue'
|
|
105
|
-
import InputColorFormat from '../examples/input-color/format.vue'
|
|
106
|
-
import inputColorApi from './meta/input-color'
|
|
107
|
-
import inputColorBasicCode from '../examples/input-color/basic.vue?raw'
|
|
108
|
-
import inputColorSizeCode from '../examples/input-color/size.vue?raw'
|
|
109
|
-
import inputColorDisabledCode from '../examples/input-color/disabled.vue?raw'
|
|
110
|
-
import inputColorOnlyButtonCode from '../examples/input-color/only-button.vue?raw'
|
|
111
|
-
import inputColorPredefineCode from '../examples/input-color/predefine.vue?raw'
|
|
112
|
-
import inputColorNoAlphaCode from '../examples/input-color/no-alpha.vue?raw'
|
|
113
|
-
import inputColorFormatCode from '../examples/input-color/format.vue?raw'
|
|
114
|
-
</script>
|
|
1
|
+
# InputColor 颜色选择器
|
|
2
|
+
|
|
3
|
+
用于颜色选择,支持多种颜色格式。
|
|
4
|
+
|
|
5
|
+
## 基础用法
|
|
6
|
+
|
|
7
|
+
<Demo :source-code="inputColorBasicCode">
|
|
8
|
+
<template #source>
|
|
9
|
+
<input-color-basic />
|
|
10
|
+
</template>
|
|
11
|
+
<template #description>
|
|
12
|
+
使用 v-model 实现双向数据绑定。
|
|
13
|
+
</template>
|
|
14
|
+
</Demo>
|
|
15
|
+
|
|
16
|
+
## 不同尺寸
|
|
17
|
+
|
|
18
|
+
InputColor 组件提供三种尺寸。
|
|
19
|
+
|
|
20
|
+
<Demo :source-code="inputColorSizeCode">
|
|
21
|
+
<template #source>
|
|
22
|
+
<input-color-size />
|
|
23
|
+
</template>
|
|
24
|
+
<template #description>
|
|
25
|
+
使用 size 属性改变输入框大小。除了默认大小外,还有另外两个选项: large, small。
|
|
26
|
+
</template>
|
|
27
|
+
</Demo>
|
|
28
|
+
|
|
29
|
+
## 禁用和只读
|
|
30
|
+
|
|
31
|
+
通过 `disabled` 和 `readonly` 属性指定输入框的状态。
|
|
32
|
+
|
|
33
|
+
<Demo :source-code="inputColorDisabledCode">
|
|
34
|
+
<template #source>
|
|
35
|
+
<input-color-disabled />
|
|
36
|
+
</template>
|
|
37
|
+
<template #description>
|
|
38
|
+
通过 disabled 属性指定是否禁用 input-color 组件,通过 readonly 属性指定是否只读。
|
|
39
|
+
</template>
|
|
40
|
+
</Demo>
|
|
41
|
+
|
|
42
|
+
## 仅显示按钮
|
|
43
|
+
|
|
44
|
+
使用 `only-button` 属性可以只显示颜色选择器按钮,隐藏输入框。
|
|
45
|
+
|
|
46
|
+
<Demo :source-code="inputColorOnlyButtonCode">
|
|
47
|
+
<template #source>
|
|
48
|
+
<input-color-only-button />
|
|
49
|
+
</template>
|
|
50
|
+
<template #description>
|
|
51
|
+
设置 `only-button` 属性为 `true` 即可只显示颜色选择器按钮。
|
|
52
|
+
</template>
|
|
53
|
+
</Demo>
|
|
54
|
+
|
|
55
|
+
## 预定义颜色
|
|
56
|
+
|
|
57
|
+
使用 `predefine-colors` 属性可以设置预定义的颜色选项。
|
|
58
|
+
|
|
59
|
+
<Demo :source-code="inputColorPredefineCode">
|
|
60
|
+
<template #source>
|
|
61
|
+
<input-color-predefine />
|
|
62
|
+
</template>
|
|
63
|
+
<template #description>
|
|
64
|
+
通过 `predefine-colors` 属性设置预定义的颜色数组,支持多种颜色格式。
|
|
65
|
+
</template>
|
|
66
|
+
</Demo>
|
|
67
|
+
|
|
68
|
+
## 透明度支持
|
|
69
|
+
|
|
70
|
+
使用 `show-alpha` 属性控制是否支持透明度选择。
|
|
71
|
+
|
|
72
|
+
<Demo :source-code="inputColorNoAlphaCode">
|
|
73
|
+
<template #source>
|
|
74
|
+
<input-color-no-alpha />
|
|
75
|
+
</template>
|
|
76
|
+
<template #description>
|
|
77
|
+
设置 `show-alpha` 属性为 `true` 或 `false` 来控制是否支持透明度选择。
|
|
78
|
+
</template>
|
|
79
|
+
</Demo>
|
|
80
|
+
|
|
81
|
+
## 颜色格式
|
|
82
|
+
|
|
83
|
+
使用 `color-format` 属性可以设置写入 v-model 的颜色的格式。
|
|
84
|
+
|
|
85
|
+
<Demo :source-code="inputColorFormatCode">
|
|
86
|
+
<template #source>
|
|
87
|
+
<input-color-format />
|
|
88
|
+
</template>
|
|
89
|
+
<template #description>
|
|
90
|
+
通过 `color-format` 属性设置颜色格式,支持 hex、rgb、hsl、hsv 四种格式。
|
|
91
|
+
</template>
|
|
92
|
+
</Demo>
|
|
93
|
+
|
|
94
|
+
## API
|
|
95
|
+
|
|
96
|
+
<ApiTable :data="inputColorApi" componentName="input-color" />
|
|
97
|
+
|
|
98
|
+
<script setup>
|
|
99
|
+
import InputColorBasic from '../examples/input-color/basic.vue'
|
|
100
|
+
import InputColorSize from '../examples/input-color/size.vue'
|
|
101
|
+
import InputColorDisabled from '../examples/input-color/disabled.vue'
|
|
102
|
+
import InputColorOnlyButton from '../examples/input-color/only-button.vue'
|
|
103
|
+
import InputColorPredefine from '../examples/input-color/predefine.vue'
|
|
104
|
+
import InputColorNoAlpha from '../examples/input-color/no-alpha.vue'
|
|
105
|
+
import InputColorFormat from '../examples/input-color/format.vue'
|
|
106
|
+
import inputColorApi from './meta/input-color'
|
|
107
|
+
import inputColorBasicCode from '../examples/input-color/basic.vue?raw'
|
|
108
|
+
import inputColorSizeCode from '../examples/input-color/size.vue?raw'
|
|
109
|
+
import inputColorDisabledCode from '../examples/input-color/disabled.vue?raw'
|
|
110
|
+
import inputColorOnlyButtonCode from '../examples/input-color/only-button.vue?raw'
|
|
111
|
+
import inputColorPredefineCode from '../examples/input-color/predefine.vue?raw'
|
|
112
|
+
import inputColorNoAlphaCode from '../examples/input-color/no-alpha.vue?raw'
|
|
113
|
+
import inputColorFormatCode from '../examples/input-color/format.vue?raw'
|
|
114
|
+
</script>
|
|
@@ -1,26 +1,26 @@
|
|
|
1
|
-
# InputLayer 弹窗选择
|
|
2
|
-
|
|
3
|
-
带有弹窗选择功能的输入框组件。
|
|
4
|
-
|
|
5
|
-
## 基础用法
|
|
6
|
-
|
|
7
|
-
基础的弹窗选择用法。
|
|
8
|
-
|
|
9
|
-
<Demo :source-code="inputLayerBasicCode">
|
|
10
|
-
<template #source>
|
|
11
|
-
<input-layer-basic />
|
|
12
|
-
</template>
|
|
13
|
-
<template #description>
|
|
14
|
-
使用 `load-layer-data` 属性配置数据加载方法,`columns` 配置表格列。
|
|
15
|
-
</template>
|
|
16
|
-
</Demo>
|
|
17
|
-
|
|
18
|
-
## API
|
|
19
|
-
|
|
20
|
-
<ApiTable :data="inputLayerApi" componentName="input-layer" />
|
|
21
|
-
|
|
22
|
-
<script setup>
|
|
23
|
-
import InputLayerBasic from '../examples/input-layer/basic.vue'
|
|
24
|
-
import inputLayerBasicCode from '../examples/input-layer/basic.vue?raw'
|
|
25
|
-
import inputLayerApi from './meta/input-layer'
|
|
26
|
-
</script>
|
|
1
|
+
# InputLayer 弹窗选择
|
|
2
|
+
|
|
3
|
+
带有弹窗选择功能的输入框组件。
|
|
4
|
+
|
|
5
|
+
## 基础用法
|
|
6
|
+
|
|
7
|
+
基础的弹窗选择用法。
|
|
8
|
+
|
|
9
|
+
<Demo :source-code="inputLayerBasicCode">
|
|
10
|
+
<template #source>
|
|
11
|
+
<input-layer-basic />
|
|
12
|
+
</template>
|
|
13
|
+
<template #description>
|
|
14
|
+
使用 `load-layer-data` 属性配置数据加载方法,`columns` 配置表格列。
|
|
15
|
+
</template>
|
|
16
|
+
</Demo>
|
|
17
|
+
|
|
18
|
+
## API
|
|
19
|
+
|
|
20
|
+
<ApiTable :data="inputLayerApi" componentName="input-layer" />
|
|
21
|
+
|
|
22
|
+
<script setup>
|
|
23
|
+
import InputLayerBasic from '../examples/input-layer/basic.vue'
|
|
24
|
+
import inputLayerBasicCode from '../examples/input-layer/basic.vue?raw'
|
|
25
|
+
import inputLayerApi from './meta/input-layer'
|
|
26
|
+
</script>
|