@ebiz/designer-components 0.0.58 → 0.0.60
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 +5925 -5923
- 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 +262 -260
- package/src/components/senior/EbizSDialog/index.vue +713 -713
- 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
package/src/views/EbizSpace.vue
CHANGED
@@ -1,186 +1,186 @@
|
|
1
|
-
<template>
|
2
|
-
<div class="space-demo">
|
3
|
-
<h2>EbizSpace 间距组件</h2>
|
4
|
-
|
5
|
-
<h3>基本用法</h3>
|
6
|
-
<div class="demo-block">
|
7
|
-
<EbizSpace>
|
8
|
-
<EbizTdesignButton>按钮1</EbizTdesignButton>
|
9
|
-
<EbizTdesignButton>按钮2</EbizTdesignButton>
|
10
|
-
<EbizTdesignButton>按钮3</EbizTdesignButton>
|
11
|
-
</EbizSpace>
|
12
|
-
</div>
|
13
|
-
|
14
|
-
<h3>垂直间距</h3>
|
15
|
-
<div class="demo-block">
|
16
|
-
<EbizSpace direction="vertical" style="width: 100%">
|
17
|
-
<EbizTdesignCard title="卡片1" summary="这是卡片1的内容">
|
18
|
-
卡片内容区域可以是文字、图片、表单、表格等形式信息内容
|
19
|
-
</EbizTdesignCard>
|
20
|
-
<EbizTdesignCard title="卡片2" summary="这是卡片2的内容">
|
21
|
-
卡片内容区域可以是文字、图片、表单、表格等形式信息内容
|
22
|
-
</EbizTdesignCard>
|
23
|
-
</EbizSpace>
|
24
|
-
</div>
|
25
|
-
|
26
|
-
<h3>间距大小</h3>
|
27
|
-
<div class="demo-block">
|
28
|
-
<h4>小间距 (small)</h4>
|
29
|
-
<EbizSpace size="small">
|
30
|
-
<EbizTdesignButton>按钮1</EbizTdesignButton>
|
31
|
-
<EbizTdesignButton>按钮2</EbizTdesignButton>
|
32
|
-
<EbizTdesignButton>按钮3</EbizTdesignButton>
|
33
|
-
</EbizSpace>
|
34
|
-
|
35
|
-
<h4>中等间距 (medium - 默认)</h4>
|
36
|
-
<EbizSpace size="medium">
|
37
|
-
<EbizTdesignButton>按钮1</EbizTdesignButton>
|
38
|
-
<EbizTdesignButton>按钮2</EbizTdesignButton>
|
39
|
-
<EbizTdesignButton>按钮3</EbizTdesignButton>
|
40
|
-
</EbizSpace>
|
41
|
-
|
42
|
-
<h4>大间距 (large)</h4>
|
43
|
-
<EbizSpace size="large">
|
44
|
-
<EbizTdesignButton>按钮1</EbizTdesignButton>
|
45
|
-
<EbizTdesignButton>按钮2</EbizTdesignButton>
|
46
|
-
<EbizTdesignButton>按钮3</EbizTdesignButton>
|
47
|
-
</EbizSpace>
|
48
|
-
|
49
|
-
<h4>自定义间距 (24px)</h4>
|
50
|
-
<EbizSpace :size="24">
|
51
|
-
<EbizTdesignButton>按钮1</EbizTdesignButton>
|
52
|
-
<EbizTdesignButton>按钮2</EbizTdesignButton>
|
53
|
-
<EbizTdesignButton>按钮3</EbizTdesignButton>
|
54
|
-
</EbizSpace>
|
55
|
-
|
56
|
-
<h4>自定义行列间距 [16, 24]</h4>
|
57
|
-
<EbizSpace :size="[16, 24]" breakLine>
|
58
|
-
<EbizTdesignButton>按钮1</EbizTdesignButton>
|
59
|
-
<EbizTdesignButton>按钮2</EbizTdesignButton>
|
60
|
-
<EbizTdesignButton>按钮3</EbizTdesignButton>
|
61
|
-
<EbizTdesignButton>按钮4</EbizTdesignButton>
|
62
|
-
<EbizTdesignButton>按钮5</EbizTdesignButton>
|
63
|
-
<EbizTdesignButton>按钮6</EbizTdesignButton>
|
64
|
-
</EbizSpace>
|
65
|
-
</div>
|
66
|
-
|
67
|
-
<h3>对齐方式</h3>
|
68
|
-
<div class="demo-block alignment">
|
69
|
-
<EbizSpace direction="vertical" size="large">
|
70
|
-
<div>
|
71
|
-
<span class="alignment-text">顶部对齐 (start):</span>
|
72
|
-
<EbizSpace align="start">
|
73
|
-
<div class="alignment-block small"></div>
|
74
|
-
<div class="alignment-block medium"></div>
|
75
|
-
<div class="alignment-block large"></div>
|
76
|
-
</EbizSpace>
|
77
|
-
</div>
|
78
|
-
|
79
|
-
<div>
|
80
|
-
<span class="alignment-text">居中对齐 (center):</span>
|
81
|
-
<EbizSpace align="center">
|
82
|
-
<div class="alignment-block small"></div>
|
83
|
-
<div class="alignment-block medium"></div>
|
84
|
-
<div class="alignment-block large"></div>
|
85
|
-
</EbizSpace>
|
86
|
-
</div>
|
87
|
-
|
88
|
-
<div>
|
89
|
-
<span class="alignment-text">底部对齐 (end):</span>
|
90
|
-
<EbizSpace align="end">
|
91
|
-
<div class="alignment-block small"></div>
|
92
|
-
<div class="alignment-block medium"></div>
|
93
|
-
<div class="alignment-block large"></div>
|
94
|
-
</EbizSpace>
|
95
|
-
</div>
|
96
|
-
|
97
|
-
<div>
|
98
|
-
<span class="alignment-text">基线对齐 (baseline):</span>
|
99
|
-
<EbizSpace align="baseline">
|
100
|
-
<div class="alignment-block small">
|
101
|
-
<span style="position: relative; top: 16px;">文本</span>
|
102
|
-
</div>
|
103
|
-
<div class="alignment-block medium">
|
104
|
-
<span style="position: relative; top: 32px;">文本</span>
|
105
|
-
</div>
|
106
|
-
<div class="alignment-block large">
|
107
|
-
<span style="position: relative; top: 48px;">文本</span>
|
108
|
-
</div>
|
109
|
-
</EbizSpace>
|
110
|
-
</div>
|
111
|
-
</EbizSpace>
|
112
|
-
</div>
|
113
|
-
|
114
|
-
<h3>自动换行</h3>
|
115
|
-
<div class="demo-block">
|
116
|
-
<EbizSpace breakLine>
|
117
|
-
<EbizTdesignButton v-for="i in 10" :key="i">按钮{{ i }}</EbizTdesignButton>
|
118
|
-
</EbizSpace>
|
119
|
-
</div>
|
120
|
-
|
121
|
-
<h3>设置分隔符</h3>
|
122
|
-
<div class="demo-block">
|
123
|
-
<EbizSpace separator="|">
|
124
|
-
<span>文本1</span>
|
125
|
-
<span>文本2</span>
|
126
|
-
<span>文本3</span>
|
127
|
-
<span>文本4</span>
|
128
|
-
</EbizSpace>
|
129
|
-
</div>
|
130
|
-
</div>
|
131
|
-
</template>
|
132
|
-
|
133
|
-
<script setup>
|
134
|
-
import { EbizSpace, EbizTdesignButton, EbizTdesignCard } from '../index.js';
|
135
|
-
</script>
|
136
|
-
|
137
|
-
<style scoped>
|
138
|
-
.space-demo {
|
139
|
-
padding: 20px;
|
140
|
-
}
|
141
|
-
|
142
|
-
.demo-block {
|
143
|
-
margin-bottom: 20px;
|
144
|
-
padding: 16px;
|
145
|
-
border: 1px solid #e0e0e0;
|
146
|
-
border-radius: 4px;
|
147
|
-
}
|
148
|
-
|
149
|
-
.alignment-block {
|
150
|
-
background-color: #e0e6ff;
|
151
|
-
display: flex;
|
152
|
-
align-items: center;
|
153
|
-
justify-content: center;
|
154
|
-
}
|
155
|
-
|
156
|
-
.alignment-block.small {
|
157
|
-
width: 60px;
|
158
|
-
height: 40px;
|
159
|
-
}
|
160
|
-
|
161
|
-
.alignment-block.medium {
|
162
|
-
width: 80px;
|
163
|
-
height: 80px;
|
164
|
-
}
|
165
|
-
|
166
|
-
.alignment-block.large {
|
167
|
-
width: 100px;
|
168
|
-
height: 120px;
|
169
|
-
}
|
170
|
-
|
171
|
-
.alignment-text {
|
172
|
-
display: inline-block;
|
173
|
-
width: 150px;
|
174
|
-
font-weight: 600;
|
175
|
-
}
|
176
|
-
|
177
|
-
h3 {
|
178
|
-
margin-top: 30px;
|
179
|
-
margin-bottom: 10px;
|
180
|
-
}
|
181
|
-
|
182
|
-
h4 {
|
183
|
-
margin-top: 16px;
|
184
|
-
margin-bottom: 8px;
|
185
|
-
}
|
1
|
+
<template>
|
2
|
+
<div class="space-demo">
|
3
|
+
<h2>EbizSpace 间距组件</h2>
|
4
|
+
|
5
|
+
<h3>基本用法</h3>
|
6
|
+
<div class="demo-block">
|
7
|
+
<EbizSpace>
|
8
|
+
<EbizTdesignButton>按钮1</EbizTdesignButton>
|
9
|
+
<EbizTdesignButton>按钮2</EbizTdesignButton>
|
10
|
+
<EbizTdesignButton>按钮3</EbizTdesignButton>
|
11
|
+
</EbizSpace>
|
12
|
+
</div>
|
13
|
+
|
14
|
+
<h3>垂直间距</h3>
|
15
|
+
<div class="demo-block">
|
16
|
+
<EbizSpace direction="vertical" style="width: 100%">
|
17
|
+
<EbizTdesignCard title="卡片1" summary="这是卡片1的内容">
|
18
|
+
卡片内容区域可以是文字、图片、表单、表格等形式信息内容
|
19
|
+
</EbizTdesignCard>
|
20
|
+
<EbizTdesignCard title="卡片2" summary="这是卡片2的内容">
|
21
|
+
卡片内容区域可以是文字、图片、表单、表格等形式信息内容
|
22
|
+
</EbizTdesignCard>
|
23
|
+
</EbizSpace>
|
24
|
+
</div>
|
25
|
+
|
26
|
+
<h3>间距大小</h3>
|
27
|
+
<div class="demo-block">
|
28
|
+
<h4>小间距 (small)</h4>
|
29
|
+
<EbizSpace size="small">
|
30
|
+
<EbizTdesignButton>按钮1</EbizTdesignButton>
|
31
|
+
<EbizTdesignButton>按钮2</EbizTdesignButton>
|
32
|
+
<EbizTdesignButton>按钮3</EbizTdesignButton>
|
33
|
+
</EbizSpace>
|
34
|
+
|
35
|
+
<h4>中等间距 (medium - 默认)</h4>
|
36
|
+
<EbizSpace size="medium">
|
37
|
+
<EbizTdesignButton>按钮1</EbizTdesignButton>
|
38
|
+
<EbizTdesignButton>按钮2</EbizTdesignButton>
|
39
|
+
<EbizTdesignButton>按钮3</EbizTdesignButton>
|
40
|
+
</EbizSpace>
|
41
|
+
|
42
|
+
<h4>大间距 (large)</h4>
|
43
|
+
<EbizSpace size="large">
|
44
|
+
<EbizTdesignButton>按钮1</EbizTdesignButton>
|
45
|
+
<EbizTdesignButton>按钮2</EbizTdesignButton>
|
46
|
+
<EbizTdesignButton>按钮3</EbizTdesignButton>
|
47
|
+
</EbizSpace>
|
48
|
+
|
49
|
+
<h4>自定义间距 (24px)</h4>
|
50
|
+
<EbizSpace :size="24">
|
51
|
+
<EbizTdesignButton>按钮1</EbizTdesignButton>
|
52
|
+
<EbizTdesignButton>按钮2</EbizTdesignButton>
|
53
|
+
<EbizTdesignButton>按钮3</EbizTdesignButton>
|
54
|
+
</EbizSpace>
|
55
|
+
|
56
|
+
<h4>自定义行列间距 [16, 24]</h4>
|
57
|
+
<EbizSpace :size="[16, 24]" breakLine>
|
58
|
+
<EbizTdesignButton>按钮1</EbizTdesignButton>
|
59
|
+
<EbizTdesignButton>按钮2</EbizTdesignButton>
|
60
|
+
<EbizTdesignButton>按钮3</EbizTdesignButton>
|
61
|
+
<EbizTdesignButton>按钮4</EbizTdesignButton>
|
62
|
+
<EbizTdesignButton>按钮5</EbizTdesignButton>
|
63
|
+
<EbizTdesignButton>按钮6</EbizTdesignButton>
|
64
|
+
</EbizSpace>
|
65
|
+
</div>
|
66
|
+
|
67
|
+
<h3>对齐方式</h3>
|
68
|
+
<div class="demo-block alignment">
|
69
|
+
<EbizSpace direction="vertical" size="large">
|
70
|
+
<div>
|
71
|
+
<span class="alignment-text">顶部对齐 (start):</span>
|
72
|
+
<EbizSpace align="start">
|
73
|
+
<div class="alignment-block small"></div>
|
74
|
+
<div class="alignment-block medium"></div>
|
75
|
+
<div class="alignment-block large"></div>
|
76
|
+
</EbizSpace>
|
77
|
+
</div>
|
78
|
+
|
79
|
+
<div>
|
80
|
+
<span class="alignment-text">居中对齐 (center):</span>
|
81
|
+
<EbizSpace align="center">
|
82
|
+
<div class="alignment-block small"></div>
|
83
|
+
<div class="alignment-block medium"></div>
|
84
|
+
<div class="alignment-block large"></div>
|
85
|
+
</EbizSpace>
|
86
|
+
</div>
|
87
|
+
|
88
|
+
<div>
|
89
|
+
<span class="alignment-text">底部对齐 (end):</span>
|
90
|
+
<EbizSpace align="end">
|
91
|
+
<div class="alignment-block small"></div>
|
92
|
+
<div class="alignment-block medium"></div>
|
93
|
+
<div class="alignment-block large"></div>
|
94
|
+
</EbizSpace>
|
95
|
+
</div>
|
96
|
+
|
97
|
+
<div>
|
98
|
+
<span class="alignment-text">基线对齐 (baseline):</span>
|
99
|
+
<EbizSpace align="baseline">
|
100
|
+
<div class="alignment-block small">
|
101
|
+
<span style="position: relative; top: 16px;">文本</span>
|
102
|
+
</div>
|
103
|
+
<div class="alignment-block medium">
|
104
|
+
<span style="position: relative; top: 32px;">文本</span>
|
105
|
+
</div>
|
106
|
+
<div class="alignment-block large">
|
107
|
+
<span style="position: relative; top: 48px;">文本</span>
|
108
|
+
</div>
|
109
|
+
</EbizSpace>
|
110
|
+
</div>
|
111
|
+
</EbizSpace>
|
112
|
+
</div>
|
113
|
+
|
114
|
+
<h3>自动换行</h3>
|
115
|
+
<div class="demo-block">
|
116
|
+
<EbizSpace breakLine>
|
117
|
+
<EbizTdesignButton v-for="i in 10" :key="i">按钮{{ i }}</EbizTdesignButton>
|
118
|
+
</EbizSpace>
|
119
|
+
</div>
|
120
|
+
|
121
|
+
<h3>设置分隔符</h3>
|
122
|
+
<div class="demo-block">
|
123
|
+
<EbizSpace separator="|">
|
124
|
+
<span>文本1</span>
|
125
|
+
<span>文本2</span>
|
126
|
+
<span>文本3</span>
|
127
|
+
<span>文本4</span>
|
128
|
+
</EbizSpace>
|
129
|
+
</div>
|
130
|
+
</div>
|
131
|
+
</template>
|
132
|
+
|
133
|
+
<script setup>
|
134
|
+
import { EbizSpace, EbizTdesignButton, EbizTdesignCard } from '../index.js';
|
135
|
+
</script>
|
136
|
+
|
137
|
+
<style scoped>
|
138
|
+
.space-demo {
|
139
|
+
padding: 20px;
|
140
|
+
}
|
141
|
+
|
142
|
+
.demo-block {
|
143
|
+
margin-bottom: 20px;
|
144
|
+
padding: 16px;
|
145
|
+
border: 1px solid #e0e0e0;
|
146
|
+
border-radius: 4px;
|
147
|
+
}
|
148
|
+
|
149
|
+
.alignment-block {
|
150
|
+
background-color: #e0e6ff;
|
151
|
+
display: flex;
|
152
|
+
align-items: center;
|
153
|
+
justify-content: center;
|
154
|
+
}
|
155
|
+
|
156
|
+
.alignment-block.small {
|
157
|
+
width: 60px;
|
158
|
+
height: 40px;
|
159
|
+
}
|
160
|
+
|
161
|
+
.alignment-block.medium {
|
162
|
+
width: 80px;
|
163
|
+
height: 80px;
|
164
|
+
}
|
165
|
+
|
166
|
+
.alignment-block.large {
|
167
|
+
width: 100px;
|
168
|
+
height: 120px;
|
169
|
+
}
|
170
|
+
|
171
|
+
.alignment-text {
|
172
|
+
display: inline-block;
|
173
|
+
width: 150px;
|
174
|
+
font-weight: 600;
|
175
|
+
}
|
176
|
+
|
177
|
+
h3 {
|
178
|
+
margin-top: 30px;
|
179
|
+
margin-bottom: 10px;
|
180
|
+
}
|
181
|
+
|
182
|
+
h4 {
|
183
|
+
margin-top: 16px;
|
184
|
+
margin-bottom: 8px;
|
185
|
+
}
|
186
186
|
</style>
|