@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/count.md
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
# Count 计算组件
|
|
2
|
-
|
|
3
|
-
用于根据公式自动计算数值。
|
|
4
|
-
|
|
5
|
-
## 基础用法
|
|
6
|
-
|
|
7
|
-
<Demo :source-code="countBasicCode">
|
|
8
|
-
<template #source>
|
|
9
|
-
<count-basic />
|
|
10
|
-
</template>
|
|
11
|
-
<template #description>
|
|
12
|
-
通过 `format-json` 传入计算公式。支持千分位分隔、大写转换、小数精度控制等功能。
|
|
13
|
-
</template>
|
|
14
|
-
</Demo>
|
|
15
|
-
|
|
16
|
-
## API
|
|
17
|
-
|
|
18
|
-
<ApiTable :data="countApi" componentName="count" />
|
|
19
|
-
|
|
20
|
-
<script setup>
|
|
21
|
-
import CountBasic from '../examples/count/basic.vue'
|
|
22
|
-
import countApi from './meta/count'
|
|
23
|
-
import countBasicCode from '../examples/count/basic.vue?raw'
|
|
24
|
-
</script>
|
|
1
|
+
# Count 计算组件
|
|
2
|
+
|
|
3
|
+
用于根据公式自动计算数值。
|
|
4
|
+
|
|
5
|
+
## 基础用法
|
|
6
|
+
|
|
7
|
+
<Demo :source-code="countBasicCode">
|
|
8
|
+
<template #source>
|
|
9
|
+
<count-basic />
|
|
10
|
+
</template>
|
|
11
|
+
<template #description>
|
|
12
|
+
通过 `format-json` 传入计算公式。支持千分位分隔、大写转换、小数精度控制等功能。
|
|
13
|
+
</template>
|
|
14
|
+
</Demo>
|
|
15
|
+
|
|
16
|
+
## API
|
|
17
|
+
|
|
18
|
+
<ApiTable :data="countApi" componentName="count" />
|
|
19
|
+
|
|
20
|
+
<script setup>
|
|
21
|
+
import CountBasic from '../examples/count/basic.vue'
|
|
22
|
+
import countApi from './meta/count'
|
|
23
|
+
import countBasicCode from '../examples/count/basic.vue?raw'
|
|
24
|
+
</script>
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
# DataPanel 数据面板组件
|
|
2
|
-
|
|
3
|
-
用于展示和组织数据内容的面板容器组件,提供标题、插槽等功能支持。
|
|
4
|
-
|
|
5
|
-
## 基础用法
|
|
6
|
-
|
|
7
|
-
<Demo :source-code="dataPanelBasicCode">
|
|
8
|
-
<template #source>
|
|
9
|
-
<data-panel-basic />
|
|
10
|
-
</template>
|
|
11
|
-
<template #description>
|
|
12
|
-
通过 `title` 属性设置面板标题。支持 `titleRight` 插槽在标题右侧添加额外内容。
|
|
13
|
-
</template>
|
|
14
|
-
</Demo>
|
|
15
|
-
|
|
16
|
-
## API
|
|
17
|
-
|
|
18
|
-
<ApiTable :data="dataPanelApi" componentName="data-panel" />
|
|
19
|
-
|
|
20
|
-
<script setup>
|
|
21
|
-
import DataPanelBasic from '../examples/data-panel/basic.vue'
|
|
22
|
-
import dataPanelApi from './meta/data-panel'
|
|
23
|
-
import dataPanelBasicCode from '../examples/data-panel/basic.vue?raw'
|
|
24
|
-
</script>
|
|
1
|
+
# DataPanel 数据面板组件
|
|
2
|
+
|
|
3
|
+
用于展示和组织数据内容的面板容器组件,提供标题、插槽等功能支持。
|
|
4
|
+
|
|
5
|
+
## 基础用法
|
|
6
|
+
|
|
7
|
+
<Demo :source-code="dataPanelBasicCode">
|
|
8
|
+
<template #source>
|
|
9
|
+
<data-panel-basic />
|
|
10
|
+
</template>
|
|
11
|
+
<template #description>
|
|
12
|
+
通过 `title` 属性设置面板标题。支持 `titleRight` 插槽在标题右侧添加额外内容。
|
|
13
|
+
</template>
|
|
14
|
+
</Demo>
|
|
15
|
+
|
|
16
|
+
## API
|
|
17
|
+
|
|
18
|
+
<ApiTable :data="dataPanelApi" componentName="data-panel" />
|
|
19
|
+
|
|
20
|
+
<script setup>
|
|
21
|
+
import DataPanelBasic from '../examples/data-panel/basic.vue'
|
|
22
|
+
import dataPanelApi from './meta/data-panel'
|
|
23
|
+
import dataPanelBasicCode from '../examples/data-panel/basic.vue?raw'
|
|
24
|
+
</script>
|
package/docs/components/date.md
CHANGED
|
@@ -1,76 +1,76 @@
|
|
|
1
|
-
# Date 日期选择器
|
|
2
|
-
|
|
3
|
-
用于选择或输入日期
|
|
4
|
-
|
|
5
|
-
## 基础用法
|
|
6
|
-
|
|
7
|
-
<Demo :source-code="dateBasicCode">
|
|
8
|
-
<template #source>
|
|
9
|
-
<DateBasic />
|
|
10
|
-
</template>
|
|
11
|
-
<template #description>
|
|
12
|
-
基本单位由`selectType`属性指定。通过`shortcuts`配置快捷选项,禁用日期通过`disabledDate`设置,默认是`Date`对象。
|
|
13
|
-
</template>
|
|
14
|
-
</Demo>
|
|
15
|
-
|
|
16
|
-
## 其他选择器类型
|
|
17
|
-
|
|
18
|
-
<Demo :source-code="dateTypesCode">
|
|
19
|
-
<template #source>
|
|
20
|
-
<DateTypes />
|
|
21
|
-
</template>
|
|
22
|
-
<template #description>
|
|
23
|
-
通过 `selectType` 属性可以设置不同的选择器类型,如 `year`, `month`, `week`, `dates`, `datetime`。
|
|
24
|
-
</template>
|
|
25
|
-
</Demo>
|
|
26
|
-
|
|
27
|
-
## 选择日期范围
|
|
28
|
-
|
|
29
|
-
<Demo :source-code="dateRangeCode">
|
|
30
|
-
<template #source>
|
|
31
|
-
<DateRange />
|
|
32
|
-
</template>
|
|
33
|
-
<template #description>
|
|
34
|
-
通过 `selectType` 设置为 `daterange`, `datetimerange`, `monthrange` 即可选择日期范围。
|
|
35
|
-
</template>
|
|
36
|
-
</Demo>
|
|
37
|
-
|
|
38
|
-
## 日期格式
|
|
39
|
-
|
|
40
|
-
<Demo :source-code="dateFormatCode">
|
|
41
|
-
<template #source>
|
|
42
|
-
<DateFormat />
|
|
43
|
-
</template>
|
|
44
|
-
<template #description>
|
|
45
|
-
使用 `format` 指定输入框的格式。使用 `value-format` 指定绑定值的格式。
|
|
46
|
-
</template>
|
|
47
|
-
</Demo>
|
|
48
|
-
|
|
49
|
-
## 默认显示日期
|
|
50
|
-
|
|
51
|
-
<Demo :source-code="dateDefaultValueCode">
|
|
52
|
-
<template #source>
|
|
53
|
-
<DateDefaultValue />
|
|
54
|
-
</template>
|
|
55
|
-
<template #description>
|
|
56
|
-
`defaultValue` 可选,选择器打开时默认显示的时间。`defaultTime` 范围选择时选中日期所使用的当日内具体时刻。
|
|
57
|
-
</template>
|
|
58
|
-
</Demo>
|
|
59
|
-
|
|
60
|
-
## API
|
|
61
|
-
|
|
62
|
-
<ApiTable :data="dateApi" componentName="date" />
|
|
63
|
-
|
|
64
|
-
<script setup>
|
|
65
|
-
import DateBasic from '../examples/date/basic.vue'
|
|
66
|
-
import DateTypes from '../examples/date/types.vue'
|
|
67
|
-
import DateRange from '../examples/date/range.vue'
|
|
68
|
-
import DateFormat from '../examples/date/format.vue'
|
|
69
|
-
import DateDefaultValue from '../examples/date/default-value.vue'
|
|
70
|
-
import dateApi from './meta/date'
|
|
71
|
-
import dateBasicCode from '../examples/date/basic.vue?raw'
|
|
72
|
-
import dateTypesCode from '../examples/date/types.vue?raw'
|
|
73
|
-
import dateRangeCode from '../examples/date/range.vue?raw'
|
|
74
|
-
import dateFormatCode from '../examples/date/format.vue?raw'
|
|
75
|
-
import dateDefaultValueCode from '../examples/date/default-value.vue?raw'
|
|
76
|
-
</script>
|
|
1
|
+
# Date 日期选择器
|
|
2
|
+
|
|
3
|
+
用于选择或输入日期
|
|
4
|
+
|
|
5
|
+
## 基础用法
|
|
6
|
+
|
|
7
|
+
<Demo :source-code="dateBasicCode">
|
|
8
|
+
<template #source>
|
|
9
|
+
<DateBasic />
|
|
10
|
+
</template>
|
|
11
|
+
<template #description>
|
|
12
|
+
基本单位由`selectType`属性指定。通过`shortcuts`配置快捷选项,禁用日期通过`disabledDate`设置,默认是`Date`对象。
|
|
13
|
+
</template>
|
|
14
|
+
</Demo>
|
|
15
|
+
|
|
16
|
+
## 其他选择器类型
|
|
17
|
+
|
|
18
|
+
<Demo :source-code="dateTypesCode">
|
|
19
|
+
<template #source>
|
|
20
|
+
<DateTypes />
|
|
21
|
+
</template>
|
|
22
|
+
<template #description>
|
|
23
|
+
通过 `selectType` 属性可以设置不同的选择器类型,如 `year`, `month`, `week`, `dates`, `datetime`。
|
|
24
|
+
</template>
|
|
25
|
+
</Demo>
|
|
26
|
+
|
|
27
|
+
## 选择日期范围
|
|
28
|
+
|
|
29
|
+
<Demo :source-code="dateRangeCode">
|
|
30
|
+
<template #source>
|
|
31
|
+
<DateRange />
|
|
32
|
+
</template>
|
|
33
|
+
<template #description>
|
|
34
|
+
通过 `selectType` 设置为 `daterange`, `datetimerange`, `monthrange` 即可选择日期范围。
|
|
35
|
+
</template>
|
|
36
|
+
</Demo>
|
|
37
|
+
|
|
38
|
+
## 日期格式
|
|
39
|
+
|
|
40
|
+
<Demo :source-code="dateFormatCode">
|
|
41
|
+
<template #source>
|
|
42
|
+
<DateFormat />
|
|
43
|
+
</template>
|
|
44
|
+
<template #description>
|
|
45
|
+
使用 `format` 指定输入框的格式。使用 `value-format` 指定绑定值的格式。
|
|
46
|
+
</template>
|
|
47
|
+
</Demo>
|
|
48
|
+
|
|
49
|
+
## 默认显示日期
|
|
50
|
+
|
|
51
|
+
<Demo :source-code="dateDefaultValueCode">
|
|
52
|
+
<template #source>
|
|
53
|
+
<DateDefaultValue />
|
|
54
|
+
</template>
|
|
55
|
+
<template #description>
|
|
56
|
+
`defaultValue` 可选,选择器打开时默认显示的时间。`defaultTime` 范围选择时选中日期所使用的当日内具体时刻。
|
|
57
|
+
</template>
|
|
58
|
+
</Demo>
|
|
59
|
+
|
|
60
|
+
## API
|
|
61
|
+
|
|
62
|
+
<ApiTable :data="dateApi" componentName="date" />
|
|
63
|
+
|
|
64
|
+
<script setup>
|
|
65
|
+
import DateBasic from '../examples/date/basic.vue'
|
|
66
|
+
import DateTypes from '../examples/date/types.vue'
|
|
67
|
+
import DateRange from '../examples/date/range.vue'
|
|
68
|
+
import DateFormat from '../examples/date/format.vue'
|
|
69
|
+
import DateDefaultValue from '../examples/date/default-value.vue'
|
|
70
|
+
import dateApi from './meta/date'
|
|
71
|
+
import dateBasicCode from '../examples/date/basic.vue?raw'
|
|
72
|
+
import dateTypesCode from '../examples/date/types.vue?raw'
|
|
73
|
+
import dateRangeCode from '../examples/date/range.vue?raw'
|
|
74
|
+
import dateFormatCode from '../examples/date/format.vue?raw'
|
|
75
|
+
import dateDefaultValueCode from '../examples/date/default-value.vue?raw'
|
|
76
|
+
</script>
|
|
@@ -1,112 +1,112 @@
|
|
|
1
|
-
# DialogFull 全屏弹窗
|
|
2
|
-
|
|
3
|
-
全屏模态对话框,在整个屏幕中显示内容,适用于复杂表单或大量内容展示的场景。
|
|
4
|
-
|
|
5
|
-
## 基础用法
|
|
6
|
-
|
|
7
|
-
最简单的用法。
|
|
8
|
-
|
|
9
|
-
<Demo :source-code="dialogFullBasicCode">
|
|
10
|
-
<template #source>
|
|
11
|
-
<dialog-full-basic />
|
|
12
|
-
</template>
|
|
13
|
-
<template #description>
|
|
14
|
-
基础的全屏弹窗,占据整个屏幕。使用 `v-model:visible` 控制显示隐藏。
|
|
15
|
-
</template>
|
|
16
|
-
</Demo>
|
|
17
|
-
|
|
18
|
-
## 无按钮
|
|
19
|
-
|
|
20
|
-
设置 `hasBtns` 为 `false` 可以隐藏所有操作按钮。
|
|
21
|
-
|
|
22
|
-
<Demo :source-code="dialogFullNoButtonsCode">
|
|
23
|
-
<template #source>
|
|
24
|
-
<dialog-full-no-buttons />
|
|
25
|
-
</template>
|
|
26
|
-
<template #description>
|
|
27
|
-
隐藏所有操作按钮,适用于只展示内容不需要操作的场景。
|
|
28
|
-
</template>
|
|
29
|
-
</Demo>
|
|
30
|
-
|
|
31
|
-
## 无表头
|
|
32
|
-
|
|
33
|
-
通过隐藏按钮和关闭按钮可以实现无表头效果。
|
|
34
|
-
|
|
35
|
-
<Demo :source-code="dialogFullNoHeaderCode">
|
|
36
|
-
<template #source>
|
|
37
|
-
<dialog-full-no-header />
|
|
38
|
-
</template>
|
|
39
|
-
<template #description>
|
|
40
|
-
设置 `hasBtns` 和 `showCloseBtn` 为 `false` 可以隐藏表头区域,适用于需要完全自定义布局的场景。
|
|
41
|
-
</template>
|
|
42
|
-
</Demo>
|
|
43
|
-
|
|
44
|
-
## 自定义按钮
|
|
45
|
-
|
|
46
|
-
通过 `buttons` 属性可以自定义顶部操作按钮。
|
|
47
|
-
|
|
48
|
-
<Demo :source-code="dialogFullCustomButtonsCode">
|
|
49
|
-
<template #source>
|
|
50
|
-
<dialog-full-custom-buttons />
|
|
51
|
-
</template>
|
|
52
|
-
<template #description>
|
|
53
|
-
使用 `buttons` 属性配置自定义按钮,支持设置按钮类型、样式、图标、点击事件等。
|
|
54
|
-
</template>
|
|
55
|
-
</Demo>
|
|
56
|
-
|
|
57
|
-
## 步骤弹窗
|
|
58
|
-
|
|
59
|
-
通过 `isStep` 属性可以创建带步骤条的弹窗。
|
|
60
|
-
|
|
61
|
-
<Demo :source-code="dialogFullStepsCode">
|
|
62
|
-
<template #source>
|
|
63
|
-
<dialog-full-steps />
|
|
64
|
-
</template>
|
|
65
|
-
<template #description>
|
|
66
|
-
适用于分步骤的表单或流程,支持步骤校验。使用 `v-model:stepActive` 控制当前步骤,使用 `validateSteps` 进行步骤校验。
|
|
67
|
-
</template>
|
|
68
|
-
</Demo>
|
|
69
|
-
|
|
70
|
-
## API
|
|
71
|
-
|
|
72
|
-
### 属性
|
|
73
|
-
|
|
74
|
-
<ApiTable :data="dialogFullApi" componentName="dialog-full" />
|
|
75
|
-
|
|
76
|
-
### 事件
|
|
77
|
-
|
|
78
|
-
| 事件名 | 说明 | 回调参数 |
|
|
79
|
-
| ----------------- | ---------------------- | ------------------------------------------------ |
|
|
80
|
-
| update:visible | 弹窗显示状态变化时触发 | `(visible: boolean)` |
|
|
81
|
-
| update:stepActive | 步骤变化时触发 | `(stepActive: number)` |
|
|
82
|
-
| cancel | 点击关闭按钮时触发 | - |
|
|
83
|
-
| ok | 点击确定按钮时触发 | `(showLoading: Function, hideLoading: Function)` |
|
|
84
|
-
| closed | 弹窗关闭动画结束后触发 | - |
|
|
85
|
-
|
|
86
|
-
### 插槽
|
|
87
|
-
|
|
88
|
-
| 插槽名 | 说明 |
|
|
89
|
-
| ------- | ------------ |
|
|
90
|
-
| default | 弹窗内容区域 |
|
|
91
|
-
|
|
92
|
-
### 方法
|
|
93
|
-
|
|
94
|
-
| 方法名 | 说明 | 参数 |
|
|
95
|
-
| ----------- | ------------ | ----------------- |
|
|
96
|
-
| showLoading | 显示加载状态 | `(text?: string)` |
|
|
97
|
-
| hideLoading | 隐藏加载状态 | - |
|
|
98
|
-
|
|
99
|
-
<script setup>
|
|
100
|
-
import DialogFullBasic from '../examples/dialog-full/basic.vue'
|
|
101
|
-
import DialogFullNoHeader from '../examples/dialog-full/no-header.vue'
|
|
102
|
-
import DialogFullCustomButtons from '../examples/dialog-full/custom-buttons.vue'
|
|
103
|
-
import DialogFullSteps from '../examples/dialog-full/steps.vue'
|
|
104
|
-
import DialogFullNoButtons from '../examples/dialog-full/no-buttons.vue'
|
|
105
|
-
import dialogFullApi from './meta/dialog-full'
|
|
106
|
-
|
|
107
|
-
import dialogFullBasicCode from '../examples/dialog-full/basic.vue?raw'
|
|
108
|
-
import dialogFullNoHeaderCode from '../examples/dialog-full/no-header.vue?raw'
|
|
109
|
-
import dialogFullCustomButtonsCode from '../examples/dialog-full/custom-buttons.vue?raw'
|
|
110
|
-
import dialogFullStepsCode from '../examples/dialog-full/steps.vue?raw'
|
|
111
|
-
import dialogFullNoButtonsCode from '../examples/dialog-full/no-buttons.vue?raw'
|
|
112
|
-
</script>
|
|
1
|
+
# DialogFull 全屏弹窗
|
|
2
|
+
|
|
3
|
+
全屏模态对话框,在整个屏幕中显示内容,适用于复杂表单或大量内容展示的场景。
|
|
4
|
+
|
|
5
|
+
## 基础用法
|
|
6
|
+
|
|
7
|
+
最简单的用法。
|
|
8
|
+
|
|
9
|
+
<Demo :source-code="dialogFullBasicCode">
|
|
10
|
+
<template #source>
|
|
11
|
+
<dialog-full-basic />
|
|
12
|
+
</template>
|
|
13
|
+
<template #description>
|
|
14
|
+
基础的全屏弹窗,占据整个屏幕。使用 `v-model:visible` 控制显示隐藏。
|
|
15
|
+
</template>
|
|
16
|
+
</Demo>
|
|
17
|
+
|
|
18
|
+
## 无按钮
|
|
19
|
+
|
|
20
|
+
设置 `hasBtns` 为 `false` 可以隐藏所有操作按钮。
|
|
21
|
+
|
|
22
|
+
<Demo :source-code="dialogFullNoButtonsCode">
|
|
23
|
+
<template #source>
|
|
24
|
+
<dialog-full-no-buttons />
|
|
25
|
+
</template>
|
|
26
|
+
<template #description>
|
|
27
|
+
隐藏所有操作按钮,适用于只展示内容不需要操作的场景。
|
|
28
|
+
</template>
|
|
29
|
+
</Demo>
|
|
30
|
+
|
|
31
|
+
## 无表头
|
|
32
|
+
|
|
33
|
+
通过隐藏按钮和关闭按钮可以实现无表头效果。
|
|
34
|
+
|
|
35
|
+
<Demo :source-code="dialogFullNoHeaderCode">
|
|
36
|
+
<template #source>
|
|
37
|
+
<dialog-full-no-header />
|
|
38
|
+
</template>
|
|
39
|
+
<template #description>
|
|
40
|
+
设置 `hasBtns` 和 `showCloseBtn` 为 `false` 可以隐藏表头区域,适用于需要完全自定义布局的场景。
|
|
41
|
+
</template>
|
|
42
|
+
</Demo>
|
|
43
|
+
|
|
44
|
+
## 自定义按钮
|
|
45
|
+
|
|
46
|
+
通过 `buttons` 属性可以自定义顶部操作按钮。
|
|
47
|
+
|
|
48
|
+
<Demo :source-code="dialogFullCustomButtonsCode">
|
|
49
|
+
<template #source>
|
|
50
|
+
<dialog-full-custom-buttons />
|
|
51
|
+
</template>
|
|
52
|
+
<template #description>
|
|
53
|
+
使用 `buttons` 属性配置自定义按钮,支持设置按钮类型、样式、图标、点击事件等。
|
|
54
|
+
</template>
|
|
55
|
+
</Demo>
|
|
56
|
+
|
|
57
|
+
## 步骤弹窗
|
|
58
|
+
|
|
59
|
+
通过 `isStep` 属性可以创建带步骤条的弹窗。
|
|
60
|
+
|
|
61
|
+
<Demo :source-code="dialogFullStepsCode">
|
|
62
|
+
<template #source>
|
|
63
|
+
<dialog-full-steps />
|
|
64
|
+
</template>
|
|
65
|
+
<template #description>
|
|
66
|
+
适用于分步骤的表单或流程,支持步骤校验。使用 `v-model:stepActive` 控制当前步骤,使用 `validateSteps` 进行步骤校验。
|
|
67
|
+
</template>
|
|
68
|
+
</Demo>
|
|
69
|
+
|
|
70
|
+
## API
|
|
71
|
+
|
|
72
|
+
### 属性
|
|
73
|
+
|
|
74
|
+
<ApiTable :data="dialogFullApi" componentName="dialog-full" />
|
|
75
|
+
|
|
76
|
+
### 事件
|
|
77
|
+
|
|
78
|
+
| 事件名 | 说明 | 回调参数 |
|
|
79
|
+
| ----------------- | ---------------------- | ------------------------------------------------ |
|
|
80
|
+
| update:visible | 弹窗显示状态变化时触发 | `(visible: boolean)` |
|
|
81
|
+
| update:stepActive | 步骤变化时触发 | `(stepActive: number)` |
|
|
82
|
+
| cancel | 点击关闭按钮时触发 | - |
|
|
83
|
+
| ok | 点击确定按钮时触发 | `(showLoading: Function, hideLoading: Function)` |
|
|
84
|
+
| closed | 弹窗关闭动画结束后触发 | - |
|
|
85
|
+
|
|
86
|
+
### 插槽
|
|
87
|
+
|
|
88
|
+
| 插槽名 | 说明 |
|
|
89
|
+
| ------- | ------------ |
|
|
90
|
+
| default | 弹窗内容区域 |
|
|
91
|
+
|
|
92
|
+
### 方法
|
|
93
|
+
|
|
94
|
+
| 方法名 | 说明 | 参数 |
|
|
95
|
+
| ----------- | ------------ | ----------------- |
|
|
96
|
+
| showLoading | 显示加载状态 | `(text?: string)` |
|
|
97
|
+
| hideLoading | 隐藏加载状态 | - |
|
|
98
|
+
|
|
99
|
+
<script setup>
|
|
100
|
+
import DialogFullBasic from '../examples/dialog-full/basic.vue'
|
|
101
|
+
import DialogFullNoHeader from '../examples/dialog-full/no-header.vue'
|
|
102
|
+
import DialogFullCustomButtons from '../examples/dialog-full/custom-buttons.vue'
|
|
103
|
+
import DialogFullSteps from '../examples/dialog-full/steps.vue'
|
|
104
|
+
import DialogFullNoButtons from '../examples/dialog-full/no-buttons.vue'
|
|
105
|
+
import dialogFullApi from './meta/dialog-full'
|
|
106
|
+
|
|
107
|
+
import dialogFullBasicCode from '../examples/dialog-full/basic.vue?raw'
|
|
108
|
+
import dialogFullNoHeaderCode from '../examples/dialog-full/no-header.vue?raw'
|
|
109
|
+
import dialogFullCustomButtonsCode from '../examples/dialog-full/custom-buttons.vue?raw'
|
|
110
|
+
import dialogFullStepsCode from '../examples/dialog-full/steps.vue?raw'
|
|
111
|
+
import dialogFullNoButtonsCode from '../examples/dialog-full/no-buttons.vue?raw'
|
|
112
|
+
</script>
|