@a2simcode/ui 0.0.71 → 0.0.73
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/button/index.d.ts +10 -190
- package/dist/components/button/src/button.vue.d.ts +39 -226
- package/dist/components/buttons/index.d.ts +7 -6
- package/dist/components/buttons/src/interface.d.ts +13 -10
- package/dist/components/index.d.ts +2 -1
- package/dist/simcode-ui.es.js +388 -470
- 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 +61 -56
- package/docs/components/meta/date.ts +256 -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
|
@@ -1,127 +1,127 @@
|
|
|
1
|
-
# Dialog 弹窗
|
|
2
|
-
|
|
3
|
-
模态对话框,在浮层中显示内容,支持拖拽、缩放等功能。
|
|
4
|
-
|
|
5
|
-
## 基础用法
|
|
6
|
-
|
|
7
|
-
最简单的用法。
|
|
8
|
-
|
|
9
|
-
<Demo :source-code="dialogBasicCode">
|
|
10
|
-
<template #source>
|
|
11
|
-
<dialog-basic />
|
|
12
|
-
</template>
|
|
13
|
-
<template #description>
|
|
14
|
-
基础的弹窗,支持拖拽、缩放等功能。使用 `v-model:visible` 控制显示隐藏。
|
|
15
|
-
</template>
|
|
16
|
-
</Demo>
|
|
17
|
-
|
|
18
|
-
## 不同尺寸
|
|
19
|
-
|
|
20
|
-
通过 `width` 和 `height` 属性可以设置弹窗的尺寸。
|
|
21
|
-
|
|
22
|
-
<Demo :source-code="dialogSizeCode">
|
|
23
|
-
<template #source>
|
|
24
|
-
<dialog-size />
|
|
25
|
-
</template>
|
|
26
|
-
<template #description>
|
|
27
|
-
支持自定义弹窗的宽度和高度,单位为像素。设置 `minWidth` 和 `minHeight` 可限制最小尺寸。
|
|
28
|
-
</template>
|
|
29
|
-
</Demo>
|
|
30
|
-
|
|
31
|
-
## 全屏显示
|
|
32
|
-
|
|
33
|
-
使用全屏显示弹窗。
|
|
34
|
-
|
|
35
|
-
<Demo :source-code="dialogFullscreenCode">
|
|
36
|
-
<template #source>
|
|
37
|
-
<dialog-fullscreen />
|
|
38
|
-
</template>
|
|
39
|
-
<template #description>
|
|
40
|
-
可以通过缩放控制实现全屏显示效果。
|
|
41
|
-
</template>
|
|
42
|
-
</Demo>
|
|
43
|
-
|
|
44
|
-
## 自定义按钮
|
|
45
|
-
|
|
46
|
-
通过 `buttons` 属性可以自定义底部按钮。
|
|
47
|
-
|
|
48
|
-
<Demo :source-code="dialogCustomButtonsCode">
|
|
49
|
-
<template #source>
|
|
50
|
-
<dialog-custom-buttons />
|
|
51
|
-
</template>
|
|
52
|
-
<template #description>
|
|
53
|
-
使用 `buttons` 属性配置自定义按钮,支持设置按钮类型、样式、图标、点击事件等。设置 `hasBtns` 为 `false` 可隐藏整个按钮区域。
|
|
54
|
-
</template>
|
|
55
|
-
</Demo>
|
|
56
|
-
|
|
57
|
-
## 步骤弹窗
|
|
58
|
-
|
|
59
|
-
通过 `isStep` 属性可以创建带步骤条的弹窗。
|
|
60
|
-
|
|
61
|
-
<Demo :source-code="dialogStepsCode">
|
|
62
|
-
<template #source>
|
|
63
|
-
<dialog-steps />
|
|
64
|
-
</template>
|
|
65
|
-
<template #description>
|
|
66
|
-
适用于分步骤的表单或流程,支持步骤校验。使用 `v-model:stepActive` 控制当前步骤,使用 `validateSteps` 进行步骤校验。
|
|
67
|
-
</template>
|
|
68
|
-
</Demo>
|
|
69
|
-
|
|
70
|
-
## 无遮罩层
|
|
71
|
-
|
|
72
|
-
设置 `mask` 为 `false` 可以取消遮罩层。
|
|
73
|
-
|
|
74
|
-
<Demo :source-code="dialogNoMaskCode">
|
|
75
|
-
<template #source>
|
|
76
|
-
<dialog-no-mask />
|
|
77
|
-
</template>
|
|
78
|
-
<template #description>
|
|
79
|
-
无遮罩层的弹窗允许用户与页面其他内容进行交互。
|
|
80
|
-
</template>
|
|
81
|
-
</Demo>
|
|
82
|
-
|
|
83
|
-
## API
|
|
84
|
-
|
|
85
|
-
### 属性
|
|
86
|
-
|
|
87
|
-
<ApiTable :data="dialogApi" componentName="dialog" />
|
|
88
|
-
|
|
89
|
-
### 事件
|
|
90
|
-
|
|
91
|
-
| 事件名 | 说明 | 回调参数 |
|
|
92
|
-
| ----------------- | ---------------------------- | ------------------------------------------------ |
|
|
93
|
-
| update:visible | 弹窗显示状态变化时触发 | `(visible: boolean)` |
|
|
94
|
-
| update:stepActive | 步骤变化时触发 | `(stepActive: number)` |
|
|
95
|
-
| cancel | 点击取消按钮或关闭按钮时触发 | - |
|
|
96
|
-
| ok | 点击确定按钮时触发 | `(showLoading: Function, hideLoading: Function)` |
|
|
97
|
-
| closed | 弹窗关闭动画结束后触发 | - |
|
|
98
|
-
|
|
99
|
-
### 插槽
|
|
100
|
-
|
|
101
|
-
| 插槽名 | 说明 |
|
|
102
|
-
| ------- | ------------ |
|
|
103
|
-
| default | 弹窗内容区域 |
|
|
104
|
-
|
|
105
|
-
### 方法
|
|
106
|
-
|
|
107
|
-
| 方法名 | 说明 | 参数 |
|
|
108
|
-
| ----------- | ------------ | ----------------- |
|
|
109
|
-
| showLoading | 显示加载状态 | `(text?: string)` |
|
|
110
|
-
| hideLoading | 隐藏加载状态 | - |
|
|
111
|
-
|
|
112
|
-
<script setup>
|
|
113
|
-
import DialogBasic from '../examples/dialog/basic.vue'
|
|
114
|
-
import DialogSize from '../examples/dialog/size.vue'
|
|
115
|
-
import DialogFullscreen from '../examples/dialog/fullscreen.vue'
|
|
116
|
-
import DialogCustomButtons from '../examples/dialog/custom-buttons.vue'
|
|
117
|
-
import DialogSteps from '../examples/dialog/steps.vue'
|
|
118
|
-
import DialogNoMask from '../examples/dialog/no-mask.vue'
|
|
119
|
-
import dialogApi from './meta/dialog'
|
|
120
|
-
|
|
121
|
-
import dialogBasicCode from '../examples/dialog/basic.vue?raw'
|
|
122
|
-
import dialogSizeCode from '../examples/dialog/size.vue?raw'
|
|
123
|
-
import dialogFullscreenCode from '../examples/dialog/fullscreen.vue?raw'
|
|
124
|
-
import dialogCustomButtonsCode from '../examples/dialog/custom-buttons.vue?raw'
|
|
125
|
-
import dialogStepsCode from '../examples/dialog/steps.vue?raw'
|
|
126
|
-
import dialogNoMaskCode from '../examples/dialog/no-mask.vue?raw'
|
|
127
|
-
</script>
|
|
1
|
+
# Dialog 弹窗
|
|
2
|
+
|
|
3
|
+
模态对话框,在浮层中显示内容,支持拖拽、缩放等功能。
|
|
4
|
+
|
|
5
|
+
## 基础用法
|
|
6
|
+
|
|
7
|
+
最简单的用法。
|
|
8
|
+
|
|
9
|
+
<Demo :source-code="dialogBasicCode">
|
|
10
|
+
<template #source>
|
|
11
|
+
<dialog-basic />
|
|
12
|
+
</template>
|
|
13
|
+
<template #description>
|
|
14
|
+
基础的弹窗,支持拖拽、缩放等功能。使用 `v-model:visible` 控制显示隐藏。
|
|
15
|
+
</template>
|
|
16
|
+
</Demo>
|
|
17
|
+
|
|
18
|
+
## 不同尺寸
|
|
19
|
+
|
|
20
|
+
通过 `width` 和 `height` 属性可以设置弹窗的尺寸。
|
|
21
|
+
|
|
22
|
+
<Demo :source-code="dialogSizeCode">
|
|
23
|
+
<template #source>
|
|
24
|
+
<dialog-size />
|
|
25
|
+
</template>
|
|
26
|
+
<template #description>
|
|
27
|
+
支持自定义弹窗的宽度和高度,单位为像素。设置 `minWidth` 和 `minHeight` 可限制最小尺寸。
|
|
28
|
+
</template>
|
|
29
|
+
</Demo>
|
|
30
|
+
|
|
31
|
+
## 全屏显示
|
|
32
|
+
|
|
33
|
+
使用全屏显示弹窗。
|
|
34
|
+
|
|
35
|
+
<Demo :source-code="dialogFullscreenCode">
|
|
36
|
+
<template #source>
|
|
37
|
+
<dialog-fullscreen />
|
|
38
|
+
</template>
|
|
39
|
+
<template #description>
|
|
40
|
+
可以通过缩放控制实现全屏显示效果。
|
|
41
|
+
</template>
|
|
42
|
+
</Demo>
|
|
43
|
+
|
|
44
|
+
## 自定义按钮
|
|
45
|
+
|
|
46
|
+
通过 `buttons` 属性可以自定义底部按钮。
|
|
47
|
+
|
|
48
|
+
<Demo :source-code="dialogCustomButtonsCode">
|
|
49
|
+
<template #source>
|
|
50
|
+
<dialog-custom-buttons />
|
|
51
|
+
</template>
|
|
52
|
+
<template #description>
|
|
53
|
+
使用 `buttons` 属性配置自定义按钮,支持设置按钮类型、样式、图标、点击事件等。设置 `hasBtns` 为 `false` 可隐藏整个按钮区域。
|
|
54
|
+
</template>
|
|
55
|
+
</Demo>
|
|
56
|
+
|
|
57
|
+
## 步骤弹窗
|
|
58
|
+
|
|
59
|
+
通过 `isStep` 属性可以创建带步骤条的弹窗。
|
|
60
|
+
|
|
61
|
+
<Demo :source-code="dialogStepsCode">
|
|
62
|
+
<template #source>
|
|
63
|
+
<dialog-steps />
|
|
64
|
+
</template>
|
|
65
|
+
<template #description>
|
|
66
|
+
适用于分步骤的表单或流程,支持步骤校验。使用 `v-model:stepActive` 控制当前步骤,使用 `validateSteps` 进行步骤校验。
|
|
67
|
+
</template>
|
|
68
|
+
</Demo>
|
|
69
|
+
|
|
70
|
+
## 无遮罩层
|
|
71
|
+
|
|
72
|
+
设置 `mask` 为 `false` 可以取消遮罩层。
|
|
73
|
+
|
|
74
|
+
<Demo :source-code="dialogNoMaskCode">
|
|
75
|
+
<template #source>
|
|
76
|
+
<dialog-no-mask />
|
|
77
|
+
</template>
|
|
78
|
+
<template #description>
|
|
79
|
+
无遮罩层的弹窗允许用户与页面其他内容进行交互。
|
|
80
|
+
</template>
|
|
81
|
+
</Demo>
|
|
82
|
+
|
|
83
|
+
## API
|
|
84
|
+
|
|
85
|
+
### 属性
|
|
86
|
+
|
|
87
|
+
<ApiTable :data="dialogApi" componentName="dialog" />
|
|
88
|
+
|
|
89
|
+
### 事件
|
|
90
|
+
|
|
91
|
+
| 事件名 | 说明 | 回调参数 |
|
|
92
|
+
| ----------------- | ---------------------------- | ------------------------------------------------ |
|
|
93
|
+
| update:visible | 弹窗显示状态变化时触发 | `(visible: boolean)` |
|
|
94
|
+
| update:stepActive | 步骤变化时触发 | `(stepActive: number)` |
|
|
95
|
+
| cancel | 点击取消按钮或关闭按钮时触发 | - |
|
|
96
|
+
| ok | 点击确定按钮时触发 | `(showLoading: Function, hideLoading: Function)` |
|
|
97
|
+
| closed | 弹窗关闭动画结束后触发 | - |
|
|
98
|
+
|
|
99
|
+
### 插槽
|
|
100
|
+
|
|
101
|
+
| 插槽名 | 说明 |
|
|
102
|
+
| ------- | ------------ |
|
|
103
|
+
| default | 弹窗内容区域 |
|
|
104
|
+
|
|
105
|
+
### 方法
|
|
106
|
+
|
|
107
|
+
| 方法名 | 说明 | 参数 |
|
|
108
|
+
| ----------- | ------------ | ----------------- |
|
|
109
|
+
| showLoading | 显示加载状态 | `(text?: string)` |
|
|
110
|
+
| hideLoading | 隐藏加载状态 | - |
|
|
111
|
+
|
|
112
|
+
<script setup>
|
|
113
|
+
import DialogBasic from '../examples/dialog/basic.vue'
|
|
114
|
+
import DialogSize from '../examples/dialog/size.vue'
|
|
115
|
+
import DialogFullscreen from '../examples/dialog/fullscreen.vue'
|
|
116
|
+
import DialogCustomButtons from '../examples/dialog/custom-buttons.vue'
|
|
117
|
+
import DialogSteps from '../examples/dialog/steps.vue'
|
|
118
|
+
import DialogNoMask from '../examples/dialog/no-mask.vue'
|
|
119
|
+
import dialogApi from './meta/dialog'
|
|
120
|
+
|
|
121
|
+
import dialogBasicCode from '../examples/dialog/basic.vue?raw'
|
|
122
|
+
import dialogSizeCode from '../examples/dialog/size.vue?raw'
|
|
123
|
+
import dialogFullscreenCode from '../examples/dialog/fullscreen.vue?raw'
|
|
124
|
+
import dialogCustomButtonsCode from '../examples/dialog/custom-buttons.vue?raw'
|
|
125
|
+
import dialogStepsCode from '../examples/dialog/steps.vue?raw'
|
|
126
|
+
import dialogNoMaskCode from '../examples/dialog/no-mask.vue?raw'
|
|
127
|
+
</script>
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
# Divider 分隔符
|
|
2
|
-
|
|
3
|
-
用于分隔不同的内容区域。支持自定义文本、颜色、大小和样式等功能。
|
|
4
|
-
|
|
5
|
-
## 基础用法
|
|
6
|
-
|
|
7
|
-
<Demo :source-code="dividerBasicCode">
|
|
8
|
-
<template #source>
|
|
9
|
-
<divider-basic />
|
|
10
|
-
</template>
|
|
11
|
-
<template #description>
|
|
12
|
-
通过 `content` 属性添加文本,`contentPosition` 属性控制文本对齐方式。
|
|
13
|
-
</template>
|
|
14
|
-
</Demo>
|
|
15
|
-
|
|
16
|
-
## API
|
|
17
|
-
|
|
18
|
-
<ApiTable :data="dividerApi" componentName="divider" />
|
|
19
|
-
|
|
20
|
-
<script setup>
|
|
21
|
-
import DividerBasic from '../examples/divider/basic.vue'
|
|
22
|
-
import dividerApi from './meta/divider'
|
|
23
|
-
import dividerBasicCode from '../examples/divider/basic.vue?raw'
|
|
24
|
-
</script>
|
|
1
|
+
# Divider 分隔符
|
|
2
|
+
|
|
3
|
+
用于分隔不同的内容区域。支持自定义文本、颜色、大小和样式等功能。
|
|
4
|
+
|
|
5
|
+
## 基础用法
|
|
6
|
+
|
|
7
|
+
<Demo :source-code="dividerBasicCode">
|
|
8
|
+
<template #source>
|
|
9
|
+
<divider-basic />
|
|
10
|
+
</template>
|
|
11
|
+
<template #description>
|
|
12
|
+
通过 `content` 属性添加文本,`contentPosition` 属性控制文本对齐方式。
|
|
13
|
+
</template>
|
|
14
|
+
</Demo>
|
|
15
|
+
|
|
16
|
+
## API
|
|
17
|
+
|
|
18
|
+
<ApiTable :data="dividerApi" componentName="divider" />
|
|
19
|
+
|
|
20
|
+
<script setup>
|
|
21
|
+
import DividerBasic from '../examples/divider/basic.vue'
|
|
22
|
+
import dividerApi from './meta/divider'
|
|
23
|
+
import dividerBasicCode from '../examples/divider/basic.vue?raw'
|
|
24
|
+
</script>
|
|
@@ -1,127 +1,127 @@
|
|
|
1
|
-
# Drawer 抽屉
|
|
2
|
-
|
|
3
|
-
抽屉组件,从屏幕边缘滑出的浮层面板。
|
|
4
|
-
|
|
5
|
-
## 基础用法
|
|
6
|
-
|
|
7
|
-
最简单的用法。
|
|
8
|
-
|
|
9
|
-
<Demo :source-code="drawerBasicCode">
|
|
10
|
-
<template #source>
|
|
11
|
-
<drawer-basic />
|
|
12
|
-
</template>
|
|
13
|
-
<template #description>
|
|
14
|
-
基础的抽屉,默认从右侧滑出。使用 `v-model:visible` 控制显示隐藏。
|
|
15
|
-
</template>
|
|
16
|
-
</Demo>
|
|
17
|
-
|
|
18
|
-
## 打开方向
|
|
19
|
-
|
|
20
|
-
抽屉可以从四个方向打开。
|
|
21
|
-
|
|
22
|
-
<Demo :source-code="drawerDirectionCode">
|
|
23
|
-
<template #source>
|
|
24
|
-
<drawer-direction />
|
|
25
|
-
</template>
|
|
26
|
-
<template #description>
|
|
27
|
-
通过 `direction` 属性可以设置抽屉的打开方向,支持 `rtl`(右到左)、`ltr`(左到右)、`ttb`(上到下)、`btt`(下到上)。
|
|
28
|
-
</template>
|
|
29
|
-
</Demo>
|
|
30
|
-
|
|
31
|
-
## 不同尺寸
|
|
32
|
-
|
|
33
|
-
通过 `width` 和 `height` 属性可以设置抽屉的尺寸。
|
|
34
|
-
|
|
35
|
-
<Demo :source-code="drawerSizeCode">
|
|
36
|
-
<template #source>
|
|
37
|
-
<drawer-size />
|
|
38
|
-
</template>
|
|
39
|
-
<template #description>
|
|
40
|
-
支持自定义抽屉的尺寸。左右打开时使用 `width` 属性(单位:像素),上下打开时使用 `height` 属性(单位:像素)。
|
|
41
|
-
</template>
|
|
42
|
-
</Demo>
|
|
43
|
-
|
|
44
|
-
## 自定义按钮
|
|
45
|
-
|
|
46
|
-
通过 `buttons` 属性可以自定义底部按钮。
|
|
47
|
-
|
|
48
|
-
<Demo :source-code="drawerCustomButtonsCode">
|
|
49
|
-
<template #source>
|
|
50
|
-
<drawer-custom-buttons />
|
|
51
|
-
</template>
|
|
52
|
-
<template #description>
|
|
53
|
-
使用 `buttons` 属性配置自定义按钮,支持设置按钮类型、样式、图标、点击事件等。
|
|
54
|
-
</template>
|
|
55
|
-
</Demo>
|
|
56
|
-
|
|
57
|
-
## 无底部按钮
|
|
58
|
-
|
|
59
|
-
设置 `hasBtns` 为 `false` 可以隐藏底部按钮。
|
|
60
|
-
|
|
61
|
-
<Demo :source-code="drawerNoButtonsCode">
|
|
62
|
-
<template #source>
|
|
63
|
-
<drawer-no-buttons />
|
|
64
|
-
</template>
|
|
65
|
-
<template #description>
|
|
66
|
-
适用于只展示信息,不需要操作按钮的场景。
|
|
67
|
-
</template>
|
|
68
|
-
</Demo>
|
|
69
|
-
|
|
70
|
-
## 遮罩层配置
|
|
71
|
-
|
|
72
|
-
可以配置遮罩层的显示。
|
|
73
|
-
|
|
74
|
-
<Demo :source-code="drawerMaskCode">
|
|
75
|
-
<template #source>
|
|
76
|
-
<drawer-mask />
|
|
77
|
-
</template>
|
|
78
|
-
<template #description>
|
|
79
|
-
设置 `mask` 为 `false` 可以取消遮罩层。
|
|
80
|
-
</template>
|
|
81
|
-
</Demo>
|
|
82
|
-
|
|
83
|
-
## API
|
|
84
|
-
|
|
85
|
-
### 属性
|
|
86
|
-
|
|
87
|
-
<ApiTable :data="drawerApi" componentName="drawer" />
|
|
88
|
-
|
|
89
|
-
### 事件
|
|
90
|
-
|
|
91
|
-
| 事件名 | 说明 | 回调参数 |
|
|
92
|
-
| ----------------- | ---------------------------- | ------------------------------------------------ |
|
|
93
|
-
| update:visible | 抽屉显示状态变化时触发 | `(visible: boolean)` |
|
|
94
|
-
| update:stepActive | 步骤变化时触发 | `(stepActive: number)` |
|
|
95
|
-
| cancel | 点击取消按钮或关闭按钮时触发 | - |
|
|
96
|
-
| ok | 点击确定按钮时触发 | `(showLoading: Function, hideLoading: Function)` |
|
|
97
|
-
| closed | 抽屉关闭动画结束后触发 | - |
|
|
98
|
-
|
|
99
|
-
### 插槽
|
|
100
|
-
|
|
101
|
-
| 插槽名 | 说明 |
|
|
102
|
-
| ------- | ------------ |
|
|
103
|
-
| default | 抽屉内容区域 |
|
|
104
|
-
|
|
105
|
-
### 方法
|
|
106
|
-
|
|
107
|
-
| 方法名 | 说明 | 参数 |
|
|
108
|
-
| ----------- | ------------ | ----------------- |
|
|
109
|
-
| showLoading | 显示加载状态 | `(text?: string)` |
|
|
110
|
-
| hideLoading | 隐藏加载状态 | - |
|
|
111
|
-
|
|
112
|
-
<script setup>
|
|
113
|
-
import DrawerBasic from '../examples/drawer/basic.vue'
|
|
114
|
-
import DrawerDirection from '../examples/drawer/direction.vue'
|
|
115
|
-
import DrawerSize from '../examples/drawer/size.vue'
|
|
116
|
-
import DrawerCustomButtons from '../examples/drawer/custom-buttons.vue'
|
|
117
|
-
import DrawerNoButtons from '../examples/drawer/no-buttons.vue'
|
|
118
|
-
import DrawerMask from '../examples/drawer/mask.vue'
|
|
119
|
-
import drawerApi from './meta/drawer'
|
|
120
|
-
|
|
121
|
-
import drawerBasicCode from '../examples/drawer/basic.vue?raw'
|
|
122
|
-
import drawerDirectionCode from '../examples/drawer/direction.vue?raw'
|
|
123
|
-
import drawerSizeCode from '../examples/drawer/size.vue?raw'
|
|
124
|
-
import drawerCustomButtonsCode from '../examples/drawer/custom-buttons.vue?raw'
|
|
125
|
-
import drawerNoButtonsCode from '../examples/drawer/no-buttons.vue?raw'
|
|
126
|
-
import drawerMaskCode from '../examples/drawer/mask.vue?raw'
|
|
127
|
-
</script>
|
|
1
|
+
# Drawer 抽屉
|
|
2
|
+
|
|
3
|
+
抽屉组件,从屏幕边缘滑出的浮层面板。
|
|
4
|
+
|
|
5
|
+
## 基础用法
|
|
6
|
+
|
|
7
|
+
最简单的用法。
|
|
8
|
+
|
|
9
|
+
<Demo :source-code="drawerBasicCode">
|
|
10
|
+
<template #source>
|
|
11
|
+
<drawer-basic />
|
|
12
|
+
</template>
|
|
13
|
+
<template #description>
|
|
14
|
+
基础的抽屉,默认从右侧滑出。使用 `v-model:visible` 控制显示隐藏。
|
|
15
|
+
</template>
|
|
16
|
+
</Demo>
|
|
17
|
+
|
|
18
|
+
## 打开方向
|
|
19
|
+
|
|
20
|
+
抽屉可以从四个方向打开。
|
|
21
|
+
|
|
22
|
+
<Demo :source-code="drawerDirectionCode">
|
|
23
|
+
<template #source>
|
|
24
|
+
<drawer-direction />
|
|
25
|
+
</template>
|
|
26
|
+
<template #description>
|
|
27
|
+
通过 `direction` 属性可以设置抽屉的打开方向,支持 `rtl`(右到左)、`ltr`(左到右)、`ttb`(上到下)、`btt`(下到上)。
|
|
28
|
+
</template>
|
|
29
|
+
</Demo>
|
|
30
|
+
|
|
31
|
+
## 不同尺寸
|
|
32
|
+
|
|
33
|
+
通过 `width` 和 `height` 属性可以设置抽屉的尺寸。
|
|
34
|
+
|
|
35
|
+
<Demo :source-code="drawerSizeCode">
|
|
36
|
+
<template #source>
|
|
37
|
+
<drawer-size />
|
|
38
|
+
</template>
|
|
39
|
+
<template #description>
|
|
40
|
+
支持自定义抽屉的尺寸。左右打开时使用 `width` 属性(单位:像素),上下打开时使用 `height` 属性(单位:像素)。
|
|
41
|
+
</template>
|
|
42
|
+
</Demo>
|
|
43
|
+
|
|
44
|
+
## 自定义按钮
|
|
45
|
+
|
|
46
|
+
通过 `buttons` 属性可以自定义底部按钮。
|
|
47
|
+
|
|
48
|
+
<Demo :source-code="drawerCustomButtonsCode">
|
|
49
|
+
<template #source>
|
|
50
|
+
<drawer-custom-buttons />
|
|
51
|
+
</template>
|
|
52
|
+
<template #description>
|
|
53
|
+
使用 `buttons` 属性配置自定义按钮,支持设置按钮类型、样式、图标、点击事件等。
|
|
54
|
+
</template>
|
|
55
|
+
</Demo>
|
|
56
|
+
|
|
57
|
+
## 无底部按钮
|
|
58
|
+
|
|
59
|
+
设置 `hasBtns` 为 `false` 可以隐藏底部按钮。
|
|
60
|
+
|
|
61
|
+
<Demo :source-code="drawerNoButtonsCode">
|
|
62
|
+
<template #source>
|
|
63
|
+
<drawer-no-buttons />
|
|
64
|
+
</template>
|
|
65
|
+
<template #description>
|
|
66
|
+
适用于只展示信息,不需要操作按钮的场景。
|
|
67
|
+
</template>
|
|
68
|
+
</Demo>
|
|
69
|
+
|
|
70
|
+
## 遮罩层配置
|
|
71
|
+
|
|
72
|
+
可以配置遮罩层的显示。
|
|
73
|
+
|
|
74
|
+
<Demo :source-code="drawerMaskCode">
|
|
75
|
+
<template #source>
|
|
76
|
+
<drawer-mask />
|
|
77
|
+
</template>
|
|
78
|
+
<template #description>
|
|
79
|
+
设置 `mask` 为 `false` 可以取消遮罩层。
|
|
80
|
+
</template>
|
|
81
|
+
</Demo>
|
|
82
|
+
|
|
83
|
+
## API
|
|
84
|
+
|
|
85
|
+
### 属性
|
|
86
|
+
|
|
87
|
+
<ApiTable :data="drawerApi" componentName="drawer" />
|
|
88
|
+
|
|
89
|
+
### 事件
|
|
90
|
+
|
|
91
|
+
| 事件名 | 说明 | 回调参数 |
|
|
92
|
+
| ----------------- | ---------------------------- | ------------------------------------------------ |
|
|
93
|
+
| update:visible | 抽屉显示状态变化时触发 | `(visible: boolean)` |
|
|
94
|
+
| update:stepActive | 步骤变化时触发 | `(stepActive: number)` |
|
|
95
|
+
| cancel | 点击取消按钮或关闭按钮时触发 | - |
|
|
96
|
+
| ok | 点击确定按钮时触发 | `(showLoading: Function, hideLoading: Function)` |
|
|
97
|
+
| closed | 抽屉关闭动画结束后触发 | - |
|
|
98
|
+
|
|
99
|
+
### 插槽
|
|
100
|
+
|
|
101
|
+
| 插槽名 | 说明 |
|
|
102
|
+
| ------- | ------------ |
|
|
103
|
+
| default | 抽屉内容区域 |
|
|
104
|
+
|
|
105
|
+
### 方法
|
|
106
|
+
|
|
107
|
+
| 方法名 | 说明 | 参数 |
|
|
108
|
+
| ----------- | ------------ | ----------------- |
|
|
109
|
+
| showLoading | 显示加载状态 | `(text?: string)` |
|
|
110
|
+
| hideLoading | 隐藏加载状态 | - |
|
|
111
|
+
|
|
112
|
+
<script setup>
|
|
113
|
+
import DrawerBasic from '../examples/drawer/basic.vue'
|
|
114
|
+
import DrawerDirection from '../examples/drawer/direction.vue'
|
|
115
|
+
import DrawerSize from '../examples/drawer/size.vue'
|
|
116
|
+
import DrawerCustomButtons from '../examples/drawer/custom-buttons.vue'
|
|
117
|
+
import DrawerNoButtons from '../examples/drawer/no-buttons.vue'
|
|
118
|
+
import DrawerMask from '../examples/drawer/mask.vue'
|
|
119
|
+
import drawerApi from './meta/drawer'
|
|
120
|
+
|
|
121
|
+
import drawerBasicCode from '../examples/drawer/basic.vue?raw'
|
|
122
|
+
import drawerDirectionCode from '../examples/drawer/direction.vue?raw'
|
|
123
|
+
import drawerSizeCode from '../examples/drawer/size.vue?raw'
|
|
124
|
+
import drawerCustomButtonsCode from '../examples/drawer/custom-buttons.vue?raw'
|
|
125
|
+
import drawerNoButtonsCode from '../examples/drawer/no-buttons.vue?raw'
|
|
126
|
+
import drawerMaskCode from '../examples/drawer/mask.vue?raw'
|
|
127
|
+
</script>
|