@a2simcode/ui 0.0.257 → 0.0.258
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/simcode-ui.es.js +4184 -4157
- 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 +50 -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 +409 -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 +219 -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 +450 -450
- 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/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 +686 -686
- 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/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/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/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/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 +23 -23
|
@@ -1,114 +1,114 @@
|
|
|
1
|
-
# CascaderSelect 级联选择
|
|
2
|
-
|
|
3
|
-
当选项具有层级关系时,使用级联选择器展示并选择内容。
|
|
4
|
-
|
|
5
|
-
## 基础用法
|
|
6
|
-
|
|
7
|
-
<Demo :source-code="cascaderSelectBasicCode">
|
|
8
|
-
<template #source>
|
|
9
|
-
<cascader-select-basic />
|
|
10
|
-
</template>
|
|
11
|
-
<template #description>
|
|
12
|
-
使用 v-model 实现双向数据绑定。
|
|
13
|
-
</template>
|
|
14
|
-
</Demo>
|
|
15
|
-
|
|
16
|
-
## 禁用和只读
|
|
17
|
-
|
|
18
|
-
通过 `disabled` 和 `readonly` 属性指定级联选择器的状态。
|
|
19
|
-
|
|
20
|
-
<Demo :source-code="cascaderSelectDisabledCode">
|
|
21
|
-
<template #source>
|
|
22
|
-
<cascader-select-disabled />
|
|
23
|
-
</template>
|
|
24
|
-
<template #description>
|
|
25
|
-
通过 disabled 属性指定是否禁用级联选择器,通过 readonly 属性指定是否只读。
|
|
26
|
-
</template>
|
|
27
|
-
</Demo>
|
|
28
|
-
|
|
29
|
-
## 可清除
|
|
30
|
-
|
|
31
|
-
使用 `clearable` 属性即可得到一个可清除的级联选择器。
|
|
32
|
-
|
|
33
|
-
<Demo :source-code="cascaderSelectClearableCode">
|
|
34
|
-
<template #source>
|
|
35
|
-
<cascader-select-clearable />
|
|
36
|
-
</template>
|
|
37
|
-
<template #description>
|
|
38
|
-
设置 `clearable` 属性为 `true` 即可显示清除按钮。
|
|
39
|
-
</template>
|
|
40
|
-
</Demo>
|
|
41
|
-
|
|
42
|
-
## 可搜索
|
|
43
|
-
|
|
44
|
-
使用 `filterable` 属性即可启用搜索功能。
|
|
45
|
-
|
|
46
|
-
<Demo :source-code="cascaderSelectFilterableCode">
|
|
47
|
-
<template #source>
|
|
48
|
-
<cascader-select-filterable />
|
|
49
|
-
</template>
|
|
50
|
-
<template #description>
|
|
51
|
-
设置 `filterable` 属性为 `true` 即可启用搜索功能。
|
|
52
|
-
</template>
|
|
53
|
-
</Demo>
|
|
54
|
-
|
|
55
|
-
## 多选
|
|
56
|
-
|
|
57
|
-
使用 `multiple` 属性即可启用多选功能。
|
|
58
|
-
|
|
59
|
-
<Demo :source-code="cascaderSelectMultipleCode">
|
|
60
|
-
<template #source>
|
|
61
|
-
<cascader-select-multiple />
|
|
62
|
-
</template>
|
|
63
|
-
<template #description>
|
|
64
|
-
设置 `multiple` 属性为 `true` 即可启用多选功能。
|
|
65
|
-
</template>
|
|
66
|
-
</Demo>
|
|
67
|
-
|
|
68
|
-
## 自定义插槽
|
|
69
|
-
|
|
70
|
-
使用各个插槽来自定义级联选择器的内容。
|
|
71
|
-
|
|
72
|
-
<Demo :source-code="cascaderSelectSlotCode">
|
|
73
|
-
<template #source>
|
|
74
|
-
<cascader-select-slot />
|
|
75
|
-
</template>
|
|
76
|
-
<template #description>
|
|
77
|
-
通过 `#default` 插槽自定义节点内容,通过 `#empty` 插槽自定义空状态。
|
|
78
|
-
</template>
|
|
79
|
-
</Demo>
|
|
80
|
-
|
|
81
|
-
## 方法调用
|
|
82
|
-
|
|
83
|
-
通过模板引用访问组件的暴露方法。
|
|
84
|
-
|
|
85
|
-
<Demo :source-code="cascaderSelectMethodsCode">
|
|
86
|
-
<template #source>
|
|
87
|
-
<cascader-select-methods />
|
|
88
|
-
</template>
|
|
89
|
-
<template #description>
|
|
90
|
-
使用 `getCheckedNodes()` 获取选中节点,使用 `clearCheckedNodes()` 清空选中节点。
|
|
91
|
-
</template>
|
|
92
|
-
</Demo>
|
|
93
|
-
|
|
94
|
-
## API
|
|
95
|
-
|
|
96
|
-
<ApiTable :data="cascaderSelectApi" componentName="cascader-select" />
|
|
97
|
-
|
|
98
|
-
<script setup>
|
|
99
|
-
import CascaderSelectBasic from '../examples/cascader-select/basic.vue'
|
|
100
|
-
import CascaderSelectDisabled from '../examples/cascader-select/disabled.vue'
|
|
101
|
-
import CascaderSelectClearable from '../examples/cascader-select/clearable.vue'
|
|
102
|
-
import CascaderSelectFilterable from '../examples/cascader-select/filterable.vue'
|
|
103
|
-
import CascaderSelectMultiple from '../examples/cascader-select/multiple.vue'
|
|
104
|
-
import CascaderSelectSlot from '../examples/cascader-select/slot.vue'
|
|
105
|
-
import CascaderSelectMethods from '../examples/cascader-select/methods.vue'
|
|
106
|
-
import cascaderSelectApi from './meta/cascader-select'
|
|
107
|
-
import cascaderSelectBasicCode from '../examples/cascader-select/basic.vue?raw'
|
|
108
|
-
import cascaderSelectDisabledCode from '../examples/cascader-select/disabled.vue?raw'
|
|
109
|
-
import cascaderSelectClearableCode from '../examples/cascader-select/clearable.vue?raw'
|
|
110
|
-
import cascaderSelectFilterableCode from '../examples/cascader-select/filterable.vue?raw'
|
|
111
|
-
import cascaderSelectMultipleCode from '../examples/cascader-select/multiple.vue?raw'
|
|
112
|
-
import cascaderSelectSlotCode from '../examples/cascader-select/slot.vue?raw'
|
|
113
|
-
import cascaderSelectMethodsCode from '../examples/cascader-select/methods.vue?raw'
|
|
114
|
-
</script>
|
|
1
|
+
# CascaderSelect 级联选择
|
|
2
|
+
|
|
3
|
+
当选项具有层级关系时,使用级联选择器展示并选择内容。
|
|
4
|
+
|
|
5
|
+
## 基础用法
|
|
6
|
+
|
|
7
|
+
<Demo :source-code="cascaderSelectBasicCode">
|
|
8
|
+
<template #source>
|
|
9
|
+
<cascader-select-basic />
|
|
10
|
+
</template>
|
|
11
|
+
<template #description>
|
|
12
|
+
使用 v-model 实现双向数据绑定。
|
|
13
|
+
</template>
|
|
14
|
+
</Demo>
|
|
15
|
+
|
|
16
|
+
## 禁用和只读
|
|
17
|
+
|
|
18
|
+
通过 `disabled` 和 `readonly` 属性指定级联选择器的状态。
|
|
19
|
+
|
|
20
|
+
<Demo :source-code="cascaderSelectDisabledCode">
|
|
21
|
+
<template #source>
|
|
22
|
+
<cascader-select-disabled />
|
|
23
|
+
</template>
|
|
24
|
+
<template #description>
|
|
25
|
+
通过 disabled 属性指定是否禁用级联选择器,通过 readonly 属性指定是否只读。
|
|
26
|
+
</template>
|
|
27
|
+
</Demo>
|
|
28
|
+
|
|
29
|
+
## 可清除
|
|
30
|
+
|
|
31
|
+
使用 `clearable` 属性即可得到一个可清除的级联选择器。
|
|
32
|
+
|
|
33
|
+
<Demo :source-code="cascaderSelectClearableCode">
|
|
34
|
+
<template #source>
|
|
35
|
+
<cascader-select-clearable />
|
|
36
|
+
</template>
|
|
37
|
+
<template #description>
|
|
38
|
+
设置 `clearable` 属性为 `true` 即可显示清除按钮。
|
|
39
|
+
</template>
|
|
40
|
+
</Demo>
|
|
41
|
+
|
|
42
|
+
## 可搜索
|
|
43
|
+
|
|
44
|
+
使用 `filterable` 属性即可启用搜索功能。
|
|
45
|
+
|
|
46
|
+
<Demo :source-code="cascaderSelectFilterableCode">
|
|
47
|
+
<template #source>
|
|
48
|
+
<cascader-select-filterable />
|
|
49
|
+
</template>
|
|
50
|
+
<template #description>
|
|
51
|
+
设置 `filterable` 属性为 `true` 即可启用搜索功能。
|
|
52
|
+
</template>
|
|
53
|
+
</Demo>
|
|
54
|
+
|
|
55
|
+
## 多选
|
|
56
|
+
|
|
57
|
+
使用 `multiple` 属性即可启用多选功能。
|
|
58
|
+
|
|
59
|
+
<Demo :source-code="cascaderSelectMultipleCode">
|
|
60
|
+
<template #source>
|
|
61
|
+
<cascader-select-multiple />
|
|
62
|
+
</template>
|
|
63
|
+
<template #description>
|
|
64
|
+
设置 `multiple` 属性为 `true` 即可启用多选功能。
|
|
65
|
+
</template>
|
|
66
|
+
</Demo>
|
|
67
|
+
|
|
68
|
+
## 自定义插槽
|
|
69
|
+
|
|
70
|
+
使用各个插槽来自定义级联选择器的内容。
|
|
71
|
+
|
|
72
|
+
<Demo :source-code="cascaderSelectSlotCode">
|
|
73
|
+
<template #source>
|
|
74
|
+
<cascader-select-slot />
|
|
75
|
+
</template>
|
|
76
|
+
<template #description>
|
|
77
|
+
通过 `#default` 插槽自定义节点内容,通过 `#empty` 插槽自定义空状态。
|
|
78
|
+
</template>
|
|
79
|
+
</Demo>
|
|
80
|
+
|
|
81
|
+
## 方法调用
|
|
82
|
+
|
|
83
|
+
通过模板引用访问组件的暴露方法。
|
|
84
|
+
|
|
85
|
+
<Demo :source-code="cascaderSelectMethodsCode">
|
|
86
|
+
<template #source>
|
|
87
|
+
<cascader-select-methods />
|
|
88
|
+
</template>
|
|
89
|
+
<template #description>
|
|
90
|
+
使用 `getCheckedNodes()` 获取选中节点,使用 `clearCheckedNodes()` 清空选中节点。
|
|
91
|
+
</template>
|
|
92
|
+
</Demo>
|
|
93
|
+
|
|
94
|
+
## API
|
|
95
|
+
|
|
96
|
+
<ApiTable :data="cascaderSelectApi" componentName="cascader-select" />
|
|
97
|
+
|
|
98
|
+
<script setup>
|
|
99
|
+
import CascaderSelectBasic from '../examples/cascader-select/basic.vue'
|
|
100
|
+
import CascaderSelectDisabled from '../examples/cascader-select/disabled.vue'
|
|
101
|
+
import CascaderSelectClearable from '../examples/cascader-select/clearable.vue'
|
|
102
|
+
import CascaderSelectFilterable from '../examples/cascader-select/filterable.vue'
|
|
103
|
+
import CascaderSelectMultiple from '../examples/cascader-select/multiple.vue'
|
|
104
|
+
import CascaderSelectSlot from '../examples/cascader-select/slot.vue'
|
|
105
|
+
import CascaderSelectMethods from '../examples/cascader-select/methods.vue'
|
|
106
|
+
import cascaderSelectApi from './meta/cascader-select'
|
|
107
|
+
import cascaderSelectBasicCode from '../examples/cascader-select/basic.vue?raw'
|
|
108
|
+
import cascaderSelectDisabledCode from '../examples/cascader-select/disabled.vue?raw'
|
|
109
|
+
import cascaderSelectClearableCode from '../examples/cascader-select/clearable.vue?raw'
|
|
110
|
+
import cascaderSelectFilterableCode from '../examples/cascader-select/filterable.vue?raw'
|
|
111
|
+
import cascaderSelectMultipleCode from '../examples/cascader-select/multiple.vue?raw'
|
|
112
|
+
import cascaderSelectSlotCode from '../examples/cascader-select/slot.vue?raw'
|
|
113
|
+
import cascaderSelectMethodsCode from '../examples/cascader-select/methods.vue?raw'
|
|
114
|
+
</script>
|
|
@@ -1,114 +1,114 @@
|
|
|
1
|
-
# Checkbox 复选框
|
|
2
|
-
|
|
3
|
-
复选框组件,用于多项选择。
|
|
4
|
-
|
|
5
|
-
## 基础用法
|
|
6
|
-
|
|
7
|
-
<Demo :source-code="checkboxBasicCode">
|
|
8
|
-
<template #source>
|
|
9
|
-
<checkbox-basic />
|
|
10
|
-
</template>
|
|
11
|
-
<template #description>
|
|
12
|
-
使用 v-model 实现双向数据绑定。
|
|
13
|
-
</template>
|
|
14
|
-
</Demo>
|
|
15
|
-
|
|
16
|
-
## 不同尺寸
|
|
17
|
-
|
|
18
|
-
Checkbox 组件提供三种尺寸。
|
|
19
|
-
|
|
20
|
-
<Demo :source-code="checkboxSizeCode">
|
|
21
|
-
<template #source>
|
|
22
|
-
<checkbox-size />
|
|
23
|
-
</template>
|
|
24
|
-
<template #description>
|
|
25
|
-
使用 size 属性改变复选框大小。除了默认大小外,还有另外两个选项: large, small。
|
|
26
|
-
</template>
|
|
27
|
-
</Demo>
|
|
28
|
-
|
|
29
|
-
## 禁用
|
|
30
|
-
|
|
31
|
-
通过 `disabled` 和 `readonly` 属性指定复选框的状态。
|
|
32
|
-
|
|
33
|
-
<Demo :source-code="checkboxDisabledCode">
|
|
34
|
-
<template #source>
|
|
35
|
-
<checkbox-disabled />
|
|
36
|
-
</template>
|
|
37
|
-
<template #description>
|
|
38
|
-
通过 disabled 属性指定是否禁用 checkbox 组件,通过 readonly 属性指定是否只读。
|
|
39
|
-
</template>
|
|
40
|
-
</Demo>
|
|
41
|
-
|
|
42
|
-
## 最小/最大选择数量
|
|
43
|
-
|
|
44
|
-
使用 `min` 和 `max` 属性限制可选择的最小和最大数量。
|
|
45
|
-
|
|
46
|
-
<Demo :source-code="checkboxMinMaxCode">
|
|
47
|
-
<template #source>
|
|
48
|
-
<checkbox-min-max />
|
|
49
|
-
</template>
|
|
50
|
-
<template #description>
|
|
51
|
-
设置 `min` 属性为 1 和 `max` 属性为 2,限制选择数量。
|
|
52
|
-
</template>
|
|
53
|
-
</Demo>
|
|
54
|
-
|
|
55
|
-
## 按钮样式
|
|
56
|
-
|
|
57
|
-
使用 `type="button"` 将复选框显示为按钮样式。
|
|
58
|
-
|
|
59
|
-
<Demo :source-code="checkboxButtonCode">
|
|
60
|
-
<template #source>
|
|
61
|
-
<checkbox-button />
|
|
62
|
-
</template>
|
|
63
|
-
<template #description>
|
|
64
|
-
设置 `type` 属性为 `button` 即可显示为按钮样式。
|
|
65
|
-
</template>
|
|
66
|
-
</Demo>
|
|
67
|
-
|
|
68
|
-
## 自定义颜色
|
|
69
|
-
|
|
70
|
-
使用 `text-color` 和 `fill` 属性自定义按钮样式的颜色。
|
|
71
|
-
|
|
72
|
-
<Demo :source-code="checkboxColorCode">
|
|
73
|
-
<template #source>
|
|
74
|
-
<checkbox-color />
|
|
75
|
-
</template>
|
|
76
|
-
<template #description>
|
|
77
|
-
在按钮样式中,通过 `text-color` 指定文字颜色,通过 `fill` 指定背景和边框颜色。
|
|
78
|
-
</template>
|
|
79
|
-
</Demo>
|
|
80
|
-
|
|
81
|
-
## 组合示例
|
|
82
|
-
|
|
83
|
-
展示复选框组件的多种属性组合使用。
|
|
84
|
-
|
|
85
|
-
<Demo :source-code="checkboxMixedCode">
|
|
86
|
-
<template #source>
|
|
87
|
-
<checkbox-mixed />
|
|
88
|
-
</template>
|
|
89
|
-
<template #description>
|
|
90
|
-
展示按钮样式+颜色、最小/最大选择、部分禁用等多种功能的组合使用。
|
|
91
|
-
</template>
|
|
92
|
-
</Demo>
|
|
93
|
-
|
|
94
|
-
## API
|
|
95
|
-
|
|
96
|
-
<ApiTable :data="checkboxApi" componentName="checkbox" />
|
|
97
|
-
|
|
98
|
-
<script setup>
|
|
99
|
-
import CheckboxBasic from '../examples/checkbox/basic.vue'
|
|
100
|
-
import CheckboxSize from '../examples/checkbox/size.vue'
|
|
101
|
-
import CheckboxDisabled from '../examples/checkbox/disabled.vue'
|
|
102
|
-
import CheckboxMinMax from '../examples/checkbox/min-max.vue'
|
|
103
|
-
import CheckboxButton from '../examples/checkbox/button.vue'
|
|
104
|
-
import CheckboxColor from '../examples/checkbox/color.vue'
|
|
105
|
-
import CheckboxMixed from '../examples/checkbox/mixed.vue'
|
|
106
|
-
import checkboxApi from './meta/checkbox'
|
|
107
|
-
import checkboxBasicCode from '../examples/checkbox/basic.vue?raw'
|
|
108
|
-
import checkboxSizeCode from '../examples/checkbox/size.vue?raw'
|
|
109
|
-
import checkboxDisabledCode from '../examples/checkbox/disabled.vue?raw'
|
|
110
|
-
import checkboxMinMaxCode from '../examples/checkbox/min-max.vue?raw'
|
|
111
|
-
import checkboxButtonCode from '../examples/checkbox/button.vue?raw'
|
|
112
|
-
import checkboxColorCode from '../examples/checkbox/color.vue?raw'
|
|
113
|
-
import checkboxMixedCode from '../examples/checkbox/mixed.vue?raw'
|
|
114
|
-
</script>
|
|
1
|
+
# Checkbox 复选框
|
|
2
|
+
|
|
3
|
+
复选框组件,用于多项选择。
|
|
4
|
+
|
|
5
|
+
## 基础用法
|
|
6
|
+
|
|
7
|
+
<Demo :source-code="checkboxBasicCode">
|
|
8
|
+
<template #source>
|
|
9
|
+
<checkbox-basic />
|
|
10
|
+
</template>
|
|
11
|
+
<template #description>
|
|
12
|
+
使用 v-model 实现双向数据绑定。
|
|
13
|
+
</template>
|
|
14
|
+
</Demo>
|
|
15
|
+
|
|
16
|
+
## 不同尺寸
|
|
17
|
+
|
|
18
|
+
Checkbox 组件提供三种尺寸。
|
|
19
|
+
|
|
20
|
+
<Demo :source-code="checkboxSizeCode">
|
|
21
|
+
<template #source>
|
|
22
|
+
<checkbox-size />
|
|
23
|
+
</template>
|
|
24
|
+
<template #description>
|
|
25
|
+
使用 size 属性改变复选框大小。除了默认大小外,还有另外两个选项: large, small。
|
|
26
|
+
</template>
|
|
27
|
+
</Demo>
|
|
28
|
+
|
|
29
|
+
## 禁用
|
|
30
|
+
|
|
31
|
+
通过 `disabled` 和 `readonly` 属性指定复选框的状态。
|
|
32
|
+
|
|
33
|
+
<Demo :source-code="checkboxDisabledCode">
|
|
34
|
+
<template #source>
|
|
35
|
+
<checkbox-disabled />
|
|
36
|
+
</template>
|
|
37
|
+
<template #description>
|
|
38
|
+
通过 disabled 属性指定是否禁用 checkbox 组件,通过 readonly 属性指定是否只读。
|
|
39
|
+
</template>
|
|
40
|
+
</Demo>
|
|
41
|
+
|
|
42
|
+
## 最小/最大选择数量
|
|
43
|
+
|
|
44
|
+
使用 `min` 和 `max` 属性限制可选择的最小和最大数量。
|
|
45
|
+
|
|
46
|
+
<Demo :source-code="checkboxMinMaxCode">
|
|
47
|
+
<template #source>
|
|
48
|
+
<checkbox-min-max />
|
|
49
|
+
</template>
|
|
50
|
+
<template #description>
|
|
51
|
+
设置 `min` 属性为 1 和 `max` 属性为 2,限制选择数量。
|
|
52
|
+
</template>
|
|
53
|
+
</Demo>
|
|
54
|
+
|
|
55
|
+
## 按钮样式
|
|
56
|
+
|
|
57
|
+
使用 `type="button"` 将复选框显示为按钮样式。
|
|
58
|
+
|
|
59
|
+
<Demo :source-code="checkboxButtonCode">
|
|
60
|
+
<template #source>
|
|
61
|
+
<checkbox-button />
|
|
62
|
+
</template>
|
|
63
|
+
<template #description>
|
|
64
|
+
设置 `type` 属性为 `button` 即可显示为按钮样式。
|
|
65
|
+
</template>
|
|
66
|
+
</Demo>
|
|
67
|
+
|
|
68
|
+
## 自定义颜色
|
|
69
|
+
|
|
70
|
+
使用 `text-color` 和 `fill` 属性自定义按钮样式的颜色。
|
|
71
|
+
|
|
72
|
+
<Demo :source-code="checkboxColorCode">
|
|
73
|
+
<template #source>
|
|
74
|
+
<checkbox-color />
|
|
75
|
+
</template>
|
|
76
|
+
<template #description>
|
|
77
|
+
在按钮样式中,通过 `text-color` 指定文字颜色,通过 `fill` 指定背景和边框颜色。
|
|
78
|
+
</template>
|
|
79
|
+
</Demo>
|
|
80
|
+
|
|
81
|
+
## 组合示例
|
|
82
|
+
|
|
83
|
+
展示复选框组件的多种属性组合使用。
|
|
84
|
+
|
|
85
|
+
<Demo :source-code="checkboxMixedCode">
|
|
86
|
+
<template #source>
|
|
87
|
+
<checkbox-mixed />
|
|
88
|
+
</template>
|
|
89
|
+
<template #description>
|
|
90
|
+
展示按钮样式+颜色、最小/最大选择、部分禁用等多种功能的组合使用。
|
|
91
|
+
</template>
|
|
92
|
+
</Demo>
|
|
93
|
+
|
|
94
|
+
## API
|
|
95
|
+
|
|
96
|
+
<ApiTable :data="checkboxApi" componentName="checkbox" />
|
|
97
|
+
|
|
98
|
+
<script setup>
|
|
99
|
+
import CheckboxBasic from '../examples/checkbox/basic.vue'
|
|
100
|
+
import CheckboxSize from '../examples/checkbox/size.vue'
|
|
101
|
+
import CheckboxDisabled from '../examples/checkbox/disabled.vue'
|
|
102
|
+
import CheckboxMinMax from '../examples/checkbox/min-max.vue'
|
|
103
|
+
import CheckboxButton from '../examples/checkbox/button.vue'
|
|
104
|
+
import CheckboxColor from '../examples/checkbox/color.vue'
|
|
105
|
+
import CheckboxMixed from '../examples/checkbox/mixed.vue'
|
|
106
|
+
import checkboxApi from './meta/checkbox'
|
|
107
|
+
import checkboxBasicCode from '../examples/checkbox/basic.vue?raw'
|
|
108
|
+
import checkboxSizeCode from '../examples/checkbox/size.vue?raw'
|
|
109
|
+
import checkboxDisabledCode from '../examples/checkbox/disabled.vue?raw'
|
|
110
|
+
import checkboxMinMaxCode from '../examples/checkbox/min-max.vue?raw'
|
|
111
|
+
import checkboxButtonCode from '../examples/checkbox/button.vue?raw'
|
|
112
|
+
import checkboxColorCode from '../examples/checkbox/color.vue?raw'
|
|
113
|
+
import checkboxMixedCode from '../examples/checkbox/mixed.vue?raw'
|
|
114
|
+
</script>
|
|
@@ -1,85 +1,85 @@
|
|
|
1
|
-
# CodeMirror 代码编辑器
|
|
2
|
-
|
|
3
|
-
强大的代码编辑器组件,支持多种编程语言的语法高亮和代码折叠。
|
|
4
|
-
|
|
5
|
-
## 基础用法
|
|
6
|
-
|
|
7
|
-
<Demo :source-code="codeMirrorBasicCode">
|
|
8
|
-
<template #source>
|
|
9
|
-
<code-mirror-basic />
|
|
10
|
-
</template>
|
|
11
|
-
<template #description>
|
|
12
|
-
使用 v-model(modelValue)绑定,通过 mode 属性指定语言模式。
|
|
13
|
-
</template>
|
|
14
|
-
</Demo>
|
|
15
|
-
|
|
16
|
-
## 只读模式
|
|
17
|
-
|
|
18
|
-
通过 `readonly` 属性将编辑器设置为只读状态。
|
|
19
|
-
|
|
20
|
-
<Demo :source-code="codeMirrorReadonlyCode">
|
|
21
|
-
<template #source>
|
|
22
|
-
<code-mirror-readonly />
|
|
23
|
-
</template>
|
|
24
|
-
<template #description>
|
|
25
|
-
设置 `readonly` 属性为 `true` 即可启用只读模式,用户无法编辑内容。
|
|
26
|
-
</template>
|
|
27
|
-
</Demo>
|
|
28
|
-
|
|
29
|
-
## 语言模式切换
|
|
30
|
-
|
|
31
|
-
支持多种编程语言的语法高亮。
|
|
32
|
-
|
|
33
|
-
<Demo :source-code="codeMirrorModeCode">
|
|
34
|
-
<template #source>
|
|
35
|
-
<code-mirror-mode />
|
|
36
|
-
</template>
|
|
37
|
-
<template #description>
|
|
38
|
-
通过 `mode` 属性指定语言模式,如 `application/javascript`、`text/x-sql` 等。
|
|
39
|
-
</template>
|
|
40
|
-
</Demo>
|
|
41
|
-
|
|
42
|
-
## 自定义高度
|
|
43
|
-
|
|
44
|
-
使用 `height` 属性自定义编辑器高度。
|
|
45
|
-
|
|
46
|
-
<Demo :source-code="codeMirrorHeightCode">
|
|
47
|
-
<template #source>
|
|
48
|
-
<code-mirror-height />
|
|
49
|
-
</template>
|
|
50
|
-
<template #description>
|
|
51
|
-
通过 `height` 属性设置编辑器的高度(单位:像素)。
|
|
52
|
-
</template>
|
|
53
|
-
</Demo>
|
|
54
|
-
|
|
55
|
-
## 事件监听
|
|
56
|
-
|
|
57
|
-
监听代码变化事件并执行相应操作。
|
|
58
|
-
|
|
59
|
-
<Demo :source-code="codeMirrorEventsCode">
|
|
60
|
-
<template #source>
|
|
61
|
-
<code-mirror-events />
|
|
62
|
-
</template>
|
|
63
|
-
<template #description>
|
|
64
|
-
通过 `@change` 事件监听代码内容的变化,获取实时更新的代码值。
|
|
65
|
-
</template>
|
|
66
|
-
</Demo>
|
|
67
|
-
|
|
68
|
-
## API
|
|
69
|
-
|
|
70
|
-
<ApiTable :data="codeMirrorApi" componentName="code-mirror" />
|
|
71
|
-
|
|
72
|
-
<script setup>
|
|
73
|
-
import CodeMirrorBasic from '../examples/code-mirror/basic.vue'
|
|
74
|
-
import CodeMirrorReadonly from '../examples/code-mirror/readonly.vue'
|
|
75
|
-
import CodeMirrorMode from '../examples/code-mirror/mode.vue'
|
|
76
|
-
import CodeMirrorHeight from '../examples/code-mirror/height.vue'
|
|
77
|
-
import CodeMirrorEvents from '../examples/code-mirror/events.vue'
|
|
78
|
-
import codeMirrorApi from './meta/code-mirror'
|
|
79
|
-
|
|
80
|
-
import codeMirrorBasicCode from '../examples/code-mirror/basic.vue?raw'
|
|
81
|
-
import codeMirrorReadonlyCode from '../examples/code-mirror/readonly.vue?raw'
|
|
82
|
-
import codeMirrorModeCode from '../examples/code-mirror/mode.vue?raw'
|
|
83
|
-
import codeMirrorHeightCode from '../examples/code-mirror/height.vue?raw'
|
|
84
|
-
import codeMirrorEventsCode from '../examples/code-mirror/events.vue?raw'
|
|
85
|
-
</script>
|
|
1
|
+
# CodeMirror 代码编辑器
|
|
2
|
+
|
|
3
|
+
强大的代码编辑器组件,支持多种编程语言的语法高亮和代码折叠。
|
|
4
|
+
|
|
5
|
+
## 基础用法
|
|
6
|
+
|
|
7
|
+
<Demo :source-code="codeMirrorBasicCode">
|
|
8
|
+
<template #source>
|
|
9
|
+
<code-mirror-basic />
|
|
10
|
+
</template>
|
|
11
|
+
<template #description>
|
|
12
|
+
使用 v-model(modelValue)绑定,通过 mode 属性指定语言模式。
|
|
13
|
+
</template>
|
|
14
|
+
</Demo>
|
|
15
|
+
|
|
16
|
+
## 只读模式
|
|
17
|
+
|
|
18
|
+
通过 `readonly` 属性将编辑器设置为只读状态。
|
|
19
|
+
|
|
20
|
+
<Demo :source-code="codeMirrorReadonlyCode">
|
|
21
|
+
<template #source>
|
|
22
|
+
<code-mirror-readonly />
|
|
23
|
+
</template>
|
|
24
|
+
<template #description>
|
|
25
|
+
设置 `readonly` 属性为 `true` 即可启用只读模式,用户无法编辑内容。
|
|
26
|
+
</template>
|
|
27
|
+
</Demo>
|
|
28
|
+
|
|
29
|
+
## 语言模式切换
|
|
30
|
+
|
|
31
|
+
支持多种编程语言的语法高亮。
|
|
32
|
+
|
|
33
|
+
<Demo :source-code="codeMirrorModeCode">
|
|
34
|
+
<template #source>
|
|
35
|
+
<code-mirror-mode />
|
|
36
|
+
</template>
|
|
37
|
+
<template #description>
|
|
38
|
+
通过 `mode` 属性指定语言模式,如 `application/javascript`、`text/x-sql` 等。
|
|
39
|
+
</template>
|
|
40
|
+
</Demo>
|
|
41
|
+
|
|
42
|
+
## 自定义高度
|
|
43
|
+
|
|
44
|
+
使用 `height` 属性自定义编辑器高度。
|
|
45
|
+
|
|
46
|
+
<Demo :source-code="codeMirrorHeightCode">
|
|
47
|
+
<template #source>
|
|
48
|
+
<code-mirror-height />
|
|
49
|
+
</template>
|
|
50
|
+
<template #description>
|
|
51
|
+
通过 `height` 属性设置编辑器的高度(单位:像素)。
|
|
52
|
+
</template>
|
|
53
|
+
</Demo>
|
|
54
|
+
|
|
55
|
+
## 事件监听
|
|
56
|
+
|
|
57
|
+
监听代码变化事件并执行相应操作。
|
|
58
|
+
|
|
59
|
+
<Demo :source-code="codeMirrorEventsCode">
|
|
60
|
+
<template #source>
|
|
61
|
+
<code-mirror-events />
|
|
62
|
+
</template>
|
|
63
|
+
<template #description>
|
|
64
|
+
通过 `@change` 事件监听代码内容的变化,获取实时更新的代码值。
|
|
65
|
+
</template>
|
|
66
|
+
</Demo>
|
|
67
|
+
|
|
68
|
+
## API
|
|
69
|
+
|
|
70
|
+
<ApiTable :data="codeMirrorApi" componentName="code-mirror" />
|
|
71
|
+
|
|
72
|
+
<script setup>
|
|
73
|
+
import CodeMirrorBasic from '../examples/code-mirror/basic.vue'
|
|
74
|
+
import CodeMirrorReadonly from '../examples/code-mirror/readonly.vue'
|
|
75
|
+
import CodeMirrorMode from '../examples/code-mirror/mode.vue'
|
|
76
|
+
import CodeMirrorHeight from '../examples/code-mirror/height.vue'
|
|
77
|
+
import CodeMirrorEvents from '../examples/code-mirror/events.vue'
|
|
78
|
+
import codeMirrorApi from './meta/code-mirror'
|
|
79
|
+
|
|
80
|
+
import codeMirrorBasicCode from '../examples/code-mirror/basic.vue?raw'
|
|
81
|
+
import codeMirrorReadonlyCode from '../examples/code-mirror/readonly.vue?raw'
|
|
82
|
+
import codeMirrorModeCode from '../examples/code-mirror/mode.vue?raw'
|
|
83
|
+
import codeMirrorHeightCode from '../examples/code-mirror/height.vue?raw'
|
|
84
|
+
import codeMirrorEventsCode from '../examples/code-mirror/events.vue?raw'
|
|
85
|
+
</script>
|