@a2simcode/ui 0.0.263 → 0.0.265
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 +86 -86
- package/.cursor/skills/ui-component-helper/SKILL.md +115 -115
- package/LICENSE +53 -53
- package/README.md +156 -156
- package/dist/components/table/index.d.ts +60 -0
- package/dist/components/table/src/interface.d.ts +42 -0
- package/dist/components/table/src/table.vue.d.ts +55 -1
- package/dist/simcode-ui.es.js +4720 -4688
- 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/card-list.md +38 -38
- 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 +87 -87
- 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 +56 -56
- 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/button.ts +212 -212
- package/docs/components/meta/buttons.ts +76 -76
- package/docs/components/meta/card-list.ts +210 -210
- package/docs/components/meta/code-mirror.ts +108 -108
- package/docs/components/meta/comp.ts +236 -236
- package/docs/components/meta/date.ts +267 -267
- package/docs/components/meta/echarts.ts +64 -64
- package/docs/components/meta/form-item.ts +62 -50
- package/docs/components/meta/form.ts +181 -181
- package/docs/components/meta/input-button.ts +175 -175
- package/docs/components/meta/input-cards.ts +112 -112
- package/docs/components/meta/input-code.ts +161 -161
- package/docs/components/meta/input-color.ts +243 -243
- package/docs/components/meta/input-rows.ts +119 -119
- package/docs/components/meta/layer-form.ts +74 -74
- package/docs/components/meta/map.ts +68 -68
- package/docs/components/meta/panel.ts +152 -152
- package/docs/components/meta/radio.ts +55 -55
- package/docs/components/meta/select.ts +279 -279
- package/docs/components/meta/slider.ts +270 -270
- package/docs/components/meta/table-panel.ts +326 -326
- package/docs/components/meta/table.ts +427 -409
- package/docs/components/meta/tabs.ts +146 -146
- package/docs/components/meta/title.ts +91 -91
- package/docs/components/meta/tree-select.ts +199 -199
- package/docs/components/meta/tree.ts +225 -219
- package/docs/components/meta/vpanel.ts +19 -19
- package/docs/components/meta/workflow-viewer.ts +55 -55
- package/docs/components/number.md +124 -124
- package/docs/components/page.md +102 -102
- 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 +312 -312
- package/docs/components/table.md +495 -450
- package/docs/components/tabs.md +26 -26
- package/docs/components/title.md +24 -24
- package/docs/components/tree.md +222 -222
- 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/disabled.vue +42 -42
- 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/status.vue +34 -34
- package/docs/examples/button/type.vue +10 -10
- package/docs/examples/button-select/basic.vue +19 -19
- package/docs/examples/buttons/basic.vue +62 -62
- 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/card-list/basic.vue +70 -70
- package/docs/examples/card-list/selection-pagination.vue +69 -69
- 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 +101 -101
- 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/decorated-title/basic.vue +31 -31
- 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 +688 -688
- package/docs/examples/form/init.vue +76 -76
- package/docs/examples/form/master-detail.vue +203 -203
- package/docs/examples/form/rule-format.vue +179 -179
- package/docs/examples/form/view-table.vue +378 -378
- 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 +79 -79
- 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 +85 -85
- package/docs/examples/input-layer/render-vnode-page.vue +160 -160
- package/docs/examples/input-layer/render-vnode.vue +127 -127
- 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/code-table-model.vue +428 -428
- package/docs/examples/page/dept-user-management.vue +211 -211
- package/docs/examples/page/init.vue +87 -87
- package/docs/examples/page/log.vue +453 -453
- package/docs/examples/page/user-management.vue +313 -313
- 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 +37 -37
- 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/action-filter.vue +126 -126
- 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/checkbox-layout.vue +68 -68
- package/docs/examples/table/column-filter.vue +96 -96
- package/docs/examples/table/custom-layout.vue +115 -115
- package/docs/examples/table/custom-merge-cell.vue +206 -0
- package/docs/examples/table/dynamic-type.vue +73 -73
- package/docs/examples/table/editable.vue +262 -262
- 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/layer-form.vue +133 -133
- package/docs/examples/table/link.vue +66 -66
- package/docs/examples/table/merge-cell.vue +78 -0
- package/docs/examples/table/multiple-disabled.vue +112 -112
- package/docs/examples/table/multiple.vue +188 -188
- package/docs/examples/table/pagination.vue +151 -151
- package/docs/examples/table/row-drag.vue +67 -67
- package/docs/examples/table/row-fixed.vue +61 -0
- 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-default-expand-all.vue +60 -60
- package/docs/examples/table/tree-lazy.vue +80 -80
- package/docs/examples/table/tree-set-selection.vue +75 -75
- package/docs/examples/table-panel/basic.vue +229 -229
- package/docs/examples/table-panel/batch-operations.vue +286 -286
- package/docs/examples/table-panel/button-visibility.vue +88 -88
- package/docs/examples/table-panel/card.vue +101 -101
- package/docs/examples/table-panel/column-filter.vue +116 -116
- package/docs/examples/table-panel/filter.vue +219 -219
- package/docs/examples/table-panel/get-selection.vue +111 -111
- package/docs/examples/table-panel/mask.vue +151 -151
- package/docs/examples/table-panel/model-value.vue +87 -87
- package/docs/examples/table-panel/multiple-selection.vue +243 -243
- package/docs/examples/table-panel/pagination.vue +133 -133
- package/docs/examples/table-panel/search-list.vue +207 -207
- package/docs/examples/table-panel/sub-table-lazy.vue +118 -118
- package/docs/examples/table-panel/tree-parent-key.vue +67 -67
- package/docs/examples/tabs/basic.vue +98 -98
- package/docs/examples/time/base.vue +67 -67
- package/docs/examples/title/basic.vue +87 -87
- 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/check-strictly.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/tree-select/basic.vue +47 -47
- 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 +26 -26
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
# Editor 富文本编辑器
|
|
2
|
-
|
|
3
|
-
基于 wangeditor 的富文本编辑器组件。
|
|
4
|
-
|
|
5
|
-
## 基础用法
|
|
6
|
-
|
|
7
|
-
<Demo :source-code="editorBasicCode">
|
|
8
|
-
<template #source>
|
|
9
|
-
<editor-basic />
|
|
10
|
-
</template>
|
|
11
|
-
<template #description>
|
|
12
|
-
基础用法,支持 `v-model:value` 双向绑定。
|
|
13
|
-
</template>
|
|
14
|
-
</Demo>
|
|
15
|
-
|
|
16
|
-
## API
|
|
17
|
-
|
|
18
|
-
<ApiTable :data="editorApi" componentName="editor" />
|
|
19
|
-
|
|
20
|
-
<script setup>
|
|
21
|
-
import EditorBasic from '../examples/editor/basic.vue'
|
|
22
|
-
import editorApi from './meta/editor'
|
|
23
|
-
import editorBasicCode from '../examples/editor/basic.vue?raw'
|
|
24
|
-
</script>
|
|
1
|
+
# Editor 富文本编辑器
|
|
2
|
+
|
|
3
|
+
基于 wangeditor 的富文本编辑器组件。
|
|
4
|
+
|
|
5
|
+
## 基础用法
|
|
6
|
+
|
|
7
|
+
<Demo :source-code="editorBasicCode">
|
|
8
|
+
<template #source>
|
|
9
|
+
<editor-basic />
|
|
10
|
+
</template>
|
|
11
|
+
<template #description>
|
|
12
|
+
基础用法,支持 `v-model:value` 双向绑定。
|
|
13
|
+
</template>
|
|
14
|
+
</Demo>
|
|
15
|
+
|
|
16
|
+
## API
|
|
17
|
+
|
|
18
|
+
<ApiTable :data="editorApi" componentName="editor" />
|
|
19
|
+
|
|
20
|
+
<script setup>
|
|
21
|
+
import EditorBasic from '../examples/editor/basic.vue'
|
|
22
|
+
import editorApi from './meta/editor'
|
|
23
|
+
import editorBasicCode from '../examples/editor/basic.vue?raw'
|
|
24
|
+
</script>
|
package/docs/components/form.md
CHANGED
|
@@ -1,87 +1,87 @@
|
|
|
1
|
-
# Form 表单
|
|
2
|
-
|
|
3
|
-
`j-form` 是一个强大的动态表单组件,支持通过 Schema 配置来生成表单,提供了完整的表单验证、数据管理和事件处理能力。
|
|
4
|
-
|
|
5
|
-
## 基础用法
|
|
6
|
-
|
|
7
|
-
通过 `schema` 属性定义表单结构,`config` 属性配置表单样式。
|
|
8
|
-
|
|
9
|
-
<Demo :source-code="basicCode">
|
|
10
|
-
<template #source>
|
|
11
|
-
<basic />
|
|
12
|
-
</template>
|
|
13
|
-
<template #description>
|
|
14
|
-
使用 `j-form` 快速创建一个包含多个输入项的表单。通过 `validate` 方法进行表单验证,通过 `getFormData` 方法获取表单数据;也可以通过 `init` 方法在运行时重新加载 Schema(可选传入初始数据)。
|
|
15
|
-
</template>
|
|
16
|
-
</Demo>
|
|
17
|
-
|
|
18
|
-
## Init 方法
|
|
19
|
-
|
|
20
|
-
通过模板引用调用 `init(schema, data)`,可以在运行时重新初始化表单 Schema,并可选传入初始数据。
|
|
21
|
-
|
|
22
|
-
<Demo :source-code="initCode">
|
|
23
|
-
<template #source>
|
|
24
|
-
<init />
|
|
25
|
-
</template>
|
|
26
|
-
<template #description>
|
|
27
|
-
点击按钮切换不同的 Schema,并通过第二个参数传入初始数据。
|
|
28
|
-
</template>
|
|
29
|
-
</Demo>
|
|
30
|
-
|
|
31
|
-
## 主从表(主表 + 子表)
|
|
32
|
-
|
|
33
|
-
通过 `j-layout` 划分区域,并在 `children` 中利用 `j-table` 搭配其子级输入组件,可以实现复杂的主从表(表单 + 子表格)布局。
|
|
34
|
-
|
|
35
|
-
<Demo :source-code="masterDetailCode">
|
|
36
|
-
<template #source>
|
|
37
|
-
<master-detail />
|
|
38
|
-
</template>
|
|
39
|
-
<template #description>
|
|
40
|
-
结合 `j-layout` 布局组件实现主从表单。在子表中配置 `editConfig: { isAddBtn: true, isRemoveBtn: true }` 并提供 `addRow` 函数来管理行数据;通过 `slot: 'top'` 指定字段归属为主表区域。
|
|
41
|
-
</template>
|
|
42
|
-
</Demo>
|
|
43
|
-
|
|
44
|
-
## 表单 + 子表(规则格式)
|
|
45
|
-
|
|
46
|
-
通过 `j-table` 在表单中嵌入可编辑的子表格,适用于编码规则、格式配置等场景。
|
|
47
|
-
|
|
48
|
-
<Demo :source-code="ruleFormatCode">
|
|
49
|
-
<template #source>
|
|
50
|
-
<rule-format />
|
|
51
|
-
</template>
|
|
52
|
-
<template #description>
|
|
53
|
-
示例包含基础字段校验(必填/唯一性)以及 `j-table` 子表的可增删编辑能力。
|
|
54
|
-
</template>
|
|
55
|
-
</Demo>
|
|
56
|
-
|
|
57
|
-
## 视图列表配置
|
|
58
|
-
|
|
59
|
-
参考设计器中的配置结构(折叠面板 + 弹窗表单 + 可编辑表格),并提供一份模拟数据用于展示。
|
|
60
|
-
|
|
61
|
-
<Demo :source-code="viewTableCode">
|
|
62
|
-
<template #source>
|
|
63
|
-
<view-table />
|
|
64
|
-
</template>
|
|
65
|
-
<template #description>
|
|
66
|
-
折叠面板中包含“数据选项 / 列表设置 / 更多属性 / 状态属性”。其中“列表设置”通过 `j-layer-form` 打开弹窗,在弹窗内用 `j-table` 编辑字段列表;字段的更多配置通过表格列类型 `j-layerform` 打开二级弹层。
|
|
67
|
-
</template>
|
|
68
|
-
</Demo>
|
|
69
|
-
|
|
70
|
-
## API
|
|
71
|
-
|
|
72
|
-
<ApiTable :data="formApi" componentName="form" />
|
|
73
|
-
|
|
74
|
-
<script setup>
|
|
75
|
-
import Basic from '../examples/form/basic.vue'
|
|
76
|
-
import Init from '../examples/form/init.vue'
|
|
77
|
-
import MasterDetail from '../examples/form/master-detail.vue'
|
|
78
|
-
import RuleFormat from '../examples/form/rule-format.vue'
|
|
79
|
-
import ViewTable from '../examples/form/view-table.vue'
|
|
80
|
-
import formApi from './meta/form'
|
|
81
|
-
|
|
82
|
-
import basicCode from '../examples/form/basic.vue?raw'
|
|
83
|
-
import initCode from '../examples/form/init.vue?raw'
|
|
84
|
-
import masterDetailCode from '../examples/form/master-detail.vue?raw'
|
|
85
|
-
import ruleFormatCode from '../examples/form/rule-format.vue?raw'
|
|
86
|
-
import viewTableCode from '../examples/form/view-table.vue?raw'
|
|
87
|
-
</script>
|
|
1
|
+
# Form 表单
|
|
2
|
+
|
|
3
|
+
`j-form` 是一个强大的动态表单组件,支持通过 Schema 配置来生成表单,提供了完整的表单验证、数据管理和事件处理能力。
|
|
4
|
+
|
|
5
|
+
## 基础用法
|
|
6
|
+
|
|
7
|
+
通过 `schema` 属性定义表单结构,`config` 属性配置表单样式。
|
|
8
|
+
|
|
9
|
+
<Demo :source-code="basicCode">
|
|
10
|
+
<template #source>
|
|
11
|
+
<basic />
|
|
12
|
+
</template>
|
|
13
|
+
<template #description>
|
|
14
|
+
使用 `j-form` 快速创建一个包含多个输入项的表单。通过 `validate` 方法进行表单验证,通过 `getFormData` 方法获取表单数据;也可以通过 `init` 方法在运行时重新加载 Schema(可选传入初始数据)。
|
|
15
|
+
</template>
|
|
16
|
+
</Demo>
|
|
17
|
+
|
|
18
|
+
## Init 方法
|
|
19
|
+
|
|
20
|
+
通过模板引用调用 `init(schema, data)`,可以在运行时重新初始化表单 Schema,并可选传入初始数据。
|
|
21
|
+
|
|
22
|
+
<Demo :source-code="initCode">
|
|
23
|
+
<template #source>
|
|
24
|
+
<init />
|
|
25
|
+
</template>
|
|
26
|
+
<template #description>
|
|
27
|
+
点击按钮切换不同的 Schema,并通过第二个参数传入初始数据。
|
|
28
|
+
</template>
|
|
29
|
+
</Demo>
|
|
30
|
+
|
|
31
|
+
## 主从表(主表 + 子表)
|
|
32
|
+
|
|
33
|
+
通过 `j-layout` 划分区域,并在 `children` 中利用 `j-table` 搭配其子级输入组件,可以实现复杂的主从表(表单 + 子表格)布局。
|
|
34
|
+
|
|
35
|
+
<Demo :source-code="masterDetailCode">
|
|
36
|
+
<template #source>
|
|
37
|
+
<master-detail />
|
|
38
|
+
</template>
|
|
39
|
+
<template #description>
|
|
40
|
+
结合 `j-layout` 布局组件实现主从表单。在子表中配置 `editConfig: { isAddBtn: true, isRemoveBtn: true }` 并提供 `addRow` 函数来管理行数据;通过 `slot: 'top'` 指定字段归属为主表区域。
|
|
41
|
+
</template>
|
|
42
|
+
</Demo>
|
|
43
|
+
|
|
44
|
+
## 表单 + 子表(规则格式)
|
|
45
|
+
|
|
46
|
+
通过 `j-table` 在表单中嵌入可编辑的子表格,适用于编码规则、格式配置等场景。
|
|
47
|
+
|
|
48
|
+
<Demo :source-code="ruleFormatCode">
|
|
49
|
+
<template #source>
|
|
50
|
+
<rule-format />
|
|
51
|
+
</template>
|
|
52
|
+
<template #description>
|
|
53
|
+
示例包含基础字段校验(必填/唯一性)以及 `j-table` 子表的可增删编辑能力。
|
|
54
|
+
</template>
|
|
55
|
+
</Demo>
|
|
56
|
+
|
|
57
|
+
## 视图列表配置
|
|
58
|
+
|
|
59
|
+
参考设计器中的配置结构(折叠面板 + 弹窗表单 + 可编辑表格),并提供一份模拟数据用于展示。
|
|
60
|
+
|
|
61
|
+
<Demo :source-code="viewTableCode">
|
|
62
|
+
<template #source>
|
|
63
|
+
<view-table />
|
|
64
|
+
</template>
|
|
65
|
+
<template #description>
|
|
66
|
+
折叠面板中包含“数据选项 / 列表设置 / 更多属性 / 状态属性”。其中“列表设置”通过 `j-layer-form` 打开弹窗,在弹窗内用 `j-table` 编辑字段列表;字段的更多配置通过表格列类型 `j-layerform` 打开二级弹层。
|
|
67
|
+
</template>
|
|
68
|
+
</Demo>
|
|
69
|
+
|
|
70
|
+
## API
|
|
71
|
+
|
|
72
|
+
<ApiTable :data="formApi" componentName="form" />
|
|
73
|
+
|
|
74
|
+
<script setup>
|
|
75
|
+
import Basic from '../examples/form/basic.vue'
|
|
76
|
+
import Init from '../examples/form/init.vue'
|
|
77
|
+
import MasterDetail from '../examples/form/master-detail.vue'
|
|
78
|
+
import RuleFormat from '../examples/form/rule-format.vue'
|
|
79
|
+
import ViewTable from '../examples/form/view-table.vue'
|
|
80
|
+
import formApi from './meta/form'
|
|
81
|
+
|
|
82
|
+
import basicCode from '../examples/form/basic.vue?raw'
|
|
83
|
+
import initCode from '../examples/form/init.vue?raw'
|
|
84
|
+
import masterDetailCode from '../examples/form/master-detail.vue?raw'
|
|
85
|
+
import ruleFormatCode from '../examples/form/rule-format.vue?raw'
|
|
86
|
+
import viewTableCode from '../examples/form/view-table.vue?raw'
|
|
87
|
+
</script>
|
package/docs/components/guid.md
CHANGED
|
@@ -1,39 +1,39 @@
|
|
|
1
|
-
# GUID 全局唯一标识符
|
|
2
|
-
|
|
3
|
-
用于生成和展示全局唯一标识符(GUID/UUID)。当不指定值时,组件会自动生成一个UUID,这在创建新记录或需要唯一标识时非常有用。
|
|
4
|
-
|
|
5
|
-
## 基础用法
|
|
6
|
-
|
|
7
|
-
<Demo :source-code="guidBasicCode">
|
|
8
|
-
<template #source>
|
|
9
|
-
<guid-basic />
|
|
10
|
-
</template>
|
|
11
|
-
<template #description>
|
|
12
|
-
自动生成UUID,如果需要指定特定的GUID值,可以通过 v-model 绑定。
|
|
13
|
-
</template>
|
|
14
|
-
</Demo>
|
|
15
|
-
|
|
16
|
-
## 不同尺寸
|
|
17
|
-
|
|
18
|
-
Guid 组件提供三种尺寸。
|
|
19
|
-
|
|
20
|
-
<Demo :source-code="guidSizeCode">
|
|
21
|
-
<template #source>
|
|
22
|
-
<guid-size />
|
|
23
|
-
</template>
|
|
24
|
-
<template #description>
|
|
25
|
-
使用 size 属性改变组件大小。除了默认大小外,还有另外两个选项:large, small。
|
|
26
|
-
</template>
|
|
27
|
-
</Demo>
|
|
28
|
-
|
|
29
|
-
## API
|
|
30
|
-
|
|
31
|
-
<ApiTable :data="guidApi" componentName="guid" />
|
|
32
|
-
|
|
33
|
-
<script setup>
|
|
34
|
-
import GuidBasic from '../examples/guid/basic.vue'
|
|
35
|
-
import GuidSize from '../examples/guid/size.vue'
|
|
36
|
-
import guidApi from './meta/guid'
|
|
37
|
-
import guidBasicCode from '../examples/guid/basic.vue?raw'
|
|
38
|
-
import guidSizeCode from '../examples/guid/size.vue?raw'
|
|
39
|
-
</script>
|
|
1
|
+
# GUID 全局唯一标识符
|
|
2
|
+
|
|
3
|
+
用于生成和展示全局唯一标识符(GUID/UUID)。当不指定值时,组件会自动生成一个UUID,这在创建新记录或需要唯一标识时非常有用。
|
|
4
|
+
|
|
5
|
+
## 基础用法
|
|
6
|
+
|
|
7
|
+
<Demo :source-code="guidBasicCode">
|
|
8
|
+
<template #source>
|
|
9
|
+
<guid-basic />
|
|
10
|
+
</template>
|
|
11
|
+
<template #description>
|
|
12
|
+
自动生成UUID,如果需要指定特定的GUID值,可以通过 v-model 绑定。
|
|
13
|
+
</template>
|
|
14
|
+
</Demo>
|
|
15
|
+
|
|
16
|
+
## 不同尺寸
|
|
17
|
+
|
|
18
|
+
Guid 组件提供三种尺寸。
|
|
19
|
+
|
|
20
|
+
<Demo :source-code="guidSizeCode">
|
|
21
|
+
<template #source>
|
|
22
|
+
<guid-size />
|
|
23
|
+
</template>
|
|
24
|
+
<template #description>
|
|
25
|
+
使用 size 属性改变组件大小。除了默认大小外,还有另外两个选项:large, small。
|
|
26
|
+
</template>
|
|
27
|
+
</Demo>
|
|
28
|
+
|
|
29
|
+
## API
|
|
30
|
+
|
|
31
|
+
<ApiTable :data="guidApi" componentName="guid" />
|
|
32
|
+
|
|
33
|
+
<script setup>
|
|
34
|
+
import GuidBasic from '../examples/guid/basic.vue'
|
|
35
|
+
import GuidSize from '../examples/guid/size.vue'
|
|
36
|
+
import guidApi from './meta/guid'
|
|
37
|
+
import guidBasicCode from '../examples/guid/basic.vue?raw'
|
|
38
|
+
import guidSizeCode from '../examples/guid/size.vue?raw'
|
|
39
|
+
</script>
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
# Hpanel 水平布局
|
|
2
|
-
|
|
3
|
-
用于水平排列内容的面板,支持左、中(主内容)、右三个区域。
|
|
4
|
-
|
|
5
|
-
## 基础用法
|
|
6
|
-
|
|
7
|
-
<Demo :source-code="hpanelBasicCode">
|
|
8
|
-
<template #source>
|
|
9
|
-
<hpanel-basic />
|
|
10
|
-
</template>
|
|
11
|
-
<template #description>
|
|
12
|
-
使用 `left`、`default` 和 `right` 插槽来定义面板的不同部分。
|
|
13
|
-
</template>
|
|
14
|
-
</Demo>
|
|
15
|
-
|
|
16
|
-
## API
|
|
17
|
-
|
|
18
|
-
<ApiTable :data="hpanelApi" componentName="hpanel" />
|
|
19
|
-
|
|
20
|
-
<script setup>
|
|
21
|
-
import HpanelBasic from '../examples/hpanel/basic.vue'
|
|
22
|
-
import hpanelApi from './meta/hpanel'
|
|
23
|
-
import hpanelBasicCode from '../examples/hpanel/basic.vue?raw'
|
|
24
|
-
</script>
|
|
1
|
+
# Hpanel 水平布局
|
|
2
|
+
|
|
3
|
+
用于水平排列内容的面板,支持左、中(主内容)、右三个区域。
|
|
4
|
+
|
|
5
|
+
## 基础用法
|
|
6
|
+
|
|
7
|
+
<Demo :source-code="hpanelBasicCode">
|
|
8
|
+
<template #source>
|
|
9
|
+
<hpanel-basic />
|
|
10
|
+
</template>
|
|
11
|
+
<template #description>
|
|
12
|
+
使用 `left`、`default` 和 `right` 插槽来定义面板的不同部分。
|
|
13
|
+
</template>
|
|
14
|
+
</Demo>
|
|
15
|
+
|
|
16
|
+
## API
|
|
17
|
+
|
|
18
|
+
<ApiTable :data="hpanelApi" componentName="hpanel" />
|
|
19
|
+
|
|
20
|
+
<script setup>
|
|
21
|
+
import HpanelBasic from '../examples/hpanel/basic.vue'
|
|
22
|
+
import hpanelApi from './meta/hpanel'
|
|
23
|
+
import hpanelBasicCode from '../examples/hpanel/basic.vue?raw'
|
|
24
|
+
</script>
|
package/docs/components/icon.md
CHANGED
|
@@ -1,56 +1,56 @@
|
|
|
1
|
-
# Icon 图标
|
|
2
|
-
|
|
3
|
-
语义化的矢量图形。使用了 [@iconify/vue](https://iconify.design/docs/icon-components/vue/)。
|
|
4
|
-
|
|
5
|
-
## 基础用法
|
|
6
|
-
|
|
7
|
-
通过 `icon` 属性来指定图标名称。你可以从 [Iconify](https://icon-sets.iconify.design/) 搜索成千上万个图标。
|
|
8
|
-
|
|
9
|
-
<Demo :source-code="iconBasicCode">
|
|
10
|
-
<template #source>
|
|
11
|
-
<icon-basic />
|
|
12
|
-
</template>
|
|
13
|
-
<template #description>
|
|
14
|
-
使用 icon、color 来定义图标和颜色。
|
|
15
|
-
</template>
|
|
16
|
-
</Demo>
|
|
17
|
-
|
|
18
|
-
## 不同尺寸
|
|
19
|
-
|
|
20
|
-
使用 `size` 属性来配置图标尺寸。
|
|
21
|
-
|
|
22
|
-
<Demo :source-code="iconSizeCode">
|
|
23
|
-
<template #source>
|
|
24
|
-
<icon-size />
|
|
25
|
-
</template>
|
|
26
|
-
<template #description>
|
|
27
|
-
size 接受数字(单位为px)。
|
|
28
|
-
</template>
|
|
29
|
-
</Demo>
|
|
30
|
-
|
|
31
|
-
## 旋转与翻转
|
|
32
|
-
|
|
33
|
-
使用 `rotate` 和 `flip` 属性来调整图标方向。
|
|
34
|
-
|
|
35
|
-
<Demo :source-code="iconRotateFlipCode">
|
|
36
|
-
<template #source>
|
|
37
|
-
<icon-rotate-flip />
|
|
38
|
-
</template>
|
|
39
|
-
<template #description>
|
|
40
|
-
使用 rotate 定义角度,使用 flip 定义翻转方向。
|
|
41
|
-
</template>
|
|
42
|
-
</Demo>
|
|
43
|
-
|
|
44
|
-
## API
|
|
45
|
-
|
|
46
|
-
<ApiTable :data="iconApi" componentName="icon" />
|
|
47
|
-
|
|
48
|
-
<script setup>
|
|
49
|
-
import IconBasic from '../examples/icon/basic.vue'
|
|
50
|
-
import IconSize from '../examples/icon/size.vue'
|
|
51
|
-
import IconRotateFlip from '../examples/icon/rotate-flip.vue'
|
|
52
|
-
import iconApi from './meta/icon'
|
|
53
|
-
import iconBasicCode from '../examples/icon/basic.vue?raw'
|
|
54
|
-
import iconSizeCode from '../examples/icon/size.vue?raw'
|
|
55
|
-
import iconRotateFlipCode from '../examples/icon/rotate-flip.vue?raw'
|
|
56
|
-
</script>
|
|
1
|
+
# Icon 图标
|
|
2
|
+
|
|
3
|
+
语义化的矢量图形。使用了 [@iconify/vue](https://iconify.design/docs/icon-components/vue/)。
|
|
4
|
+
|
|
5
|
+
## 基础用法
|
|
6
|
+
|
|
7
|
+
通过 `icon` 属性来指定图标名称。你可以从 [Iconify](https://icon-sets.iconify.design/) 搜索成千上万个图标。
|
|
8
|
+
|
|
9
|
+
<Demo :source-code="iconBasicCode">
|
|
10
|
+
<template #source>
|
|
11
|
+
<icon-basic />
|
|
12
|
+
</template>
|
|
13
|
+
<template #description>
|
|
14
|
+
使用 icon、color 来定义图标和颜色。
|
|
15
|
+
</template>
|
|
16
|
+
</Demo>
|
|
17
|
+
|
|
18
|
+
## 不同尺寸
|
|
19
|
+
|
|
20
|
+
使用 `size` 属性来配置图标尺寸。
|
|
21
|
+
|
|
22
|
+
<Demo :source-code="iconSizeCode">
|
|
23
|
+
<template #source>
|
|
24
|
+
<icon-size />
|
|
25
|
+
</template>
|
|
26
|
+
<template #description>
|
|
27
|
+
size 接受数字(单位为px)。
|
|
28
|
+
</template>
|
|
29
|
+
</Demo>
|
|
30
|
+
|
|
31
|
+
## 旋转与翻转
|
|
32
|
+
|
|
33
|
+
使用 `rotate` 和 `flip` 属性来调整图标方向。
|
|
34
|
+
|
|
35
|
+
<Demo :source-code="iconRotateFlipCode">
|
|
36
|
+
<template #source>
|
|
37
|
+
<icon-rotate-flip />
|
|
38
|
+
</template>
|
|
39
|
+
<template #description>
|
|
40
|
+
使用 rotate 定义角度,使用 flip 定义翻转方向。
|
|
41
|
+
</template>
|
|
42
|
+
</Demo>
|
|
43
|
+
|
|
44
|
+
## API
|
|
45
|
+
|
|
46
|
+
<ApiTable :data="iconApi" componentName="icon" />
|
|
47
|
+
|
|
48
|
+
<script setup>
|
|
49
|
+
import IconBasic from '../examples/icon/basic.vue'
|
|
50
|
+
import IconSize from '../examples/icon/size.vue'
|
|
51
|
+
import IconRotateFlip from '../examples/icon/rotate-flip.vue'
|
|
52
|
+
import iconApi from './meta/icon'
|
|
53
|
+
import iconBasicCode from '../examples/icon/basic.vue?raw'
|
|
54
|
+
import iconSizeCode from '../examples/icon/size.vue?raw'
|
|
55
|
+
import iconRotateFlipCode from '../examples/icon/rotate-flip.vue?raw'
|
|
56
|
+
</script>
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
# InputButton 输入按钮
|
|
2
|
-
|
|
3
|
-
通过点击按钮打开一个弹窗层,用于输入或选择复杂的数据。
|
|
4
|
-
|
|
5
|
-
## 基础用法
|
|
6
|
-
|
|
7
|
-
<Demo :source-code="inputButtonBasicCode">
|
|
8
|
-
<template #source>
|
|
9
|
-
<input-button-basic />
|
|
10
|
-
</template>
|
|
11
|
-
<template #description>
|
|
12
|
-
点击按钮打开弹窗,在弹窗中完成输入后点击确定。
|
|
13
|
-
</template>
|
|
14
|
-
</Demo>
|
|
15
|
-
|
|
16
|
-
## API
|
|
17
|
-
|
|
18
|
-
<ApiTable :data="inputButtonApi" componentName="input-button" />
|
|
19
|
-
|
|
20
|
-
<script setup>
|
|
21
|
-
import InputButtonBasic from '../examples/input-button/basic.vue'
|
|
22
|
-
import inputButtonApi from './meta/input-button'
|
|
23
|
-
import inputButtonBasicCode from '../examples/input-button/basic.vue?raw'
|
|
24
|
-
</script>
|
|
1
|
+
# InputButton 输入按钮
|
|
2
|
+
|
|
3
|
+
通过点击按钮打开一个弹窗层,用于输入或选择复杂的数据。
|
|
4
|
+
|
|
5
|
+
## 基础用法
|
|
6
|
+
|
|
7
|
+
<Demo :source-code="inputButtonBasicCode">
|
|
8
|
+
<template #source>
|
|
9
|
+
<input-button-basic />
|
|
10
|
+
</template>
|
|
11
|
+
<template #description>
|
|
12
|
+
点击按钮打开弹窗,在弹窗中完成输入后点击确定。
|
|
13
|
+
</template>
|
|
14
|
+
</Demo>
|
|
15
|
+
|
|
16
|
+
## API
|
|
17
|
+
|
|
18
|
+
<ApiTable :data="inputButtonApi" componentName="input-button" />
|
|
19
|
+
|
|
20
|
+
<script setup>
|
|
21
|
+
import InputButtonBasic from '../examples/input-button/basic.vue'
|
|
22
|
+
import inputButtonApi from './meta/input-button'
|
|
23
|
+
import inputButtonBasicCode from '../examples/input-button/basic.vue?raw'
|
|
24
|
+
</script>
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
# InputCode 脚本输入框
|
|
2
|
-
|
|
3
|
-
通过点击按钮打开一个集成了脚本编辑器的弹窗,用于编写代码或脚本内容。
|
|
4
|
-
|
|
5
|
-
## 基础用法
|
|
6
|
-
|
|
7
|
-
<Demo :source-code="inputCodeBasicCode">
|
|
8
|
-
<template #source>
|
|
9
|
-
<input-code-basic />
|
|
10
|
-
</template>
|
|
11
|
-
<template #description>
|
|
12
|
-
点击按钮打开代码编辑器,支持多种语言模式和示例代码对比。
|
|
13
|
-
</template>
|
|
14
|
-
</Demo>
|
|
15
|
-
|
|
16
|
-
## API
|
|
17
|
-
|
|
18
|
-
<ApiTable :data="inputCodeApi" componentName="input-code" />
|
|
19
|
-
|
|
20
|
-
<script setup>
|
|
21
|
-
import InputCodeBasic from '../examples/input-code/basic.vue'
|
|
22
|
-
import inputCodeApi from './meta/input-code'
|
|
23
|
-
import inputCodeBasicCode from '../examples/input-code/basic.vue?raw'
|
|
24
|
-
</script>
|
|
1
|
+
# InputCode 脚本输入框
|
|
2
|
+
|
|
3
|
+
通过点击按钮打开一个集成了脚本编辑器的弹窗,用于编写代码或脚本内容。
|
|
4
|
+
|
|
5
|
+
## 基础用法
|
|
6
|
+
|
|
7
|
+
<Demo :source-code="inputCodeBasicCode">
|
|
8
|
+
<template #source>
|
|
9
|
+
<input-code-basic />
|
|
10
|
+
</template>
|
|
11
|
+
<template #description>
|
|
12
|
+
点击按钮打开代码编辑器,支持多种语言模式和示例代码对比。
|
|
13
|
+
</template>
|
|
14
|
+
</Demo>
|
|
15
|
+
|
|
16
|
+
## API
|
|
17
|
+
|
|
18
|
+
<ApiTable :data="inputCodeApi" componentName="input-code" />
|
|
19
|
+
|
|
20
|
+
<script setup>
|
|
21
|
+
import InputCodeBasic from '../examples/input-code/basic.vue'
|
|
22
|
+
import inputCodeApi from './meta/input-code'
|
|
23
|
+
import inputCodeBasicCode from '../examples/input-code/basic.vue?raw'
|
|
24
|
+
</script>
|