@ebiz/designer-components 0.0.58 → 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 -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
@@ -1,147 +1,147 @@
|
|
1
|
-
<template>
|
2
|
-
<div class="time-picker-demo">
|
3
|
-
<h2>时间选择器 EbizTimePicker</h2>
|
4
|
-
|
5
|
-
<h3>基本用法</h3>
|
6
|
-
<div class="demo-section">
|
7
|
-
<EbizTimePicker v-model="value1" placeholder="请选择时间" />
|
8
|
-
<div class="demo-value">选中值: {{ value1 }}</div>
|
9
|
-
</div>
|
10
|
-
|
11
|
-
<h3>时间格式</h3>
|
12
|
-
<div class="demo-section">
|
13
|
-
<EbizTimePicker v-model="value2" format="HH:mm" placeholder="时分格式 HH:mm" />
|
14
|
-
<div class="demo-value">选中值: {{ value2 }}</div>
|
15
|
-
</div>
|
16
|
-
|
17
|
-
<h3>禁用状态</h3>
|
18
|
-
<div class="demo-section">
|
19
|
-
<EbizTimePicker v-model="value3" disabled placeholder="禁用状态" />
|
20
|
-
</div>
|
21
|
-
|
22
|
-
<h3>时间范围选择</h3>
|
23
|
-
<div class="demo-section">
|
24
|
-
<EbizTimePicker v-model="value4" range placeholder="请选择时间范围" />
|
25
|
-
<div class="demo-value">选中值: {{ value4 }}</div>
|
26
|
-
</div>
|
27
|
-
|
28
|
-
<h3>步长设置</h3>
|
29
|
-
<div class="demo-section">
|
30
|
-
<EbizTimePicker v-model="value5" :steps="[2, 10, 15]" placeholder="步长:时(2) 分(10) 秒(15)" />
|
31
|
-
<div class="demo-value">选中值: {{ value5 }}</div>
|
32
|
-
</div>
|
33
|
-
|
34
|
-
<h3>禁用时间</h3>
|
35
|
-
<div class="demo-section">
|
36
|
-
<EbizTimePicker v-model="value6" :disable-time="disableTime" placeholder="上午禁用" />
|
37
|
-
<div class="demo-value">选中值: {{ value6 }}</div>
|
38
|
-
</div>
|
39
|
-
|
40
|
-
<h3>不同尺寸</h3>
|
41
|
-
<div class="demo-section">
|
42
|
-
<div class="size-row">
|
43
|
-
<EbizTimePicker v-model="value7" size="small" placeholder="小尺寸" />
|
44
|
-
<EbizTimePicker v-model="value7" size="medium" placeholder="中尺寸(默认)" />
|
45
|
-
<EbizTimePicker v-model="value7" size="large" placeholder="大尺寸" />
|
46
|
-
</div>
|
47
|
-
</div>
|
48
|
-
|
49
|
-
<h3>提示信息</h3>
|
50
|
-
<div class="demo-section">
|
51
|
-
<EbizTimePicker v-model="value8" tips="这是一个提示文本" placeholder="带提示信息" />
|
52
|
-
</div>
|
53
|
-
|
54
|
-
<h3>前置/后置插槽</h3>
|
55
|
-
<div class="demo-section">
|
56
|
-
<EbizTimePicker v-model="value9" placeholder="带前置内容">
|
57
|
-
<template #prepend>
|
58
|
-
<span class="prepend-content">时间:</span>
|
59
|
-
</template>
|
60
|
-
</EbizTimePicker>
|
61
|
-
</div>
|
62
|
-
</div>
|
63
|
-
</template>
|
64
|
-
|
65
|
-
<script setup>
|
66
|
-
import { ref } from 'vue';
|
67
|
-
import { EbizTimePicker } from '../index.js';
|
68
|
-
|
69
|
-
// 基本用法
|
70
|
-
const value1 = ref('');
|
71
|
-
|
72
|
-
// 时间格式
|
73
|
-
const value2 = ref('');
|
74
|
-
|
75
|
-
// 禁用状态
|
76
|
-
const value3 = ref('12:30:00');
|
77
|
-
|
78
|
-
// 时间范围选择
|
79
|
-
const value4 = ref(['09:00:00', '18:00:00']);
|
80
|
-
|
81
|
-
// 步长设置
|
82
|
-
const value5 = ref('');
|
83
|
-
|
84
|
-
// 禁用时间
|
85
|
-
const value6 = ref('');
|
86
|
-
const disableTime = (h) => {
|
87
|
-
// 禁用上午时间段 (0-12点)
|
88
|
-
return h < 12;
|
89
|
-
};
|
90
|
-
|
91
|
-
// 不同尺寸
|
92
|
-
const value7 = ref('');
|
93
|
-
|
94
|
-
// 提示信息
|
95
|
-
const value8 = ref('');
|
96
|
-
|
97
|
-
// 前置/后置插槽
|
98
|
-
const value9 = ref('');
|
99
|
-
</script>
|
100
|
-
|
101
|
-
<style scoped>
|
102
|
-
.time-picker-demo {
|
103
|
-
padding: 20px;
|
104
|
-
max-width: 800px;
|
105
|
-
margin: 0 auto;
|
106
|
-
}
|
107
|
-
|
108
|
-
h2 {
|
109
|
-
margin-bottom: 30px;
|
110
|
-
font-weight: 500;
|
111
|
-
border-bottom: 1px solid #eee;
|
112
|
-
padding-bottom: 10px;
|
113
|
-
}
|
114
|
-
|
115
|
-
h3 {
|
116
|
-
margin-top: 30px;
|
117
|
-
margin-bottom: 15px;
|
118
|
-
font-weight: 400;
|
119
|
-
font-size: 18px;
|
120
|
-
color: #333;
|
121
|
-
}
|
122
|
-
|
123
|
-
.demo-section {
|
124
|
-
margin-bottom: 30px;
|
125
|
-
padding: 20px;
|
126
|
-
background-color: #f9f9f9;
|
127
|
-
border-radius: 4px;
|
128
|
-
}
|
129
|
-
|
130
|
-
.demo-value {
|
131
|
-
margin-top: 10px;
|
132
|
-
color: #606060;
|
133
|
-
font-size: 14px;
|
134
|
-
padding: 5px 0;
|
135
|
-
}
|
136
|
-
|
137
|
-
.size-row {
|
138
|
-
display: flex;
|
139
|
-
gap: 20px;
|
140
|
-
align-items: center;
|
141
|
-
}
|
142
|
-
|
143
|
-
.prepend-content {
|
144
|
-
padding: 0 10px;
|
145
|
-
color: #0052D9;
|
146
|
-
}
|
1
|
+
<template>
|
2
|
+
<div class="time-picker-demo">
|
3
|
+
<h2>时间选择器 EbizTimePicker</h2>
|
4
|
+
|
5
|
+
<h3>基本用法</h3>
|
6
|
+
<div class="demo-section">
|
7
|
+
<EbizTimePicker v-model="value1" placeholder="请选择时间" />
|
8
|
+
<div class="demo-value">选中值: {{ value1 }}</div>
|
9
|
+
</div>
|
10
|
+
|
11
|
+
<h3>时间格式</h3>
|
12
|
+
<div class="demo-section">
|
13
|
+
<EbizTimePicker v-model="value2" format="HH:mm" placeholder="时分格式 HH:mm" />
|
14
|
+
<div class="demo-value">选中值: {{ value2 }}</div>
|
15
|
+
</div>
|
16
|
+
|
17
|
+
<h3>禁用状态</h3>
|
18
|
+
<div class="demo-section">
|
19
|
+
<EbizTimePicker v-model="value3" disabled placeholder="禁用状态" />
|
20
|
+
</div>
|
21
|
+
|
22
|
+
<h3>时间范围选择</h3>
|
23
|
+
<div class="demo-section">
|
24
|
+
<EbizTimePicker v-model="value4" range placeholder="请选择时间范围" />
|
25
|
+
<div class="demo-value">选中值: {{ value4 }}</div>
|
26
|
+
</div>
|
27
|
+
|
28
|
+
<h3>步长设置</h3>
|
29
|
+
<div class="demo-section">
|
30
|
+
<EbizTimePicker v-model="value5" :steps="[2, 10, 15]" placeholder="步长:时(2) 分(10) 秒(15)" />
|
31
|
+
<div class="demo-value">选中值: {{ value5 }}</div>
|
32
|
+
</div>
|
33
|
+
|
34
|
+
<h3>禁用时间</h3>
|
35
|
+
<div class="demo-section">
|
36
|
+
<EbizTimePicker v-model="value6" :disable-time="disableTime" placeholder="上午禁用" />
|
37
|
+
<div class="demo-value">选中值: {{ value6 }}</div>
|
38
|
+
</div>
|
39
|
+
|
40
|
+
<h3>不同尺寸</h3>
|
41
|
+
<div class="demo-section">
|
42
|
+
<div class="size-row">
|
43
|
+
<EbizTimePicker v-model="value7" size="small" placeholder="小尺寸" />
|
44
|
+
<EbizTimePicker v-model="value7" size="medium" placeholder="中尺寸(默认)" />
|
45
|
+
<EbizTimePicker v-model="value7" size="large" placeholder="大尺寸" />
|
46
|
+
</div>
|
47
|
+
</div>
|
48
|
+
|
49
|
+
<h3>提示信息</h3>
|
50
|
+
<div class="demo-section">
|
51
|
+
<EbizTimePicker v-model="value8" tips="这是一个提示文本" placeholder="带提示信息" />
|
52
|
+
</div>
|
53
|
+
|
54
|
+
<h3>前置/后置插槽</h3>
|
55
|
+
<div class="demo-section">
|
56
|
+
<EbizTimePicker v-model="value9" placeholder="带前置内容">
|
57
|
+
<template #prepend>
|
58
|
+
<span class="prepend-content">时间:</span>
|
59
|
+
</template>
|
60
|
+
</EbizTimePicker>
|
61
|
+
</div>
|
62
|
+
</div>
|
63
|
+
</template>
|
64
|
+
|
65
|
+
<script setup>
|
66
|
+
import { ref } from 'vue';
|
67
|
+
import { EbizTimePicker } from '../index.js';
|
68
|
+
|
69
|
+
// 基本用法
|
70
|
+
const value1 = ref('');
|
71
|
+
|
72
|
+
// 时间格式
|
73
|
+
const value2 = ref('');
|
74
|
+
|
75
|
+
// 禁用状态
|
76
|
+
const value3 = ref('12:30:00');
|
77
|
+
|
78
|
+
// 时间范围选择
|
79
|
+
const value4 = ref(['09:00:00', '18:00:00']);
|
80
|
+
|
81
|
+
// 步长设置
|
82
|
+
const value5 = ref('');
|
83
|
+
|
84
|
+
// 禁用时间
|
85
|
+
const value6 = ref('');
|
86
|
+
const disableTime = (h) => {
|
87
|
+
// 禁用上午时间段 (0-12点)
|
88
|
+
return h < 12;
|
89
|
+
};
|
90
|
+
|
91
|
+
// 不同尺寸
|
92
|
+
const value7 = ref('');
|
93
|
+
|
94
|
+
// 提示信息
|
95
|
+
const value8 = ref('');
|
96
|
+
|
97
|
+
// 前置/后置插槽
|
98
|
+
const value9 = ref('');
|
99
|
+
</script>
|
100
|
+
|
101
|
+
<style scoped>
|
102
|
+
.time-picker-demo {
|
103
|
+
padding: 20px;
|
104
|
+
max-width: 800px;
|
105
|
+
margin: 0 auto;
|
106
|
+
}
|
107
|
+
|
108
|
+
h2 {
|
109
|
+
margin-bottom: 30px;
|
110
|
+
font-weight: 500;
|
111
|
+
border-bottom: 1px solid #eee;
|
112
|
+
padding-bottom: 10px;
|
113
|
+
}
|
114
|
+
|
115
|
+
h3 {
|
116
|
+
margin-top: 30px;
|
117
|
+
margin-bottom: 15px;
|
118
|
+
font-weight: 400;
|
119
|
+
font-size: 18px;
|
120
|
+
color: #333;
|
121
|
+
}
|
122
|
+
|
123
|
+
.demo-section {
|
124
|
+
margin-bottom: 30px;
|
125
|
+
padding: 20px;
|
126
|
+
background-color: #f9f9f9;
|
127
|
+
border-radius: 4px;
|
128
|
+
}
|
129
|
+
|
130
|
+
.demo-value {
|
131
|
+
margin-top: 10px;
|
132
|
+
color: #606060;
|
133
|
+
font-size: 14px;
|
134
|
+
padding: 5px 0;
|
135
|
+
}
|
136
|
+
|
137
|
+
.size-row {
|
138
|
+
display: flex;
|
139
|
+
gap: 20px;
|
140
|
+
align-items: center;
|
141
|
+
}
|
142
|
+
|
143
|
+
.prepend-content {
|
144
|
+
padding: 0 10px;
|
145
|
+
color: #0052D9;
|
146
|
+
}
|
147
147
|
</style>
|
@@ -1,161 +1,161 @@
|
|
1
|
-
<template>
|
2
|
-
<div class="timeline-demo">
|
3
|
-
<h1>TDesign Timeline 组件示例</h1>
|
4
|
-
|
5
|
-
<h2>基础时间轴</h2>
|
6
|
-
<div class="demo-section">
|
7
|
-
<EbizTimeline>
|
8
|
-
<EbizTimelineItem label="2022-01-01" content="事件一" />
|
9
|
-
<EbizTimelineItem label="2022-02-01" content="事件二" />
|
10
|
-
<EbizTimelineItem label="2022-03-01" content="事件三" />
|
11
|
-
<EbizTimelineItem label="2022-04-01" content="事件四" />
|
12
|
-
</EbizTimeline>
|
13
|
-
</div>
|
14
|
-
|
15
|
-
<h2>时间轴方向</h2>
|
16
|
-
<div class="demo-section">
|
17
|
-
<h3>水平方向</h3>
|
18
|
-
<EbizTimeline layout="horizontal">
|
19
|
-
<EbizTimelineItem label="2022-01-01" content="事件一" />
|
20
|
-
<EbizTimelineItem label="2022-02-01" content="事件二" />
|
21
|
-
<EbizTimelineItem label="2022-03-01" content="事件三" />
|
22
|
-
<EbizTimelineItem label="2022-04-01" content="事件四" />
|
23
|
-
</EbizTimeline>
|
24
|
-
</div>
|
25
|
-
|
26
|
-
<h2>时间轴主题</h2>
|
27
|
-
<div class="demo-section">
|
28
|
-
<h3>点状主题</h3>
|
29
|
-
<EbizTimeline theme="dot">
|
30
|
-
<EbizTimelineItem label="2022-01-01" content="事件一" />
|
31
|
-
<EbizTimelineItem label="2022-02-01" content="事件二" />
|
32
|
-
<EbizTimelineItem label="2022-03-01" content="事件三" />
|
33
|
-
<EbizTimelineItem label="2022-04-01" content="事件四" />
|
34
|
-
</EbizTimeline>
|
35
|
-
</div>
|
36
|
-
|
37
|
-
<h2>不同的展示方式</h2>
|
38
|
-
<div class="demo-section">
|
39
|
-
<h3>左侧展示</h3>
|
40
|
-
<EbizTimeline mode="left">
|
41
|
-
<EbizTimelineItem label="2022-01-01" content="事件一" />
|
42
|
-
<EbizTimelineItem label="2022-02-01" content="事件二" />
|
43
|
-
<EbizTimelineItem label="2022-03-01" content="事件三" />
|
44
|
-
<EbizTimelineItem label="2022-04-01" content="事件四" />
|
45
|
-
</EbizTimeline>
|
46
|
-
|
47
|
-
<h3>右侧展示</h3>
|
48
|
-
<EbizTimeline mode="right">
|
49
|
-
<EbizTimelineItem label="2022-01-01" content="事件一" />
|
50
|
-
<EbizTimelineItem label="2022-02-01" content="事件二" />
|
51
|
-
<EbizTimelineItem label="2022-03-01" content="事件三" />
|
52
|
-
<EbizTimelineItem label="2022-04-01" content="事件四" />
|
53
|
-
</EbizTimeline>
|
54
|
-
|
55
|
-
<h3>同侧展示</h3>
|
56
|
-
<EbizTimeline mode="same">
|
57
|
-
<EbizTimelineItem label="2022-01-01" content="事件一" />
|
58
|
-
<EbizTimelineItem label="2022-02-01" content="事件二" />
|
59
|
-
<EbizTimelineItem label="2022-03-01" content="事件三" />
|
60
|
-
<EbizTimelineItem label="2022-04-01" content="事件四" />
|
61
|
-
</EbizTimeline>
|
62
|
-
</div>
|
63
|
-
|
64
|
-
<h2>标签位置</h2>
|
65
|
-
<div class="demo-section">
|
66
|
-
<h3>标签在左侧</h3>
|
67
|
-
<EbizTimeline labelAlign="left">
|
68
|
-
<EbizTimelineItem label="2022-01-01" content="事件一" />
|
69
|
-
<EbizTimelineItem label="2022-02-01" content="事件二" />
|
70
|
-
<EbizTimelineItem label="2022-03-01" content="事件三" />
|
71
|
-
<EbizTimelineItem label="2022-04-01" content="事件四" />
|
72
|
-
</EbizTimeline>
|
73
|
-
|
74
|
-
<h3>标签在顶部</h3>
|
75
|
-
<EbizTimeline labelAlign="top">
|
76
|
-
<EbizTimelineItem label="2022-01-01" content="事件一" />
|
77
|
-
<EbizTimelineItem label="2022-02-01" content="事件二" />
|
78
|
-
<EbizTimelineItem label="2022-03-01" content="事件三" />
|
79
|
-
<EbizTimelineItem label="2022-04-01" content="事件四" />
|
80
|
-
</EbizTimeline>
|
81
|
-
</div>
|
82
|
-
|
83
|
-
<h2>自定义节点颜色</h2>
|
84
|
-
<div class="demo-section">
|
85
|
-
<EbizTimeline>
|
86
|
-
<EbizTimelineItem label="2022-01-01" content="事件一" dotColor="primary" />
|
87
|
-
<EbizTimelineItem label="2022-02-01" content="事件二" dotColor="warning" />
|
88
|
-
<EbizTimelineItem label="2022-03-01" content="事件三" dotColor="error" />
|
89
|
-
<EbizTimelineItem label="2022-04-01" content="事件四" dotColor="success" />
|
90
|
-
</EbizTimeline>
|
91
|
-
</div>
|
92
|
-
|
93
|
-
<h2>使用插槽自定义内容</h2>
|
94
|
-
<div class="demo-section">
|
95
|
-
<EbizTimeline>
|
96
|
-
<EbizTimelineItem label="2022-01-01">
|
97
|
-
<div class="custom-content">
|
98
|
-
<h4>自定义内容一</h4>
|
99
|
-
<p>这是一个自定义内容示例</p>
|
100
|
-
</div>
|
101
|
-
</EbizTimelineItem>
|
102
|
-
<EbizTimelineItem label="2022-02-01">
|
103
|
-
<div class="custom-content">
|
104
|
-
<h4>自定义内容二</h4>
|
105
|
-
<p>这是一个自定义内容示例</p>
|
106
|
-
</div>
|
107
|
-
</EbizTimelineItem>
|
108
|
-
</EbizTimeline>
|
109
|
-
</div>
|
110
|
-
|
111
|
-
<h2>加载状态</h2>
|
112
|
-
<div class="demo-section">
|
113
|
-
<EbizTimeline>
|
114
|
-
<EbizTimelineItem label="2022-01-01" content="已完成" />
|
115
|
-
<EbizTimelineItem label="2022-02-01" content="进行中" loading />
|
116
|
-
<EbizTimelineItem label="2022-03-01" content="未开始" />
|
117
|
-
<EbizTimelineItem label="2022-04-01" content="未开始" />
|
118
|
-
</EbizTimeline>
|
119
|
-
</div>
|
120
|
-
</div>
|
121
|
-
</template>
|
122
|
-
|
123
|
-
<script setup>
|
124
|
-
import { EbizTimeline, EbizTimelineItem } from '../index.js';
|
125
|
-
</script>
|
126
|
-
|
127
|
-
<style scoped>
|
128
|
-
.timeline-demo {
|
129
|
-
padding: 20px;
|
130
|
-
}
|
131
|
-
|
132
|
-
.demo-section {
|
133
|
-
margin-bottom: 40px;
|
134
|
-
}
|
135
|
-
|
136
|
-
h1 {
|
137
|
-
margin-bottom: 30px;
|
138
|
-
}
|
139
|
-
|
140
|
-
h2 {
|
141
|
-
margin: 20px 0;
|
142
|
-
}
|
143
|
-
|
144
|
-
h3 {
|
145
|
-
margin: 15px 0;
|
146
|
-
}
|
147
|
-
|
148
|
-
.custom-content {
|
149
|
-
padding: 10px;
|
150
|
-
border: 1px solid #eee;
|
151
|
-
border-radius: 4px;
|
152
|
-
}
|
153
|
-
|
154
|
-
.custom-content h4 {
|
155
|
-
margin: 0 0 10px 0;
|
156
|
-
}
|
157
|
-
|
158
|
-
.custom-content p {
|
159
|
-
margin: 0;
|
160
|
-
}
|
1
|
+
<template>
|
2
|
+
<div class="timeline-demo">
|
3
|
+
<h1>TDesign Timeline 组件示例</h1>
|
4
|
+
|
5
|
+
<h2>基础时间轴</h2>
|
6
|
+
<div class="demo-section">
|
7
|
+
<EbizTimeline>
|
8
|
+
<EbizTimelineItem label="2022-01-01" content="事件一" />
|
9
|
+
<EbizTimelineItem label="2022-02-01" content="事件二" />
|
10
|
+
<EbizTimelineItem label="2022-03-01" content="事件三" />
|
11
|
+
<EbizTimelineItem label="2022-04-01" content="事件四" />
|
12
|
+
</EbizTimeline>
|
13
|
+
</div>
|
14
|
+
|
15
|
+
<h2>时间轴方向</h2>
|
16
|
+
<div class="demo-section">
|
17
|
+
<h3>水平方向</h3>
|
18
|
+
<EbizTimeline layout="horizontal">
|
19
|
+
<EbizTimelineItem label="2022-01-01" content="事件一" />
|
20
|
+
<EbizTimelineItem label="2022-02-01" content="事件二" />
|
21
|
+
<EbizTimelineItem label="2022-03-01" content="事件三" />
|
22
|
+
<EbizTimelineItem label="2022-04-01" content="事件四" />
|
23
|
+
</EbizTimeline>
|
24
|
+
</div>
|
25
|
+
|
26
|
+
<h2>时间轴主题</h2>
|
27
|
+
<div class="demo-section">
|
28
|
+
<h3>点状主题</h3>
|
29
|
+
<EbizTimeline theme="dot">
|
30
|
+
<EbizTimelineItem label="2022-01-01" content="事件一" />
|
31
|
+
<EbizTimelineItem label="2022-02-01" content="事件二" />
|
32
|
+
<EbizTimelineItem label="2022-03-01" content="事件三" />
|
33
|
+
<EbizTimelineItem label="2022-04-01" content="事件四" />
|
34
|
+
</EbizTimeline>
|
35
|
+
</div>
|
36
|
+
|
37
|
+
<h2>不同的展示方式</h2>
|
38
|
+
<div class="demo-section">
|
39
|
+
<h3>左侧展示</h3>
|
40
|
+
<EbizTimeline mode="left">
|
41
|
+
<EbizTimelineItem label="2022-01-01" content="事件一" />
|
42
|
+
<EbizTimelineItem label="2022-02-01" content="事件二" />
|
43
|
+
<EbizTimelineItem label="2022-03-01" content="事件三" />
|
44
|
+
<EbizTimelineItem label="2022-04-01" content="事件四" />
|
45
|
+
</EbizTimeline>
|
46
|
+
|
47
|
+
<h3>右侧展示</h3>
|
48
|
+
<EbizTimeline mode="right">
|
49
|
+
<EbizTimelineItem label="2022-01-01" content="事件一" />
|
50
|
+
<EbizTimelineItem label="2022-02-01" content="事件二" />
|
51
|
+
<EbizTimelineItem label="2022-03-01" content="事件三" />
|
52
|
+
<EbizTimelineItem label="2022-04-01" content="事件四" />
|
53
|
+
</EbizTimeline>
|
54
|
+
|
55
|
+
<h3>同侧展示</h3>
|
56
|
+
<EbizTimeline mode="same">
|
57
|
+
<EbizTimelineItem label="2022-01-01" content="事件一" />
|
58
|
+
<EbizTimelineItem label="2022-02-01" content="事件二" />
|
59
|
+
<EbizTimelineItem label="2022-03-01" content="事件三" />
|
60
|
+
<EbizTimelineItem label="2022-04-01" content="事件四" />
|
61
|
+
</EbizTimeline>
|
62
|
+
</div>
|
63
|
+
|
64
|
+
<h2>标签位置</h2>
|
65
|
+
<div class="demo-section">
|
66
|
+
<h3>标签在左侧</h3>
|
67
|
+
<EbizTimeline labelAlign="left">
|
68
|
+
<EbizTimelineItem label="2022-01-01" content="事件一" />
|
69
|
+
<EbizTimelineItem label="2022-02-01" content="事件二" />
|
70
|
+
<EbizTimelineItem label="2022-03-01" content="事件三" />
|
71
|
+
<EbizTimelineItem label="2022-04-01" content="事件四" />
|
72
|
+
</EbizTimeline>
|
73
|
+
|
74
|
+
<h3>标签在顶部</h3>
|
75
|
+
<EbizTimeline labelAlign="top">
|
76
|
+
<EbizTimelineItem label="2022-01-01" content="事件一" />
|
77
|
+
<EbizTimelineItem label="2022-02-01" content="事件二" />
|
78
|
+
<EbizTimelineItem label="2022-03-01" content="事件三" />
|
79
|
+
<EbizTimelineItem label="2022-04-01" content="事件四" />
|
80
|
+
</EbizTimeline>
|
81
|
+
</div>
|
82
|
+
|
83
|
+
<h2>自定义节点颜色</h2>
|
84
|
+
<div class="demo-section">
|
85
|
+
<EbizTimeline>
|
86
|
+
<EbizTimelineItem label="2022-01-01" content="事件一" dotColor="primary" />
|
87
|
+
<EbizTimelineItem label="2022-02-01" content="事件二" dotColor="warning" />
|
88
|
+
<EbizTimelineItem label="2022-03-01" content="事件三" dotColor="error" />
|
89
|
+
<EbizTimelineItem label="2022-04-01" content="事件四" dotColor="success" />
|
90
|
+
</EbizTimeline>
|
91
|
+
</div>
|
92
|
+
|
93
|
+
<h2>使用插槽自定义内容</h2>
|
94
|
+
<div class="demo-section">
|
95
|
+
<EbizTimeline>
|
96
|
+
<EbizTimelineItem label="2022-01-01">
|
97
|
+
<div class="custom-content">
|
98
|
+
<h4>自定义内容一</h4>
|
99
|
+
<p>这是一个自定义内容示例</p>
|
100
|
+
</div>
|
101
|
+
</EbizTimelineItem>
|
102
|
+
<EbizTimelineItem label="2022-02-01">
|
103
|
+
<div class="custom-content">
|
104
|
+
<h4>自定义内容二</h4>
|
105
|
+
<p>这是一个自定义内容示例</p>
|
106
|
+
</div>
|
107
|
+
</EbizTimelineItem>
|
108
|
+
</EbizTimeline>
|
109
|
+
</div>
|
110
|
+
|
111
|
+
<h2>加载状态</h2>
|
112
|
+
<div class="demo-section">
|
113
|
+
<EbizTimeline>
|
114
|
+
<EbizTimelineItem label="2022-01-01" content="已完成" />
|
115
|
+
<EbizTimelineItem label="2022-02-01" content="进行中" loading />
|
116
|
+
<EbizTimelineItem label="2022-03-01" content="未开始" />
|
117
|
+
<EbizTimelineItem label="2022-04-01" content="未开始" />
|
118
|
+
</EbizTimeline>
|
119
|
+
</div>
|
120
|
+
</div>
|
121
|
+
</template>
|
122
|
+
|
123
|
+
<script setup>
|
124
|
+
import { EbizTimeline, EbizTimelineItem } from '../index.js';
|
125
|
+
</script>
|
126
|
+
|
127
|
+
<style scoped>
|
128
|
+
.timeline-demo {
|
129
|
+
padding: 20px;
|
130
|
+
}
|
131
|
+
|
132
|
+
.demo-section {
|
133
|
+
margin-bottom: 40px;
|
134
|
+
}
|
135
|
+
|
136
|
+
h1 {
|
137
|
+
margin-bottom: 30px;
|
138
|
+
}
|
139
|
+
|
140
|
+
h2 {
|
141
|
+
margin: 20px 0;
|
142
|
+
}
|
143
|
+
|
144
|
+
h3 {
|
145
|
+
margin: 15px 0;
|
146
|
+
}
|
147
|
+
|
148
|
+
.custom-content {
|
149
|
+
padding: 10px;
|
150
|
+
border: 1px solid #eee;
|
151
|
+
border-radius: 4px;
|
152
|
+
}
|
153
|
+
|
154
|
+
.custom-content h4 {
|
155
|
+
margin: 0 0 10px 0;
|
156
|
+
}
|
157
|
+
|
158
|
+
.custom-content p {
|
159
|
+
margin: 0;
|
160
|
+
}
|
161
161
|
</style>
|
package/src/views/Title.vue
CHANGED
@@ -1,20 +1,20 @@
|
|
1
|
-
<template>
|
2
|
-
<div>
|
3
|
-
<ebiz-route-breadcrumb />
|
4
|
-
<ebiz-title />
|
5
|
-
</div>
|
6
|
-
</template>
|
7
|
-
|
8
|
-
<script>
|
9
|
-
import { EbizTitle } from '@/index.js'
|
10
|
-
|
11
|
-
export default {
|
12
|
-
name: 'TitleDemo',
|
13
|
-
components: {
|
14
|
-
EbizTitle
|
15
|
-
}
|
16
|
-
}
|
17
|
-
</script>
|
18
|
-
|
19
|
-
<style scoped>
|
1
|
+
<template>
|
2
|
+
<div>
|
3
|
+
<ebiz-route-breadcrumb />
|
4
|
+
<ebiz-title />
|
5
|
+
</div>
|
6
|
+
</template>
|
7
|
+
|
8
|
+
<script>
|
9
|
+
import { EbizTitle } from '@/index.js'
|
10
|
+
|
11
|
+
export default {
|
12
|
+
name: 'TitleDemo',
|
13
|
+
components: {
|
14
|
+
EbizTitle
|
15
|
+
}
|
16
|
+
}
|
17
|
+
</script>
|
18
|
+
|
19
|
+
<style scoped>
|
20
20
|
</style>
|