@ebiz/designer-components 0.0.57 → 0.0.59
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/README.md +29 -29
- package/dist/designer-components.css +1 -1
- package/dist/index.mjs +4822 -4822
- package/package.json +1 -1
- package/src/App.vue +26 -26
- package/src/apiService/SIMPLE_DATA_SERVICE.md +284 -284
- package/src/apiService/mockDataService.js +115 -115
- package/src/apiService/simpleDataService.js +297 -297
- package/src/assets/base.css +86 -86
- package/src/assets/logo.svg +1 -1
- package/src/components/Button.vue +149 -149
- package/src/components/DataContainer.vue +40 -40
- package/src/components/EbizApproval.vue +332 -338
- package/src/components/EbizAutoForm.vue +596 -596
- package/src/components/EbizAvatar.vue +115 -115
- package/src/components/EbizCheckbox.vue +93 -93
- package/src/components/EbizCheckboxGroup.vue +69 -69
- package/src/components/EbizDepartmentSelector.vue +144 -144
- package/src/components/EbizDescriptions.vue +340 -340
- package/src/components/EbizDescriptionsItem.vue +47 -47
- package/src/components/EbizDetailBlock.vue +81 -81
- package/src/components/EbizDialog.vue +260 -260
- package/src/components/EbizDiv.vue +32 -32
- package/src/components/EbizDivider.vue +96 -96
- package/src/components/EbizEmployeeInfo.vue +138 -138
- package/src/components/EbizEmployeeSelector.vue +1093 -1086
- package/src/components/EbizFileUpload.vue +238 -238
- package/src/components/EbizMap.vue +541 -541
- package/src/components/EbizOkrTree.vue +99 -99
- package/src/components/EbizPageHeader.vue +95 -95
- package/src/components/EbizPagination.vue +162 -162
- package/src/components/EbizPopconfirm.vue +47 -47
- package/src/components/EbizRadio.vue +86 -86
- package/src/components/EbizRadioGroup.vue +83 -83
- package/src/components/EbizRemoteSelect.vue +232 -232
- package/src/components/EbizRouteBreadcrumb.vue +46 -46
- package/src/components/EbizSelect.vue +85 -85
- package/src/components/EbizSpace.vue +100 -100
- package/src/components/EbizStatistic.vue +149 -149
- package/src/components/EbizStatsCard.vue +113 -113
- package/src/components/EbizSwiper.vue +113 -113
- package/src/components/EbizSwiperItem.vue +13 -13
- package/src/components/EbizSwitch.vue +85 -85
- package/src/components/EbizTabHeader.vue +132 -132
- package/src/components/EbizTabPanel.vue +22 -22
- package/src/components/EbizTable.vue +469 -469
- package/src/components/EbizTableColumn.vue +116 -116
- package/src/components/EbizTableSort.vue +179 -179
- package/src/components/EbizTabs.vue +142 -142
- package/src/components/EbizTdesignButtonDialog.vue +332 -332
- package/src/components/EbizTdesignLoading.vue +107 -107
- package/src/components/EbizTimePicker.vue +143 -143
- package/src/components/EbizTitle.vue +91 -91
- package/src/components/EbizTree.vue +152 -152
- package/src/components/EbizTreeMergeTable.vue +1414 -1414
- package/src/components/EbizTreeSelector.vue +418 -418
- package/src/components/EbizVxeTable.vue +290 -290
- package/src/components/Form.vue +28 -28
- package/src/components/Home.vue +7 -7
- package/src/components/MyComponent.vue +39 -39
- package/src/components/Table.vue +45 -45
- package/src/components/TdesignAlert.vue +115 -115
- package/src/components/TdesignButton.vue +135 -135
- package/src/components/TdesignCalendar/index.vue +145 -145
- package/src/components/TdesignCard.vue +195 -195
- package/src/components/TdesignCol.vue +101 -101
- package/src/components/TdesignCollapse.vue +142 -142
- package/src/components/TdesignCollapsePanel.vue +79 -79
- package/src/components/TdesignDatePicker.vue +124 -124
- package/src/components/TdesignDescriptions.vue +74 -74
- package/src/components/TdesignDescriptionsItem.vue +50 -50
- package/src/components/TdesignDialog.vue +225 -225
- package/src/components/TdesignForm.vue +138 -138
- package/src/components/TdesignFormItem.vue +105 -105
- package/src/components/TdesignGrid.vue +55 -55
- package/src/components/TdesignIcon.vue +67 -67
- package/src/components/TdesignImage.vue +162 -162
- package/src/components/TdesignImageViewer.vue +200 -200
- package/src/components/TdesignInput.vue +242 -242
- package/src/components/TdesignSelect.vue +444 -444
- package/src/components/TdesignTag.vue +117 -117
- package/src/components/TdesignTextarea.vue +142 -142
- package/src/components/TdesignTimeline.vue +58 -58
- package/src/components/TdesignTimelineItem.vue +71 -71
- package/src/components/TdesignUpload.vue +388 -388
- package/src/components/TdesignWatermark.vue +107 -107
- package/src/components/ebiz-form/components/cascader.vue +61 -61
- package/src/components/ebiz-form/components/checkbox.vue +37 -37
- package/src/components/ebiz-form/components/city.vue +137 -137
- package/src/components/ebiz-form/components/date-panel.vue +52 -52
- package/src/components/ebiz-form/components/date-range-panel.vue +52 -52
- package/src/components/ebiz-form/components/date-range.vue +56 -56
- package/src/components/ebiz-form/components/date.vue +52 -52
- package/src/components/ebiz-form/components/editor-multi-language.vue +47 -47
- package/src/components/ebiz-form/components/editor.vue +78 -78
- package/src/components/ebiz-form/components/file-multi-language.vue +52 -52
- package/src/components/ebiz-form/components/file.vue +149 -149
- package/src/components/ebiz-form/components/images-multi-language.vue +52 -52
- package/src/components/ebiz-form/components/images.vue +129 -129
- package/src/components/ebiz-form/components/img-multi-language.vue +51 -51
- package/src/components/ebiz-form/components/img.vue +129 -129
- package/src/components/ebiz-form/components/number.vue +50 -50
- package/src/components/ebiz-form/components/radio.vue +28 -28
- package/src/components/ebiz-form/components/select.vue +119 -119
- package/src/components/ebiz-form/components/switch.vue +23 -23
- package/src/components/ebiz-form/components/text-multi-language.vue +47 -47
- package/src/components/ebiz-form/components/text.vue +52 -52
- package/src/components/ebiz-form/components/textarea-multi-language.vue +48 -48
- package/src/components/ebiz-form/components/textarea.vue +29 -29
- package/src/components/ebiz-form/components/video-multi-language.vue +51 -51
- package/src/components/ebiz-form/components/video.vue +97 -97
- package/src/components/ebiz-form/index.vue +157 -157
- package/src/components/examples/PopconfirmExample.vue +149 -149
- package/src/components/icons/IconCommunity.vue +7 -7
- package/src/components/icons/IconDocumentation.vue +7 -7
- package/src/components/icons/IconEcosystem.vue +7 -7
- package/src/components/icons/IconSupport.vue +7 -7
- package/src/components/icons/IconTooling.vue +19 -19
- package/src/components/senior/EbizSData/index.vue +260 -260
- package/src/components/senior/EbizSDialog/index.vue +713 -712
- package/src/components/senior/EbizSForm/README.md +157 -157
- package/src/components/senior/EbizSForm/index.vue +668 -668
- package/src/components/senior/EbizSForm/item.vue +522 -522
- package/src/components/senior/EbizSForm/mItems/DateTimePicker.vue +51 -51
- package/src/components/senior/EbizSForm/mItems/Picker.vue +63 -63
- package/src/index.js +218 -218
- package/src/main.js +55 -55
- package/src/router/index.js +374 -374
- package/src/utils/formatCode.js +24 -24
- package/src/utils/generateImportStatement.js +52 -52
- package/src/utils/hasJsx.js +25 -25
- package/src/utils/index.js +166 -166
- package/src/utils/mergeOptions.js +29 -29
- package/src/utils/parseRequiredBlocks.js +18 -18
- package/src/utils/upload.ts +126 -126
- package/src/utils/vue-sfc-validator.js +155 -155
- package/src/views/Button.vue +23 -23
- package/src/views/CheckboxDemo.vue +104 -104
- package/src/views/DataContainer.vue +19 -19
- package/src/views/DialogDemo.vue +125 -125
- package/src/views/EbizApprovalDemo.vue +76 -76
- package/src/views/EbizAutoFormDemo.vue +129 -129
- package/src/views/EbizAvatar.vue +223 -223
- package/src/views/EbizDepartmentSelectorDemo.vue +169 -169
- package/src/views/EbizDetailBlockDemo.vue +30 -30
- package/src/views/EbizEmployeeInfo.vue +249 -249
- package/src/views/EbizEmployeeSelector.vue +83 -83
- package/src/views/EbizMap.vue +201 -201
- package/src/views/EbizRadioDemo.vue +151 -151
- package/src/views/EbizSDataDemo.vue +136 -136
- package/src/views/EbizSDialogDemo.vue +301 -301
- package/src/views/EbizSForm/index.vue +359 -359
- package/src/views/EbizSFormDemo.vue +420 -420
- package/src/views/EbizSpace.vue +185 -185
- package/src/views/EbizSwiper.vue +157 -157
- package/src/views/EbizTdesignButtonDialogExample.vue +437 -437
- package/src/views/Form.vue +19 -19
- package/src/views/GridDemo.vue +238 -238
- package/src/views/Home.vue +146 -146
- package/src/views/Mindmap.vue +17 -17
- package/src/views/MyComponent.vue +19 -19
- package/src/views/OkrTree.vue +19 -19
- package/src/views/PageHeaderDemo.vue +104 -104
- package/src/views/PaginationDemo.vue +96 -96
- package/src/views/PermissionBoxDemo.vue +85 -85
- package/src/views/PopconfirmDemo.vue +80 -80
- package/src/views/RemoteSelect.vue +350 -350
- package/src/views/StatisticDemo.vue +190 -190
- package/src/views/SwitchDemo.vue +79 -79
- package/src/views/Table.vue +19 -19
- package/src/views/TableDemo.vue +334 -334
- package/src/views/TableSortDemo.vue +143 -143
- package/src/views/TableView.vue +68 -68
- package/src/views/TabsDemo.vue +282 -282
- package/src/views/TagDemo.vue +101 -101
- package/src/views/TdesignAlert.vue +98 -98
- package/src/views/TdesignButton.vue +190 -190
- package/src/views/TdesignCalendar.vue +94 -94
- package/src/views/TdesignCard.vue +296 -296
- package/src/views/TdesignCollapse.vue +293 -293
- package/src/views/TdesignDatePicker.vue +187 -187
- package/src/views/TdesignDescriptions.vue +101 -101
- package/src/views/TdesignForm.vue +248 -248
- package/src/views/TdesignIcon.vue +203 -203
- package/src/views/TdesignImage.vue +215 -215
- package/src/views/TdesignImageViewer.vue +198 -198
- package/src/views/TdesignInput.vue +252 -252
- package/src/views/TdesignSelect.vue +473 -473
- package/src/views/TdesignSwiper.vue +157 -157
- package/src/views/TextareaDemo.vue +93 -93
- package/src/views/TimePickerDemo.vue +146 -146
- package/src/views/TimelineDemo.vue +160 -160
- package/src/views/Title.vue +19 -19
- package/src/views/TreeDemo.vue +254 -254
- package/src/views/TreeMergeTableDemo.vue +239 -239
- package/src/views/TreeSelectorDemo.vue +245 -245
- package/src/views/UploadDemo.vue +121 -121
- package/src/views/VxeTableDemo.vue +279 -279
- package/src/views/WatermarkDemo.vue +85 -85
@@ -1,152 +1,152 @@
|
|
1
|
-
<template>
|
2
|
-
<div class="radio-demo">
|
3
|
-
<h2>Radio 单选框组件</h2>
|
4
|
-
|
5
|
-
<h3>基础单选框</h3>
|
6
|
-
<div class="demo-section">
|
7
|
-
<ebiz-radio label="未选中项" />
|
8
|
-
<ebiz-radio label="允许取消选中项" :allowUncheck="true" v-model="radio1" />
|
9
|
-
<ebiz-radio label="选中项" v-model="radio2" />
|
10
|
-
<ebiz-radio label="选中禁用态" disabled v-model="radioDisabled" />
|
11
|
-
<ebiz-radio label="未选中禁用态" disabled />
|
12
|
-
</div>
|
13
|
-
|
14
|
-
<h3>按钮单选框组</h3>
|
15
|
-
<div class="demo-section">
|
16
|
-
<h4>边框型单选按钮</h4>
|
17
|
-
<ebiz-radio-group v-model="group1" variant="outline">
|
18
|
-
<ebiz-radio value="1" label="选项一" />
|
19
|
-
<ebiz-radio value="2" label="选项二" />
|
20
|
-
<ebiz-radio value="3" label="选项三" />
|
21
|
-
<ebiz-radio value="4" label="选项四" />
|
22
|
-
<ebiz-radio value="5" label="选项五" />
|
23
|
-
</ebiz-radio-group>
|
24
|
-
|
25
|
-
<h4>填充型单选按钮</h4>
|
26
|
-
<ebiz-radio-group v-model="group2" variant="primary-filled">
|
27
|
-
<ebiz-radio value="1" label="选项一" />
|
28
|
-
<ebiz-radio value="2" label="选项二" />
|
29
|
-
<ebiz-radio value="3" label="选项三" />
|
30
|
-
<ebiz-radio value="4" label="选项四" />
|
31
|
-
<ebiz-radio value="5" label="选项五" />
|
32
|
-
</ebiz-radio-group>
|
33
|
-
|
34
|
-
<h4>带禁用状态的单选按钮</h4>
|
35
|
-
<ebiz-radio-group v-model="group3">
|
36
|
-
<ebiz-radio value="1" label="选项一" />
|
37
|
-
<ebiz-radio value="2" label="选项二" />
|
38
|
-
<ebiz-radio value="3" label="选项三" />
|
39
|
-
<ebiz-radio value="4" label="选中禁用态" disabled />
|
40
|
-
<ebiz-radio value="5" label="未选中禁用态" disabled />
|
41
|
-
</ebiz-radio-group>
|
42
|
-
</div>
|
43
|
-
|
44
|
-
<h3>不同尺寸的单选按钮</h3>
|
45
|
-
<div class="demo-section">
|
46
|
-
<h4>大尺寸</h4>
|
47
|
-
<ebiz-radio-group v-model="groupSize1" size="large">
|
48
|
-
<ebiz-radio value="1" label="选项一" />
|
49
|
-
<ebiz-radio value="2" label="选项二" />
|
50
|
-
<ebiz-radio value="3" label="选项三" />
|
51
|
-
<ebiz-radio value="4" label="选项四" />
|
52
|
-
</ebiz-radio-group>
|
53
|
-
|
54
|
-
<h4>中尺寸(默认)</h4>
|
55
|
-
<ebiz-radio-group v-model="groupSize2" size="medium">
|
56
|
-
<ebiz-radio value="1" label="选项一" />
|
57
|
-
<ebiz-radio value="2" label="选项二" />
|
58
|
-
<ebiz-radio value="3" label="选项三" />
|
59
|
-
<ebiz-radio value="4" label="选项四" />
|
60
|
-
</ebiz-radio-group>
|
61
|
-
|
62
|
-
<h4>小尺寸</h4>
|
63
|
-
<ebiz-radio-group v-model="groupSize3" size="small">
|
64
|
-
<ebiz-radio value="1" label="选项一" />
|
65
|
-
<ebiz-radio value="2" label="选项二" />
|
66
|
-
<ebiz-radio value="3" label="选项三" />
|
67
|
-
<ebiz-radio value="4" label="选项四" />
|
68
|
-
</ebiz-radio-group>
|
69
|
-
</div>
|
70
|
-
|
71
|
-
<h3>使用options配置的单选框组</h3>
|
72
|
-
<div class="demo-section">
|
73
|
-
<ebiz-radio-group
|
74
|
-
:options="[
|
75
|
-
{ label: '选项一', value: '1' },
|
76
|
-
{ label: '选项二', value: '2' },
|
77
|
-
{ label: '选项三', value: '3' },
|
78
|
-
{ label: '禁用选项', value: '4', disabled: true }
|
79
|
-
]"
|
80
|
-
v-model="optionsGroup"
|
81
|
-
/>
|
82
|
-
</div>
|
83
|
-
|
84
|
-
<h3>可取消选中的单选框组</h3>
|
85
|
-
<div class="demo-section">
|
86
|
-
<ebiz-radio-group
|
87
|
-
:allowUncheck="true"
|
88
|
-
:options="[
|
89
|
-
{ label: '可取消选中项一', value: '1' },
|
90
|
-
{ label: '可取消选中项二', value: '2' },
|
91
|
-
{ label: '可取消选中项三', value: '3' }
|
92
|
-
]"
|
93
|
-
v-model="uncheckGroup"
|
94
|
-
/>
|
95
|
-
</div>
|
96
|
-
</div>
|
97
|
-
</template>
|
98
|
-
|
99
|
-
<script>
|
100
|
-
export default {
|
101
|
-
name: 'EbizRadioDemo'
|
102
|
-
}
|
103
|
-
</script>
|
104
|
-
|
105
|
-
<script setup>
|
106
|
-
import { ref } from 'vue';
|
107
|
-
import { EbizRadio, EbizRadioGroup } from '../index.js';
|
108
|
-
|
109
|
-
// 单选框状态
|
110
|
-
const radio1 = ref(true);
|
111
|
-
const radio2 = ref(true);
|
112
|
-
const radioDisabled = ref(true);
|
113
|
-
|
114
|
-
// 单选组状态
|
115
|
-
const group1 = ref('1');
|
116
|
-
const group2 = ref('1');
|
117
|
-
const group3 = ref('1');
|
118
|
-
|
119
|
-
// 不同尺寸的单选组
|
120
|
-
const groupSize1 = ref('1');
|
121
|
-
const groupSize2 = ref('1');
|
122
|
-
const groupSize3 = ref('1');
|
123
|
-
|
124
|
-
// options配置的单选组
|
125
|
-
const optionsGroup = ref('1');
|
126
|
-
|
127
|
-
// 可取消选中的单选组
|
128
|
-
const uncheckGroup = ref('1');
|
129
|
-
</script>
|
130
|
-
|
131
|
-
<style scoped>
|
132
|
-
.radio-demo {
|
133
|
-
padding: 20px;
|
134
|
-
}
|
135
|
-
|
136
|
-
.demo-section {
|
137
|
-
margin-bottom: 30px;
|
138
|
-
border: 1px solid #eee;
|
139
|
-
padding: 16px;
|
140
|
-
border-radius: 6px;
|
141
|
-
}
|
142
|
-
|
143
|
-
h3 {
|
144
|
-
margin-top: 24px;
|
145
|
-
margin-bottom: 16px;
|
146
|
-
}
|
147
|
-
|
148
|
-
h4 {
|
149
|
-
margin-top: 16px;
|
150
|
-
margin-bottom: 8px;
|
151
|
-
}
|
1
|
+
<template>
|
2
|
+
<div class="radio-demo">
|
3
|
+
<h2>Radio 单选框组件</h2>
|
4
|
+
|
5
|
+
<h3>基础单选框</h3>
|
6
|
+
<div class="demo-section">
|
7
|
+
<ebiz-radio label="未选中项" />
|
8
|
+
<ebiz-radio label="允许取消选中项" :allowUncheck="true" v-model="radio1" />
|
9
|
+
<ebiz-radio label="选中项" v-model="radio2" />
|
10
|
+
<ebiz-radio label="选中禁用态" disabled v-model="radioDisabled" />
|
11
|
+
<ebiz-radio label="未选中禁用态" disabled />
|
12
|
+
</div>
|
13
|
+
|
14
|
+
<h3>按钮单选框组</h3>
|
15
|
+
<div class="demo-section">
|
16
|
+
<h4>边框型单选按钮</h4>
|
17
|
+
<ebiz-radio-group v-model="group1" variant="outline">
|
18
|
+
<ebiz-radio value="1" label="选项一" />
|
19
|
+
<ebiz-radio value="2" label="选项二" />
|
20
|
+
<ebiz-radio value="3" label="选项三" />
|
21
|
+
<ebiz-radio value="4" label="选项四" />
|
22
|
+
<ebiz-radio value="5" label="选项五" />
|
23
|
+
</ebiz-radio-group>
|
24
|
+
|
25
|
+
<h4>填充型单选按钮</h4>
|
26
|
+
<ebiz-radio-group v-model="group2" variant="primary-filled">
|
27
|
+
<ebiz-radio value="1" label="选项一" />
|
28
|
+
<ebiz-radio value="2" label="选项二" />
|
29
|
+
<ebiz-radio value="3" label="选项三" />
|
30
|
+
<ebiz-radio value="4" label="选项四" />
|
31
|
+
<ebiz-radio value="5" label="选项五" />
|
32
|
+
</ebiz-radio-group>
|
33
|
+
|
34
|
+
<h4>带禁用状态的单选按钮</h4>
|
35
|
+
<ebiz-radio-group v-model="group3">
|
36
|
+
<ebiz-radio value="1" label="选项一" />
|
37
|
+
<ebiz-radio value="2" label="选项二" />
|
38
|
+
<ebiz-radio value="3" label="选项三" />
|
39
|
+
<ebiz-radio value="4" label="选中禁用态" disabled />
|
40
|
+
<ebiz-radio value="5" label="未选中禁用态" disabled />
|
41
|
+
</ebiz-radio-group>
|
42
|
+
</div>
|
43
|
+
|
44
|
+
<h3>不同尺寸的单选按钮</h3>
|
45
|
+
<div class="demo-section">
|
46
|
+
<h4>大尺寸</h4>
|
47
|
+
<ebiz-radio-group v-model="groupSize1" size="large">
|
48
|
+
<ebiz-radio value="1" label="选项一" />
|
49
|
+
<ebiz-radio value="2" label="选项二" />
|
50
|
+
<ebiz-radio value="3" label="选项三" />
|
51
|
+
<ebiz-radio value="4" label="选项四" />
|
52
|
+
</ebiz-radio-group>
|
53
|
+
|
54
|
+
<h4>中尺寸(默认)</h4>
|
55
|
+
<ebiz-radio-group v-model="groupSize2" size="medium">
|
56
|
+
<ebiz-radio value="1" label="选项一" />
|
57
|
+
<ebiz-radio value="2" label="选项二" />
|
58
|
+
<ebiz-radio value="3" label="选项三" />
|
59
|
+
<ebiz-radio value="4" label="选项四" />
|
60
|
+
</ebiz-radio-group>
|
61
|
+
|
62
|
+
<h4>小尺寸</h4>
|
63
|
+
<ebiz-radio-group v-model="groupSize3" size="small">
|
64
|
+
<ebiz-radio value="1" label="选项一" />
|
65
|
+
<ebiz-radio value="2" label="选项二" />
|
66
|
+
<ebiz-radio value="3" label="选项三" />
|
67
|
+
<ebiz-radio value="4" label="选项四" />
|
68
|
+
</ebiz-radio-group>
|
69
|
+
</div>
|
70
|
+
|
71
|
+
<h3>使用options配置的单选框组</h3>
|
72
|
+
<div class="demo-section">
|
73
|
+
<ebiz-radio-group
|
74
|
+
:options="[
|
75
|
+
{ label: '选项一', value: '1' },
|
76
|
+
{ label: '选项二', value: '2' },
|
77
|
+
{ label: '选项三', value: '3' },
|
78
|
+
{ label: '禁用选项', value: '4', disabled: true }
|
79
|
+
]"
|
80
|
+
v-model="optionsGroup"
|
81
|
+
/>
|
82
|
+
</div>
|
83
|
+
|
84
|
+
<h3>可取消选中的单选框组</h3>
|
85
|
+
<div class="demo-section">
|
86
|
+
<ebiz-radio-group
|
87
|
+
:allowUncheck="true"
|
88
|
+
:options="[
|
89
|
+
{ label: '可取消选中项一', value: '1' },
|
90
|
+
{ label: '可取消选中项二', value: '2' },
|
91
|
+
{ label: '可取消选中项三', value: '3' }
|
92
|
+
]"
|
93
|
+
v-model="uncheckGroup"
|
94
|
+
/>
|
95
|
+
</div>
|
96
|
+
</div>
|
97
|
+
</template>
|
98
|
+
|
99
|
+
<script>
|
100
|
+
export default {
|
101
|
+
name: 'EbizRadioDemo'
|
102
|
+
}
|
103
|
+
</script>
|
104
|
+
|
105
|
+
<script setup>
|
106
|
+
import { ref } from 'vue';
|
107
|
+
import { EbizRadio, EbizRadioGroup } from '../index.js';
|
108
|
+
|
109
|
+
// 单选框状态
|
110
|
+
const radio1 = ref(true);
|
111
|
+
const radio2 = ref(true);
|
112
|
+
const radioDisabled = ref(true);
|
113
|
+
|
114
|
+
// 单选组状态
|
115
|
+
const group1 = ref('1');
|
116
|
+
const group2 = ref('1');
|
117
|
+
const group3 = ref('1');
|
118
|
+
|
119
|
+
// 不同尺寸的单选组
|
120
|
+
const groupSize1 = ref('1');
|
121
|
+
const groupSize2 = ref('1');
|
122
|
+
const groupSize3 = ref('1');
|
123
|
+
|
124
|
+
// options配置的单选组
|
125
|
+
const optionsGroup = ref('1');
|
126
|
+
|
127
|
+
// 可取消选中的单选组
|
128
|
+
const uncheckGroup = ref('1');
|
129
|
+
</script>
|
130
|
+
|
131
|
+
<style scoped>
|
132
|
+
.radio-demo {
|
133
|
+
padding: 20px;
|
134
|
+
}
|
135
|
+
|
136
|
+
.demo-section {
|
137
|
+
margin-bottom: 30px;
|
138
|
+
border: 1px solid #eee;
|
139
|
+
padding: 16px;
|
140
|
+
border-radius: 6px;
|
141
|
+
}
|
142
|
+
|
143
|
+
h3 {
|
144
|
+
margin-top: 24px;
|
145
|
+
margin-bottom: 16px;
|
146
|
+
}
|
147
|
+
|
148
|
+
h4 {
|
149
|
+
margin-top: 16px;
|
150
|
+
margin-bottom: 8px;
|
151
|
+
}
|
152
152
|
</style>
|
@@ -1,137 +1,137 @@
|
|
1
|
-
<template>
|
2
|
-
<div class="demo-container">
|
3
|
-
<h2>EbizSData 数据组件示例</h2>
|
4
|
-
|
5
|
-
<div class="demo-section">
|
6
|
-
<h3>基础用法</h3>
|
7
|
-
<div class="demo-block" style="background-color: #efefef;">
|
8
|
-
<EbizSData :apiConfig="{apiId:1933,apiType:'0'}" showDivider :defaultParams="{ status: 'active' }"
|
9
|
-
v-model:formData="formData1">
|
10
|
-
<template #form>
|
11
|
-
<ebiz-s-form-item v-model="formData1.keyword" label="搜索" type="input"></ebiz-s-form-item>
|
12
|
-
<ebiz-s-form-item label="搜索2" type="input"></ebiz-s-form-item>
|
13
|
-
<ebiz-s-form-item label="搜索2" type="input"></ebiz-s-form-item>
|
14
|
-
<ebiz-s-form-item label="搜索2" type="input"></ebiz-s-form-item>
|
15
|
-
<ebiz-s-form-item label="搜索2" type="input"></ebiz-s-form-item>
|
16
|
-
<ebiz-s-form-item label="搜索2" type="input"></ebiz-s-form-item>
|
17
|
-
<ebiz-s-form-item label="搜索2" type="input"></ebiz-s-form-item>
|
18
|
-
<ebiz-s-form-item label="搜索2" type="input"></ebiz-s-form-item>
|
19
|
-
<ebiz-s-form-item label="搜索2" type="input"></ebiz-s-form-item>
|
20
|
-
</template>
|
21
|
-
<template #left>
|
22
|
-
<EbizTdesignButtonDialog theme="primary" buttonText="新增" buttonIcon="add">
|
23
|
-
<template #body>
|
24
|
-
新增数据
|
25
|
-
</template>
|
26
|
-
</EbizTdesignButtonDialog>
|
27
|
-
</template>
|
28
|
-
<template #default="{ data }">
|
29
|
-
<tiny-grid :data="data" :columns="columns" bordered stripe />
|
30
|
-
</template>
|
31
|
-
</EbizSData>
|
32
|
-
</div>
|
33
|
-
</div>
|
34
|
-
|
35
|
-
</div>
|
36
|
-
</template>
|
37
|
-
|
38
|
-
<script>
|
39
|
-
export default {
|
40
|
-
name: "EbizSDataDemo"
|
41
|
-
};
|
42
|
-
</script>
|
43
|
-
|
44
|
-
<script setup>
|
45
|
-
import { ref } from 'vue';
|
46
|
-
import { EbizSData, EbizSFormItem } from '../index';
|
47
|
-
import EbizTdesignButtonDialog from '../components/EbizTdesignButtonDialog.vue';
|
48
|
-
|
49
|
-
// 表单数据
|
50
|
-
const formData1 = ref({
|
51
|
-
keyword: '',
|
52
|
-
status: 'all'
|
53
|
-
});
|
54
|
-
|
55
|
-
// 表格列配置
|
56
|
-
const columns = [
|
57
|
-
{
|
58
|
-
colKey: 'name',
|
59
|
-
title: '名称',
|
60
|
-
width: '200'
|
61
|
-
},
|
62
|
-
{
|
63
|
-
colKey: 'status',
|
64
|
-
title: '状态'
|
65
|
-
},
|
66
|
-
{
|
67
|
-
colKey: 'createTime',
|
68
|
-
title: '创建时间'
|
69
|
-
},
|
70
|
-
{
|
71
|
-
colKey: 'operation',
|
72
|
-
title: '操作'
|
73
|
-
}
|
74
|
-
];
|
75
|
-
</script>
|
76
|
-
|
77
|
-
<style scoped>
|
78
|
-
.demo-container {
|
79
|
-
padding: 24px;
|
80
|
-
}
|
81
|
-
|
82
|
-
.demo-section {
|
83
|
-
margin-bottom: 48px;
|
84
|
-
}
|
85
|
-
|
86
|
-
.demo-block {
|
87
|
-
margin-bottom: 24px;
|
88
|
-
padding: 24px;
|
89
|
-
border: 1px solid #e5e6eb;
|
90
|
-
border-radius: 6px;
|
91
|
-
}
|
92
|
-
|
93
|
-
.demo-code {
|
94
|
-
background-color: #f5f5f5;
|
95
|
-
padding: 16px;
|
96
|
-
border-radius: 6px;
|
97
|
-
font-size: 14px;
|
98
|
-
line-height: 1.5;
|
99
|
-
overflow-x: auto;
|
100
|
-
}
|
101
|
-
|
102
|
-
.demo-code pre {
|
103
|
-
margin: 0;
|
104
|
-
}
|
105
|
-
|
106
|
-
.custom-form {
|
107
|
-
margin-bottom: 16px;
|
108
|
-
padding: 16px;
|
109
|
-
background-color: #f9f9f9;
|
110
|
-
border-radius: 4px;
|
111
|
-
}
|
112
|
-
|
113
|
-
.data-cards {
|
114
|
-
display: flex;
|
115
|
-
flex-wrap: wrap;
|
116
|
-
gap: 16px;
|
117
|
-
}
|
118
|
-
|
119
|
-
.data-card {
|
120
|
-
flex: 1 1 300px;
|
121
|
-
padding: 16px;
|
122
|
-
background-color: #f9f9f9;
|
123
|
-
border-radius: 4px;
|
124
|
-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
125
|
-
}
|
126
|
-
|
127
|
-
.data-card h4 {
|
128
|
-
margin-top: 0;
|
129
|
-
margin-bottom: 8px;
|
130
|
-
color: #0052d9;
|
131
|
-
}
|
132
|
-
|
133
|
-
.data-card p {
|
134
|
-
margin: 0;
|
135
|
-
color: #666;
|
136
|
-
}
|
1
|
+
<template>
|
2
|
+
<div class="demo-container">
|
3
|
+
<h2>EbizSData 数据组件示例</h2>
|
4
|
+
|
5
|
+
<div class="demo-section">
|
6
|
+
<h3>基础用法</h3>
|
7
|
+
<div class="demo-block" style="background-color: #efefef;">
|
8
|
+
<EbizSData :apiConfig="{apiId:1933,apiType:'0'}" showDivider :defaultParams="{ status: 'active' }"
|
9
|
+
v-model:formData="formData1">
|
10
|
+
<template #form>
|
11
|
+
<ebiz-s-form-item v-model="formData1.keyword" label="搜索" type="input"></ebiz-s-form-item>
|
12
|
+
<ebiz-s-form-item label="搜索2" type="input"></ebiz-s-form-item>
|
13
|
+
<ebiz-s-form-item label="搜索2" type="input"></ebiz-s-form-item>
|
14
|
+
<ebiz-s-form-item label="搜索2" type="input"></ebiz-s-form-item>
|
15
|
+
<ebiz-s-form-item label="搜索2" type="input"></ebiz-s-form-item>
|
16
|
+
<ebiz-s-form-item label="搜索2" type="input"></ebiz-s-form-item>
|
17
|
+
<ebiz-s-form-item label="搜索2" type="input"></ebiz-s-form-item>
|
18
|
+
<ebiz-s-form-item label="搜索2" type="input"></ebiz-s-form-item>
|
19
|
+
<ebiz-s-form-item label="搜索2" type="input"></ebiz-s-form-item>
|
20
|
+
</template>
|
21
|
+
<template #left>
|
22
|
+
<EbizTdesignButtonDialog theme="primary" buttonText="新增" buttonIcon="add">
|
23
|
+
<template #body>
|
24
|
+
新增数据
|
25
|
+
</template>
|
26
|
+
</EbizTdesignButtonDialog>
|
27
|
+
</template>
|
28
|
+
<template #default="{ data }">
|
29
|
+
<tiny-grid :data="data" :columns="columns" bordered stripe />
|
30
|
+
</template>
|
31
|
+
</EbizSData>
|
32
|
+
</div>
|
33
|
+
</div>
|
34
|
+
|
35
|
+
</div>
|
36
|
+
</template>
|
37
|
+
|
38
|
+
<script>
|
39
|
+
export default {
|
40
|
+
name: "EbizSDataDemo"
|
41
|
+
};
|
42
|
+
</script>
|
43
|
+
|
44
|
+
<script setup>
|
45
|
+
import { ref } from 'vue';
|
46
|
+
import { EbizSData, EbizSFormItem } from '../index';
|
47
|
+
import EbizTdesignButtonDialog from '../components/EbizTdesignButtonDialog.vue';
|
48
|
+
|
49
|
+
// 表单数据
|
50
|
+
const formData1 = ref({
|
51
|
+
keyword: '',
|
52
|
+
status: 'all'
|
53
|
+
});
|
54
|
+
|
55
|
+
// 表格列配置
|
56
|
+
const columns = [
|
57
|
+
{
|
58
|
+
colKey: 'name',
|
59
|
+
title: '名称',
|
60
|
+
width: '200'
|
61
|
+
},
|
62
|
+
{
|
63
|
+
colKey: 'status',
|
64
|
+
title: '状态'
|
65
|
+
},
|
66
|
+
{
|
67
|
+
colKey: 'createTime',
|
68
|
+
title: '创建时间'
|
69
|
+
},
|
70
|
+
{
|
71
|
+
colKey: 'operation',
|
72
|
+
title: '操作'
|
73
|
+
}
|
74
|
+
];
|
75
|
+
</script>
|
76
|
+
|
77
|
+
<style scoped>
|
78
|
+
.demo-container {
|
79
|
+
padding: 24px;
|
80
|
+
}
|
81
|
+
|
82
|
+
.demo-section {
|
83
|
+
margin-bottom: 48px;
|
84
|
+
}
|
85
|
+
|
86
|
+
.demo-block {
|
87
|
+
margin-bottom: 24px;
|
88
|
+
padding: 24px;
|
89
|
+
border: 1px solid #e5e6eb;
|
90
|
+
border-radius: 6px;
|
91
|
+
}
|
92
|
+
|
93
|
+
.demo-code {
|
94
|
+
background-color: #f5f5f5;
|
95
|
+
padding: 16px;
|
96
|
+
border-radius: 6px;
|
97
|
+
font-size: 14px;
|
98
|
+
line-height: 1.5;
|
99
|
+
overflow-x: auto;
|
100
|
+
}
|
101
|
+
|
102
|
+
.demo-code pre {
|
103
|
+
margin: 0;
|
104
|
+
}
|
105
|
+
|
106
|
+
.custom-form {
|
107
|
+
margin-bottom: 16px;
|
108
|
+
padding: 16px;
|
109
|
+
background-color: #f9f9f9;
|
110
|
+
border-radius: 4px;
|
111
|
+
}
|
112
|
+
|
113
|
+
.data-cards {
|
114
|
+
display: flex;
|
115
|
+
flex-wrap: wrap;
|
116
|
+
gap: 16px;
|
117
|
+
}
|
118
|
+
|
119
|
+
.data-card {
|
120
|
+
flex: 1 1 300px;
|
121
|
+
padding: 16px;
|
122
|
+
background-color: #f9f9f9;
|
123
|
+
border-radius: 4px;
|
124
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
125
|
+
}
|
126
|
+
|
127
|
+
.data-card h4 {
|
128
|
+
margin-top: 0;
|
129
|
+
margin-bottom: 8px;
|
130
|
+
color: #0052d9;
|
131
|
+
}
|
132
|
+
|
133
|
+
.data-card p {
|
134
|
+
margin: 0;
|
135
|
+
color: #666;
|
136
|
+
}
|
137
137
|
</style>
|