@a2simcode/ui 0.0.55 → 0.0.56
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/components/index.d.ts +2 -1
- package/dist/components/input-cards/index.d.ts +189 -0
- package/dist/components/input-cards/src/input-cards.vue.d.ts +142 -0
- package/dist/components/input-cards/src/interface.d.ts +29 -0
- package/dist/components/table/src/interface.d.ts +4 -0
- package/dist/simcode-ui.es.js +3523 -3304
- 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/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-cards.md +27 -0
- 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/comp.ts +224 -224
- package/docs/components/meta/dynamic-layer.ts +99 -99
- package/docs/components/meta/echarts.ts +64 -64
- package/docs/components/meta/form-item.ts +50 -50
- package/docs/components/meta/form.ts +160 -160
- package/docs/components/meta/guid.ts +42 -42
- package/docs/components/meta/input-cards.ts +112 -0
- 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/number.ts +296 -296
- package/docs/components/meta/page.ts +67 -67
- package/docs/components/meta/panel.ts +83 -83
- package/docs/components/meta/radio.ts +55 -55
- package/docs/components/meta/slider.ts +270 -270
- package/docs/components/meta/table-panel.ts +154 -154
- package/docs/components/meta/table.ts +328 -328
- package/docs/components/meta/tabs.ts +136 -136
- 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 +42 -42
- 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 +199 -199
- package/docs/components/table.md +202 -202
- 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/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 +242 -242
- 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-cards/basic.vue +82 -0
- 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/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/editable.vue +261 -261
- 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/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/tree-column.vue +119 -119
- package/docs/examples/table/tree-data.vue +141 -141
- 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 +209 -209
- package/docs/examples/table-panel/multiple-selection.vue +243 -243
- package/docs/examples/table-panel/pagination.vue +133 -133
- 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
|
@@ -1,119 +1,119 @@
|
|
|
1
|
-
# Buttons 按钮组
|
|
2
|
-
|
|
3
|
-
用于批量管理和展示按钮,支持分组、下拉菜单等功能。
|
|
4
|
-
|
|
5
|
-
## 基础用法
|
|
6
|
-
|
|
7
|
-
通过 `list` 属性传入按钮配置数组。
|
|
8
|
-
|
|
9
|
-
<Demo :source-code="buttonsBasicCode">
|
|
10
|
-
<template #source>
|
|
11
|
-
<buttons-basic />
|
|
12
|
-
</template>
|
|
13
|
-
<template #description>
|
|
14
|
-
每个按钮项需要包含唯一的 `id` 标识,可配置 `label`、`click` 等属性,`type`、`icon` 等属性需配置在 `config` 对象中。
|
|
15
|
-
</template>
|
|
16
|
-
</Demo>
|
|
17
|
-
|
|
18
|
-
## 按钮分组
|
|
19
|
-
|
|
20
|
-
通过设置 `groupId` 可以将按钮自动分组展示。
|
|
21
|
-
|
|
22
|
-
<Demo :source-code="buttonsGroupCode">
|
|
23
|
-
<template #source>
|
|
24
|
-
<buttons-group />
|
|
25
|
-
</template>
|
|
26
|
-
<template #description>
|
|
27
|
-
相同 `groupId` 的按钮会紧凑显示在一起,不同组之间会有间距。
|
|
28
|
-
</template>
|
|
29
|
-
</Demo>
|
|
30
|
-
|
|
31
|
-
## 下拉菜单
|
|
32
|
-
|
|
33
|
-
通过 `children` 属性可以创建带下拉菜单的按钮。
|
|
34
|
-
|
|
35
|
-
<Demo :source-code="buttonsDropdownCode">
|
|
36
|
-
<template #source>
|
|
37
|
-
<buttons-dropdown />
|
|
38
|
-
</template>
|
|
39
|
-
<template #description>
|
|
40
|
-
配置 `children` 数组后,子按钮会以下拉形式展示,适合放置次要操作。
|
|
41
|
-
</template>
|
|
42
|
-
</Demo>
|
|
43
|
-
|
|
44
|
-
## 不同尺寸
|
|
45
|
-
|
|
46
|
-
通过 `size` 属性设置按钮组内所有按钮的尺寸。
|
|
47
|
-
|
|
48
|
-
<Demo :source-code="buttonsSizeCode">
|
|
49
|
-
<template #source>
|
|
50
|
-
<buttons-size />
|
|
51
|
-
</template>
|
|
52
|
-
<template #description>
|
|
53
|
-
支持 `large`、`default`、`small` 三种尺寸。
|
|
54
|
-
</template>
|
|
55
|
-
</Demo>
|
|
56
|
-
|
|
57
|
-
## 链接形式
|
|
58
|
-
|
|
59
|
-
通过 `isLink` 属性可以将所有按钮以链接形式展示。
|
|
60
|
-
|
|
61
|
-
<Demo :source-code="buttonsLinkCode">
|
|
62
|
-
<template #source>
|
|
63
|
-
<buttons-link />
|
|
64
|
-
</template>
|
|
65
|
-
<template #description>
|
|
66
|
-
设置 `isLink` 为 `true` 后,所有按钮都会以链接形式展示。
|
|
67
|
-
</template>
|
|
68
|
-
</Demo>
|
|
69
|
-
|
|
70
|
-
## 禁用状态
|
|
71
|
-
|
|
72
|
-
通过按钮项的 `disabled` 属性可以禁用单个按钮。
|
|
73
|
-
|
|
74
|
-
<Demo :source-code="buttonsDisabledCode">
|
|
75
|
-
<template #source>
|
|
76
|
-
<buttons-disabled />
|
|
77
|
-
</template>
|
|
78
|
-
<template #description>
|
|
79
|
-
禁用的按钮不会触发点击事件。
|
|
80
|
-
</template>
|
|
81
|
-
</Demo>
|
|
82
|
-
|
|
83
|
-
## 点击打开弹窗
|
|
84
|
-
|
|
85
|
-
演示通过按钮点击事件打开弹窗。
|
|
86
|
-
|
|
87
|
-
<Demo :source-code="buttonsPopupCode">
|
|
88
|
-
<template #source>
|
|
89
|
-
<buttons-popup />
|
|
90
|
-
</template>
|
|
91
|
-
<template #description>
|
|
92
|
-
在 `click` 事件回调中解构获取 `openLayer` 方法,通过它动态打开弹窗。
|
|
93
|
-
</template>
|
|
94
|
-
</Demo>
|
|
95
|
-
|
|
96
|
-
## API
|
|
97
|
-
|
|
98
|
-
### Buttons 属性
|
|
99
|
-
|
|
100
|
-
<ApiTable :data="buttonsApi" componentName="buttons" />
|
|
101
|
-
|
|
102
|
-
<script setup>
|
|
103
|
-
import ButtonsBasic from '../examples/buttons/basic.vue'
|
|
104
|
-
import ButtonsGroup from '../examples/buttons/group.vue'
|
|
105
|
-
import ButtonsDropdown from '../examples/buttons/dropdown.vue'
|
|
106
|
-
import ButtonsSize from '../examples/buttons/size.vue'
|
|
107
|
-
import ButtonsLink from '../examples/buttons/link.vue'
|
|
108
|
-
import ButtonsDisabled from '../examples/buttons/disabled.vue'
|
|
109
|
-
import ButtonsPopup from '../examples/buttons/popup.vue'
|
|
110
|
-
import buttonsApi from './meta/buttons'
|
|
111
|
-
|
|
112
|
-
import buttonsBasicCode from '../examples/buttons/basic.vue?raw'
|
|
113
|
-
import buttonsGroupCode from '../examples/buttons/group.vue?raw'
|
|
114
|
-
import buttonsDropdownCode from '../examples/buttons/dropdown.vue?raw'
|
|
115
|
-
import buttonsSizeCode from '../examples/buttons/size.vue?raw'
|
|
116
|
-
import buttonsLinkCode from '../examples/buttons/link.vue?raw'
|
|
117
|
-
import buttonsDisabledCode from '../examples/buttons/disabled.vue?raw'
|
|
118
|
-
import buttonsPopupCode from '../examples/buttons/popup.vue?raw'
|
|
119
|
-
</script>
|
|
1
|
+
# Buttons 按钮组
|
|
2
|
+
|
|
3
|
+
用于批量管理和展示按钮,支持分组、下拉菜单等功能。
|
|
4
|
+
|
|
5
|
+
## 基础用法
|
|
6
|
+
|
|
7
|
+
通过 `list` 属性传入按钮配置数组。
|
|
8
|
+
|
|
9
|
+
<Demo :source-code="buttonsBasicCode">
|
|
10
|
+
<template #source>
|
|
11
|
+
<buttons-basic />
|
|
12
|
+
</template>
|
|
13
|
+
<template #description>
|
|
14
|
+
每个按钮项需要包含唯一的 `id` 标识,可配置 `label`、`click` 等属性,`type`、`icon` 等属性需配置在 `config` 对象中。
|
|
15
|
+
</template>
|
|
16
|
+
</Demo>
|
|
17
|
+
|
|
18
|
+
## 按钮分组
|
|
19
|
+
|
|
20
|
+
通过设置 `groupId` 可以将按钮自动分组展示。
|
|
21
|
+
|
|
22
|
+
<Demo :source-code="buttonsGroupCode">
|
|
23
|
+
<template #source>
|
|
24
|
+
<buttons-group />
|
|
25
|
+
</template>
|
|
26
|
+
<template #description>
|
|
27
|
+
相同 `groupId` 的按钮会紧凑显示在一起,不同组之间会有间距。
|
|
28
|
+
</template>
|
|
29
|
+
</Demo>
|
|
30
|
+
|
|
31
|
+
## 下拉菜单
|
|
32
|
+
|
|
33
|
+
通过 `children` 属性可以创建带下拉菜单的按钮。
|
|
34
|
+
|
|
35
|
+
<Demo :source-code="buttonsDropdownCode">
|
|
36
|
+
<template #source>
|
|
37
|
+
<buttons-dropdown />
|
|
38
|
+
</template>
|
|
39
|
+
<template #description>
|
|
40
|
+
配置 `children` 数组后,子按钮会以下拉形式展示,适合放置次要操作。
|
|
41
|
+
</template>
|
|
42
|
+
</Demo>
|
|
43
|
+
|
|
44
|
+
## 不同尺寸
|
|
45
|
+
|
|
46
|
+
通过 `size` 属性设置按钮组内所有按钮的尺寸。
|
|
47
|
+
|
|
48
|
+
<Demo :source-code="buttonsSizeCode">
|
|
49
|
+
<template #source>
|
|
50
|
+
<buttons-size />
|
|
51
|
+
</template>
|
|
52
|
+
<template #description>
|
|
53
|
+
支持 `large`、`default`、`small` 三种尺寸。
|
|
54
|
+
</template>
|
|
55
|
+
</Demo>
|
|
56
|
+
|
|
57
|
+
## 链接形式
|
|
58
|
+
|
|
59
|
+
通过 `isLink` 属性可以将所有按钮以链接形式展示。
|
|
60
|
+
|
|
61
|
+
<Demo :source-code="buttonsLinkCode">
|
|
62
|
+
<template #source>
|
|
63
|
+
<buttons-link />
|
|
64
|
+
</template>
|
|
65
|
+
<template #description>
|
|
66
|
+
设置 `isLink` 为 `true` 后,所有按钮都会以链接形式展示。
|
|
67
|
+
</template>
|
|
68
|
+
</Demo>
|
|
69
|
+
|
|
70
|
+
## 禁用状态
|
|
71
|
+
|
|
72
|
+
通过按钮项的 `disabled` 属性可以禁用单个按钮。
|
|
73
|
+
|
|
74
|
+
<Demo :source-code="buttonsDisabledCode">
|
|
75
|
+
<template #source>
|
|
76
|
+
<buttons-disabled />
|
|
77
|
+
</template>
|
|
78
|
+
<template #description>
|
|
79
|
+
禁用的按钮不会触发点击事件。
|
|
80
|
+
</template>
|
|
81
|
+
</Demo>
|
|
82
|
+
|
|
83
|
+
## 点击打开弹窗
|
|
84
|
+
|
|
85
|
+
演示通过按钮点击事件打开弹窗。
|
|
86
|
+
|
|
87
|
+
<Demo :source-code="buttonsPopupCode">
|
|
88
|
+
<template #source>
|
|
89
|
+
<buttons-popup />
|
|
90
|
+
</template>
|
|
91
|
+
<template #description>
|
|
92
|
+
在 `click` 事件回调中解构获取 `openLayer` 方法,通过它动态打开弹窗。
|
|
93
|
+
</template>
|
|
94
|
+
</Demo>
|
|
95
|
+
|
|
96
|
+
## API
|
|
97
|
+
|
|
98
|
+
### Buttons 属性
|
|
99
|
+
|
|
100
|
+
<ApiTable :data="buttonsApi" componentName="buttons" />
|
|
101
|
+
|
|
102
|
+
<script setup>
|
|
103
|
+
import ButtonsBasic from '../examples/buttons/basic.vue'
|
|
104
|
+
import ButtonsGroup from '../examples/buttons/group.vue'
|
|
105
|
+
import ButtonsDropdown from '../examples/buttons/dropdown.vue'
|
|
106
|
+
import ButtonsSize from '../examples/buttons/size.vue'
|
|
107
|
+
import ButtonsLink from '../examples/buttons/link.vue'
|
|
108
|
+
import ButtonsDisabled from '../examples/buttons/disabled.vue'
|
|
109
|
+
import ButtonsPopup from '../examples/buttons/popup.vue'
|
|
110
|
+
import buttonsApi from './meta/buttons'
|
|
111
|
+
|
|
112
|
+
import buttonsBasicCode from '../examples/buttons/basic.vue?raw'
|
|
113
|
+
import buttonsGroupCode from '../examples/buttons/group.vue?raw'
|
|
114
|
+
import buttonsDropdownCode from '../examples/buttons/dropdown.vue?raw'
|
|
115
|
+
import buttonsSizeCode from '../examples/buttons/size.vue?raw'
|
|
116
|
+
import buttonsLinkCode from '../examples/buttons/link.vue?raw'
|
|
117
|
+
import buttonsDisabledCode from '../examples/buttons/disabled.vue?raw'
|
|
118
|
+
import buttonsPopupCode from '../examples/buttons/popup.vue?raw'
|
|
119
|
+
</script>
|
|
@@ -1,114 +1,114 @@
|
|
|
1
|
-
# CascaderSelect 级联选择
|
|
2
|
-
|
|
3
|
-
当选项具有层级关系时,使用级联选择器展示并选择内容。
|
|
4
|
-
|
|
5
|
-
## 基础用法
|
|
6
|
-
|
|
7
|
-
<Demo :source-code="cascaderSelectBasicCode">
|
|
8
|
-
<template #source>
|
|
9
|
-
<cascader-select-basic />
|
|
10
|
-
</template>
|
|
11
|
-
<template #description>
|
|
12
|
-
使用 v-model 实现双向数据绑定。
|
|
13
|
-
</template>
|
|
14
|
-
</Demo>
|
|
15
|
-
|
|
16
|
-
## 禁用和只读
|
|
17
|
-
|
|
18
|
-
通过 `disabled` 和 `readonly` 属性指定级联选择器的状态。
|
|
19
|
-
|
|
20
|
-
<Demo :source-code="cascaderSelectDisabledCode">
|
|
21
|
-
<template #source>
|
|
22
|
-
<cascader-select-disabled />
|
|
23
|
-
</template>
|
|
24
|
-
<template #description>
|
|
25
|
-
通过 disabled 属性指定是否禁用级联选择器,通过 readonly 属性指定是否只读。
|
|
26
|
-
</template>
|
|
27
|
-
</Demo>
|
|
28
|
-
|
|
29
|
-
## 可清除
|
|
30
|
-
|
|
31
|
-
使用 `clearable` 属性即可得到一个可清除的级联选择器。
|
|
32
|
-
|
|
33
|
-
<Demo :source-code="cascaderSelectClearableCode">
|
|
34
|
-
<template #source>
|
|
35
|
-
<cascader-select-clearable />
|
|
36
|
-
</template>
|
|
37
|
-
<template #description>
|
|
38
|
-
设置 `clearable` 属性为 `true` 即可显示清除按钮。
|
|
39
|
-
</template>
|
|
40
|
-
</Demo>
|
|
41
|
-
|
|
42
|
-
## 可搜索
|
|
43
|
-
|
|
44
|
-
使用 `filterable` 属性即可启用搜索功能。
|
|
45
|
-
|
|
46
|
-
<Demo :source-code="cascaderSelectFilterableCode">
|
|
47
|
-
<template #source>
|
|
48
|
-
<cascader-select-filterable />
|
|
49
|
-
</template>
|
|
50
|
-
<template #description>
|
|
51
|
-
设置 `filterable` 属性为 `true` 即可启用搜索功能。
|
|
52
|
-
</template>
|
|
53
|
-
</Demo>
|
|
54
|
-
|
|
55
|
-
## 多选
|
|
56
|
-
|
|
57
|
-
使用 `multiple` 属性即可启用多选功能。
|
|
58
|
-
|
|
59
|
-
<Demo :source-code="cascaderSelectMultipleCode">
|
|
60
|
-
<template #source>
|
|
61
|
-
<cascader-select-multiple />
|
|
62
|
-
</template>
|
|
63
|
-
<template #description>
|
|
64
|
-
设置 `multiple` 属性为 `true` 即可启用多选功能。
|
|
65
|
-
</template>
|
|
66
|
-
</Demo>
|
|
67
|
-
|
|
68
|
-
## 自定义插槽
|
|
69
|
-
|
|
70
|
-
使用各个插槽来自定义级联选择器的内容。
|
|
71
|
-
|
|
72
|
-
<Demo :source-code="cascaderSelectSlotCode">
|
|
73
|
-
<template #source>
|
|
74
|
-
<cascader-select-slot />
|
|
75
|
-
</template>
|
|
76
|
-
<template #description>
|
|
77
|
-
通过 `#default` 插槽自定义节点内容,通过 `#empty` 插槽自定义空状态。
|
|
78
|
-
</template>
|
|
79
|
-
</Demo>
|
|
80
|
-
|
|
81
|
-
## 方法调用
|
|
82
|
-
|
|
83
|
-
通过模板引用访问组件的暴露方法。
|
|
84
|
-
|
|
85
|
-
<Demo :source-code="cascaderSelectMethodsCode">
|
|
86
|
-
<template #source>
|
|
87
|
-
<cascader-select-methods />
|
|
88
|
-
</template>
|
|
89
|
-
<template #description>
|
|
90
|
-
使用 `getCheckedNodes()` 获取选中节点,使用 `clearCheckedNodes()` 清空选中节点。
|
|
91
|
-
</template>
|
|
92
|
-
</Demo>
|
|
93
|
-
|
|
94
|
-
## API
|
|
95
|
-
|
|
96
|
-
<ApiTable :data="cascaderSelectApi" componentName="cascader-select" />
|
|
97
|
-
|
|
98
|
-
<script setup>
|
|
99
|
-
import CascaderSelectBasic from '../examples/cascader-select/basic.vue'
|
|
100
|
-
import CascaderSelectDisabled from '../examples/cascader-select/disabled.vue'
|
|
101
|
-
import CascaderSelectClearable from '../examples/cascader-select/clearable.vue'
|
|
102
|
-
import CascaderSelectFilterable from '../examples/cascader-select/filterable.vue'
|
|
103
|
-
import CascaderSelectMultiple from '../examples/cascader-select/multiple.vue'
|
|
104
|
-
import CascaderSelectSlot from '../examples/cascader-select/slot.vue'
|
|
105
|
-
import CascaderSelectMethods from '../examples/cascader-select/methods.vue'
|
|
106
|
-
import cascaderSelectApi from './meta/cascader-select'
|
|
107
|
-
import cascaderSelectBasicCode from '../examples/cascader-select/basic.vue?raw'
|
|
108
|
-
import cascaderSelectDisabledCode from '../examples/cascader-select/disabled.vue?raw'
|
|
109
|
-
import cascaderSelectClearableCode from '../examples/cascader-select/clearable.vue?raw'
|
|
110
|
-
import cascaderSelectFilterableCode from '../examples/cascader-select/filterable.vue?raw'
|
|
111
|
-
import cascaderSelectMultipleCode from '../examples/cascader-select/multiple.vue?raw'
|
|
112
|
-
import cascaderSelectSlotCode from '../examples/cascader-select/slot.vue?raw'
|
|
113
|
-
import cascaderSelectMethodsCode from '../examples/cascader-select/methods.vue?raw'
|
|
114
|
-
</script>
|
|
1
|
+
# CascaderSelect 级联选择
|
|
2
|
+
|
|
3
|
+
当选项具有层级关系时,使用级联选择器展示并选择内容。
|
|
4
|
+
|
|
5
|
+
## 基础用法
|
|
6
|
+
|
|
7
|
+
<Demo :source-code="cascaderSelectBasicCode">
|
|
8
|
+
<template #source>
|
|
9
|
+
<cascader-select-basic />
|
|
10
|
+
</template>
|
|
11
|
+
<template #description>
|
|
12
|
+
使用 v-model 实现双向数据绑定。
|
|
13
|
+
</template>
|
|
14
|
+
</Demo>
|
|
15
|
+
|
|
16
|
+
## 禁用和只读
|
|
17
|
+
|
|
18
|
+
通过 `disabled` 和 `readonly` 属性指定级联选择器的状态。
|
|
19
|
+
|
|
20
|
+
<Demo :source-code="cascaderSelectDisabledCode">
|
|
21
|
+
<template #source>
|
|
22
|
+
<cascader-select-disabled />
|
|
23
|
+
</template>
|
|
24
|
+
<template #description>
|
|
25
|
+
通过 disabled 属性指定是否禁用级联选择器,通过 readonly 属性指定是否只读。
|
|
26
|
+
</template>
|
|
27
|
+
</Demo>
|
|
28
|
+
|
|
29
|
+
## 可清除
|
|
30
|
+
|
|
31
|
+
使用 `clearable` 属性即可得到一个可清除的级联选择器。
|
|
32
|
+
|
|
33
|
+
<Demo :source-code="cascaderSelectClearableCode">
|
|
34
|
+
<template #source>
|
|
35
|
+
<cascader-select-clearable />
|
|
36
|
+
</template>
|
|
37
|
+
<template #description>
|
|
38
|
+
设置 `clearable` 属性为 `true` 即可显示清除按钮。
|
|
39
|
+
</template>
|
|
40
|
+
</Demo>
|
|
41
|
+
|
|
42
|
+
## 可搜索
|
|
43
|
+
|
|
44
|
+
使用 `filterable` 属性即可启用搜索功能。
|
|
45
|
+
|
|
46
|
+
<Demo :source-code="cascaderSelectFilterableCode">
|
|
47
|
+
<template #source>
|
|
48
|
+
<cascader-select-filterable />
|
|
49
|
+
</template>
|
|
50
|
+
<template #description>
|
|
51
|
+
设置 `filterable` 属性为 `true` 即可启用搜索功能。
|
|
52
|
+
</template>
|
|
53
|
+
</Demo>
|
|
54
|
+
|
|
55
|
+
## 多选
|
|
56
|
+
|
|
57
|
+
使用 `multiple` 属性即可启用多选功能。
|
|
58
|
+
|
|
59
|
+
<Demo :source-code="cascaderSelectMultipleCode">
|
|
60
|
+
<template #source>
|
|
61
|
+
<cascader-select-multiple />
|
|
62
|
+
</template>
|
|
63
|
+
<template #description>
|
|
64
|
+
设置 `multiple` 属性为 `true` 即可启用多选功能。
|
|
65
|
+
</template>
|
|
66
|
+
</Demo>
|
|
67
|
+
|
|
68
|
+
## 自定义插槽
|
|
69
|
+
|
|
70
|
+
使用各个插槽来自定义级联选择器的内容。
|
|
71
|
+
|
|
72
|
+
<Demo :source-code="cascaderSelectSlotCode">
|
|
73
|
+
<template #source>
|
|
74
|
+
<cascader-select-slot />
|
|
75
|
+
</template>
|
|
76
|
+
<template #description>
|
|
77
|
+
通过 `#default` 插槽自定义节点内容,通过 `#empty` 插槽自定义空状态。
|
|
78
|
+
</template>
|
|
79
|
+
</Demo>
|
|
80
|
+
|
|
81
|
+
## 方法调用
|
|
82
|
+
|
|
83
|
+
通过模板引用访问组件的暴露方法。
|
|
84
|
+
|
|
85
|
+
<Demo :source-code="cascaderSelectMethodsCode">
|
|
86
|
+
<template #source>
|
|
87
|
+
<cascader-select-methods />
|
|
88
|
+
</template>
|
|
89
|
+
<template #description>
|
|
90
|
+
使用 `getCheckedNodes()` 获取选中节点,使用 `clearCheckedNodes()` 清空选中节点。
|
|
91
|
+
</template>
|
|
92
|
+
</Demo>
|
|
93
|
+
|
|
94
|
+
## API
|
|
95
|
+
|
|
96
|
+
<ApiTable :data="cascaderSelectApi" componentName="cascader-select" />
|
|
97
|
+
|
|
98
|
+
<script setup>
|
|
99
|
+
import CascaderSelectBasic from '../examples/cascader-select/basic.vue'
|
|
100
|
+
import CascaderSelectDisabled from '../examples/cascader-select/disabled.vue'
|
|
101
|
+
import CascaderSelectClearable from '../examples/cascader-select/clearable.vue'
|
|
102
|
+
import CascaderSelectFilterable from '../examples/cascader-select/filterable.vue'
|
|
103
|
+
import CascaderSelectMultiple from '../examples/cascader-select/multiple.vue'
|
|
104
|
+
import CascaderSelectSlot from '../examples/cascader-select/slot.vue'
|
|
105
|
+
import CascaderSelectMethods from '../examples/cascader-select/methods.vue'
|
|
106
|
+
import cascaderSelectApi from './meta/cascader-select'
|
|
107
|
+
import cascaderSelectBasicCode from '../examples/cascader-select/basic.vue?raw'
|
|
108
|
+
import cascaderSelectDisabledCode from '../examples/cascader-select/disabled.vue?raw'
|
|
109
|
+
import cascaderSelectClearableCode from '../examples/cascader-select/clearable.vue?raw'
|
|
110
|
+
import cascaderSelectFilterableCode from '../examples/cascader-select/filterable.vue?raw'
|
|
111
|
+
import cascaderSelectMultipleCode from '../examples/cascader-select/multiple.vue?raw'
|
|
112
|
+
import cascaderSelectSlotCode from '../examples/cascader-select/slot.vue?raw'
|
|
113
|
+
import cascaderSelectMethodsCode from '../examples/cascader-select/methods.vue?raw'
|
|
114
|
+
</script>
|