@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.
Files changed (199) hide show
  1. package/README.md +29 -29
  2. package/dist/designer-components.css +1 -1
  3. package/dist/index.mjs +4822 -4822
  4. package/package.json +1 -1
  5. package/src/App.vue +26 -26
  6. package/src/apiService/SIMPLE_DATA_SERVICE.md +284 -284
  7. package/src/apiService/mockDataService.js +115 -115
  8. package/src/apiService/simpleDataService.js +297 -297
  9. package/src/assets/base.css +86 -86
  10. package/src/assets/logo.svg +1 -1
  11. package/src/components/Button.vue +149 -149
  12. package/src/components/DataContainer.vue +40 -40
  13. package/src/components/EbizApproval.vue +332 -338
  14. package/src/components/EbizAutoForm.vue +596 -596
  15. package/src/components/EbizAvatar.vue +115 -115
  16. package/src/components/EbizCheckbox.vue +93 -93
  17. package/src/components/EbizCheckboxGroup.vue +69 -69
  18. package/src/components/EbizDepartmentSelector.vue +144 -144
  19. package/src/components/EbizDescriptions.vue +340 -340
  20. package/src/components/EbizDescriptionsItem.vue +47 -47
  21. package/src/components/EbizDetailBlock.vue +81 -81
  22. package/src/components/EbizDialog.vue +260 -260
  23. package/src/components/EbizDiv.vue +32 -32
  24. package/src/components/EbizDivider.vue +96 -96
  25. package/src/components/EbizEmployeeInfo.vue +138 -138
  26. package/src/components/EbizEmployeeSelector.vue +1093 -1086
  27. package/src/components/EbizFileUpload.vue +238 -238
  28. package/src/components/EbizMap.vue +541 -541
  29. package/src/components/EbizOkrTree.vue +99 -99
  30. package/src/components/EbizPageHeader.vue +95 -95
  31. package/src/components/EbizPagination.vue +162 -162
  32. package/src/components/EbizPopconfirm.vue +47 -47
  33. package/src/components/EbizRadio.vue +86 -86
  34. package/src/components/EbizRadioGroup.vue +83 -83
  35. package/src/components/EbizRemoteSelect.vue +232 -232
  36. package/src/components/EbizRouteBreadcrumb.vue +46 -46
  37. package/src/components/EbizSelect.vue +85 -85
  38. package/src/components/EbizSpace.vue +100 -100
  39. package/src/components/EbizStatistic.vue +149 -149
  40. package/src/components/EbizStatsCard.vue +113 -113
  41. package/src/components/EbizSwiper.vue +113 -113
  42. package/src/components/EbizSwiperItem.vue +13 -13
  43. package/src/components/EbizSwitch.vue +85 -85
  44. package/src/components/EbizTabHeader.vue +132 -132
  45. package/src/components/EbizTabPanel.vue +22 -22
  46. package/src/components/EbizTable.vue +469 -469
  47. package/src/components/EbizTableColumn.vue +116 -116
  48. package/src/components/EbizTableSort.vue +179 -179
  49. package/src/components/EbizTabs.vue +142 -142
  50. package/src/components/EbizTdesignButtonDialog.vue +332 -332
  51. package/src/components/EbizTdesignLoading.vue +107 -107
  52. package/src/components/EbizTimePicker.vue +143 -143
  53. package/src/components/EbizTitle.vue +91 -91
  54. package/src/components/EbizTree.vue +152 -152
  55. package/src/components/EbizTreeMergeTable.vue +1414 -1414
  56. package/src/components/EbizTreeSelector.vue +418 -418
  57. package/src/components/EbizVxeTable.vue +290 -290
  58. package/src/components/Form.vue +28 -28
  59. package/src/components/Home.vue +7 -7
  60. package/src/components/MyComponent.vue +39 -39
  61. package/src/components/Table.vue +45 -45
  62. package/src/components/TdesignAlert.vue +115 -115
  63. package/src/components/TdesignButton.vue +135 -135
  64. package/src/components/TdesignCalendar/index.vue +145 -145
  65. package/src/components/TdesignCard.vue +195 -195
  66. package/src/components/TdesignCol.vue +101 -101
  67. package/src/components/TdesignCollapse.vue +142 -142
  68. package/src/components/TdesignCollapsePanel.vue +79 -79
  69. package/src/components/TdesignDatePicker.vue +124 -124
  70. package/src/components/TdesignDescriptions.vue +74 -74
  71. package/src/components/TdesignDescriptionsItem.vue +50 -50
  72. package/src/components/TdesignDialog.vue +225 -225
  73. package/src/components/TdesignForm.vue +138 -138
  74. package/src/components/TdesignFormItem.vue +105 -105
  75. package/src/components/TdesignGrid.vue +55 -55
  76. package/src/components/TdesignIcon.vue +67 -67
  77. package/src/components/TdesignImage.vue +162 -162
  78. package/src/components/TdesignImageViewer.vue +200 -200
  79. package/src/components/TdesignInput.vue +242 -242
  80. package/src/components/TdesignSelect.vue +444 -444
  81. package/src/components/TdesignTag.vue +117 -117
  82. package/src/components/TdesignTextarea.vue +142 -142
  83. package/src/components/TdesignTimeline.vue +58 -58
  84. package/src/components/TdesignTimelineItem.vue +71 -71
  85. package/src/components/TdesignUpload.vue +388 -388
  86. package/src/components/TdesignWatermark.vue +107 -107
  87. package/src/components/ebiz-form/components/cascader.vue +61 -61
  88. package/src/components/ebiz-form/components/checkbox.vue +37 -37
  89. package/src/components/ebiz-form/components/city.vue +137 -137
  90. package/src/components/ebiz-form/components/date-panel.vue +52 -52
  91. package/src/components/ebiz-form/components/date-range-panel.vue +52 -52
  92. package/src/components/ebiz-form/components/date-range.vue +56 -56
  93. package/src/components/ebiz-form/components/date.vue +52 -52
  94. package/src/components/ebiz-form/components/editor-multi-language.vue +47 -47
  95. package/src/components/ebiz-form/components/editor.vue +78 -78
  96. package/src/components/ebiz-form/components/file-multi-language.vue +52 -52
  97. package/src/components/ebiz-form/components/file.vue +149 -149
  98. package/src/components/ebiz-form/components/images-multi-language.vue +52 -52
  99. package/src/components/ebiz-form/components/images.vue +129 -129
  100. package/src/components/ebiz-form/components/img-multi-language.vue +51 -51
  101. package/src/components/ebiz-form/components/img.vue +129 -129
  102. package/src/components/ebiz-form/components/number.vue +50 -50
  103. package/src/components/ebiz-form/components/radio.vue +28 -28
  104. package/src/components/ebiz-form/components/select.vue +119 -119
  105. package/src/components/ebiz-form/components/switch.vue +23 -23
  106. package/src/components/ebiz-form/components/text-multi-language.vue +47 -47
  107. package/src/components/ebiz-form/components/text.vue +52 -52
  108. package/src/components/ebiz-form/components/textarea-multi-language.vue +48 -48
  109. package/src/components/ebiz-form/components/textarea.vue +29 -29
  110. package/src/components/ebiz-form/components/video-multi-language.vue +51 -51
  111. package/src/components/ebiz-form/components/video.vue +97 -97
  112. package/src/components/ebiz-form/index.vue +157 -157
  113. package/src/components/examples/PopconfirmExample.vue +149 -149
  114. package/src/components/icons/IconCommunity.vue +7 -7
  115. package/src/components/icons/IconDocumentation.vue +7 -7
  116. package/src/components/icons/IconEcosystem.vue +7 -7
  117. package/src/components/icons/IconSupport.vue +7 -7
  118. package/src/components/icons/IconTooling.vue +19 -19
  119. package/src/components/senior/EbizSData/index.vue +260 -260
  120. package/src/components/senior/EbizSDialog/index.vue +713 -713
  121. package/src/components/senior/EbizSForm/README.md +157 -157
  122. package/src/components/senior/EbizSForm/index.vue +668 -668
  123. package/src/components/senior/EbizSForm/item.vue +522 -522
  124. package/src/components/senior/EbizSForm/mItems/DateTimePicker.vue +51 -51
  125. package/src/components/senior/EbizSForm/mItems/Picker.vue +63 -63
  126. package/src/index.js +218 -218
  127. package/src/main.js +55 -55
  128. package/src/router/index.js +374 -374
  129. package/src/utils/formatCode.js +24 -24
  130. package/src/utils/generateImportStatement.js +52 -52
  131. package/src/utils/hasJsx.js +25 -25
  132. package/src/utils/index.js +166 -166
  133. package/src/utils/mergeOptions.js +29 -29
  134. package/src/utils/parseRequiredBlocks.js +18 -18
  135. package/src/utils/upload.ts +126 -126
  136. package/src/utils/vue-sfc-validator.js +155 -155
  137. package/src/views/Button.vue +23 -23
  138. package/src/views/CheckboxDemo.vue +104 -104
  139. package/src/views/DataContainer.vue +19 -19
  140. package/src/views/DialogDemo.vue +125 -125
  141. package/src/views/EbizApprovalDemo.vue +76 -76
  142. package/src/views/EbizAutoFormDemo.vue +129 -129
  143. package/src/views/EbizAvatar.vue +223 -223
  144. package/src/views/EbizDepartmentSelectorDemo.vue +169 -169
  145. package/src/views/EbizDetailBlockDemo.vue +30 -30
  146. package/src/views/EbizEmployeeInfo.vue +249 -249
  147. package/src/views/EbizEmployeeSelector.vue +83 -83
  148. package/src/views/EbizMap.vue +201 -201
  149. package/src/views/EbizRadioDemo.vue +151 -151
  150. package/src/views/EbizSDataDemo.vue +136 -136
  151. package/src/views/EbizSDialogDemo.vue +301 -301
  152. package/src/views/EbizSForm/index.vue +359 -359
  153. package/src/views/EbizSFormDemo.vue +420 -420
  154. package/src/views/EbizSpace.vue +185 -185
  155. package/src/views/EbizSwiper.vue +157 -157
  156. package/src/views/EbizTdesignButtonDialogExample.vue +437 -437
  157. package/src/views/Form.vue +19 -19
  158. package/src/views/GridDemo.vue +238 -238
  159. package/src/views/Home.vue +146 -146
  160. package/src/views/Mindmap.vue +17 -17
  161. package/src/views/MyComponent.vue +19 -19
  162. package/src/views/OkrTree.vue +19 -19
  163. package/src/views/PageHeaderDemo.vue +104 -104
  164. package/src/views/PaginationDemo.vue +96 -96
  165. package/src/views/PermissionBoxDemo.vue +85 -85
  166. package/src/views/PopconfirmDemo.vue +80 -80
  167. package/src/views/RemoteSelect.vue +350 -350
  168. package/src/views/StatisticDemo.vue +190 -190
  169. package/src/views/SwitchDemo.vue +79 -79
  170. package/src/views/Table.vue +19 -19
  171. package/src/views/TableDemo.vue +334 -334
  172. package/src/views/TableSortDemo.vue +143 -143
  173. package/src/views/TableView.vue +68 -68
  174. package/src/views/TabsDemo.vue +282 -282
  175. package/src/views/TagDemo.vue +101 -101
  176. package/src/views/TdesignAlert.vue +98 -98
  177. package/src/views/TdesignButton.vue +190 -190
  178. package/src/views/TdesignCalendar.vue +94 -94
  179. package/src/views/TdesignCard.vue +296 -296
  180. package/src/views/TdesignCollapse.vue +293 -293
  181. package/src/views/TdesignDatePicker.vue +187 -187
  182. package/src/views/TdesignDescriptions.vue +101 -101
  183. package/src/views/TdesignForm.vue +248 -248
  184. package/src/views/TdesignIcon.vue +203 -203
  185. package/src/views/TdesignImage.vue +215 -215
  186. package/src/views/TdesignImageViewer.vue +198 -198
  187. package/src/views/TdesignInput.vue +252 -252
  188. package/src/views/TdesignSelect.vue +473 -473
  189. package/src/views/TdesignSwiper.vue +157 -157
  190. package/src/views/TextareaDemo.vue +93 -93
  191. package/src/views/TimePickerDemo.vue +146 -146
  192. package/src/views/TimelineDemo.vue +160 -160
  193. package/src/views/Title.vue +19 -19
  194. package/src/views/TreeDemo.vue +254 -254
  195. package/src/views/TreeMergeTableDemo.vue +239 -239
  196. package/src/views/TreeSelectorDemo.vue +245 -245
  197. package/src/views/UploadDemo.vue +121 -121
  198. package/src/views/VxeTableDemo.vue +279 -279
  199. 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>
@@ -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>