@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.
Files changed (199) hide show
  1. package/README.md +29 -29
  2. package/dist/designer-components.css +1 -1
  3. package/dist/index.mjs +5925 -5923
  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 +262 -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,297 +1,297 @@
1
- <template>
2
- <div class="tdesign-card-demo">
3
- <h2>TDesign 卡片示例</h2>
4
-
5
- <div class="section">
6
- <h3>标准卡片</h3>
7
- <div class="card-row">
8
- <ebiz-tdesign-card
9
- title="标准卡片"
10
- subtitle="副标题"
11
- description="卡片描述信息"
12
- >
13
- 卡片内容区域,可以是文字、图片等形式信息内容。
14
- </ebiz-tdesign-card>
15
- </div>
16
- </div>
17
-
18
- <div class="section">
19
- <h3>无边框卡片</h3>
20
- <div class="card-row">
21
- <ebiz-tdesign-card
22
- title="无边框卡片"
23
- :bordered="false"
24
- >
25
- 无边框的卡片样式,适合在有背景的容器中使用。
26
- </ebiz-tdesign-card>
27
- </div>
28
- </div>
29
-
30
- <div class="section">
31
- <h3>带阴影卡片</h3>
32
- <div class="card-row">
33
- <ebiz-tdesign-card
34
- title="阴影卡片"
35
- :shadow="true"
36
- >
37
- 带阴影的卡片,用于强调内容。
38
- </ebiz-tdesign-card>
39
-
40
- <ebiz-tdesign-card
41
- title="悬浮阴影卡片"
42
- :hoverShadow="true"
43
- >
44
- 悬浮时显示阴影,鼠标放上来查看效果。
45
- </ebiz-tdesign-card>
46
- </div>
47
- </div>
48
-
49
- <div class="section">
50
- <h3>卡片尺寸</h3>
51
- <div class="card-row">
52
- <ebiz-tdesign-card
53
- title="中型卡片"
54
- size="medium"
55
- >
56
- 中型卡片内容
57
- </ebiz-tdesign-card>
58
-
59
- <ebiz-tdesign-card
60
- title="小型卡片"
61
- size="small"
62
- >
63
- 小型卡片内容
64
- </ebiz-tdesign-card>
65
- </div>
66
- </div>
67
-
68
- <div class="section">
69
- <h3>带头部分割线的卡片</h3>
70
- <div class="card-row">
71
- <ebiz-tdesign-card
72
- title="头部分割线"
73
- :headerBordered="true"
74
- >
75
- 头部带分割线的卡片,使内容区域和头部有明显分隔。
76
- </ebiz-tdesign-card>
77
- </div>
78
- </div>
79
-
80
- <div class="section">
81
- <h3>带封面的卡片</h3>
82
- <div class="card-row">
83
- <ebiz-tdesign-card
84
- title="封面卡片"
85
- cover="https://tdesign.gtimg.com/site/source/card-demo.jpg"
86
- >
87
- 带有封面图的卡片。
88
- </ebiz-tdesign-card>
89
- </div>
90
- </div>
91
-
92
- <div class="section">
93
- <h3>操作区域卡片</h3>
94
- <div class="card-row">
95
- <ebiz-tdesign-card
96
- title="操作区域"
97
- >
98
- <template #actions>
99
- <div style="display: flex; justify-content: space-between; width: 100%;">
100
- <span>操作一</span>
101
- <span>操作二</span>
102
- <span>操作三</span>
103
- </div>
104
- </template>
105
- 带有操作区域的卡片,可以添加各种操作按钮。
106
- </ebiz-tdesign-card>
107
- </div>
108
- </div>
109
-
110
- <div class="section">
111
- <h3>带底部的卡片</h3>
112
- <div class="card-row">
113
- <ebiz-tdesign-card
114
- title="带底部的卡片"
115
- >
116
- <template #footer>
117
- <div style="text-align: right;">
118
- <button style="padding: 5px 10px; margin-right: 8px;">取消</button>
119
- <button style="padding: 5px 10px; background: #0052d9; color: white; border: none;">确定</button>
120
- </div>
121
- </template>
122
- 带有底部区域的卡片,常用于放置按钮等操作元素。
123
- </ebiz-tdesign-card>
124
- </div>
125
- </div>
126
-
127
- <div class="section">
128
- <h3>自定义头部的卡片</h3>
129
- <div class="card-row">
130
- <ebiz-tdesign-card>
131
- <template #header>
132
- <div style="display: flex; justify-content: space-between; align-items: center; padding: 10px 0;">
133
- <div>
134
- <h4 style="margin: 0;">自定义头部</h4>
135
- <small style="color: #999;">2023-05-20</small>
136
- </div>
137
- <span style="cursor: pointer;">···</span>
138
- </div>
139
- </template>
140
- 通过自定义头部插槽,实现更复杂的头部布局。
141
- </ebiz-tdesign-card>
142
- </div>
143
- </div>
144
-
145
- <div class="section">
146
- <h3>加载状态卡片</h3>
147
- <div class="card-row">
148
- <ebiz-tdesign-card
149
- title="加载中"
150
- :loading="true"
151
- >
152
- 内容加载中...
153
- </ebiz-tdesign-card>
154
-
155
- <ebiz-tdesign-card
156
- title="自定义加载"
157
- :loading="true"
158
- :loadingProps="{ text: '正在加载数据...', size: 'medium' }"
159
- >
160
- 内容加载中...
161
- </ebiz-tdesign-card>
162
-
163
- <ebiz-tdesign-card
164
- title="自定义加载插槽"
165
- :loading="true"
166
- >
167
- <template #loading>
168
- <div style="display: flex; justify-content: center; align-items: center; padding: 20px;">
169
- <span>TDesign努力加载中...</span>
170
- </div>
171
- </template>
172
- 内容加载中...
173
- </ebiz-tdesign-card>
174
- </div>
175
- </div>
176
-
177
- <div class="section">
178
- <h3>不同风格卡片</h3>
179
- <div class="card-row">
180
- <ebiz-tdesign-card
181
- title="普通风格"
182
- subtitle="副标题"
183
- theme="normal"
184
- >
185
- 普通风格卡片内容
186
- </ebiz-tdesign-card>
187
-
188
- <ebiz-tdesign-card
189
- title="海报风格1"
190
- subtitle="副标题"
191
- theme="poster1"
192
- cover="https://tdesign.gtimg.com/site/source/card-demo.jpg"
193
- >
194
- <template #actions>
195
- <div style="display: flex; justify-content: space-between; width: 100%;">
196
- <span>操作区域在顶部</span>
197
- </div>
198
- </template>
199
- 海报风格1卡片内容,操作区域在顶部。
200
- </ebiz-tdesign-card>
201
-
202
- <ebiz-tdesign-card
203
- title="海报风格2"
204
- subtitle="副标题"
205
- theme="poster2"
206
- status="进行中"
207
- cover="https://tdesign.gtimg.com/site/source/card-demo.jpg"
208
- >
209
- <template #actions>
210
- <div style="display: flex; justify-content: space-between; width: 100%;">
211
- <span>操作区域在底部</span>
212
- </div>
213
- </template>
214
- 海报风格2卡片内容,操作区域在底部。
215
- </ebiz-tdesign-card>
216
- </div>
217
- </div>
218
-
219
- <div class="section">
220
- <h3>带头像的卡片</h3>
221
- <div class="card-row">
222
- <ebiz-tdesign-card
223
- title="头像卡片"
224
- theme="poster2"
225
- avatar="https://tdesign.gtimg.com/site/avatar.jpg"
226
- >
227
- 仅在海报风格的卡片中头像才有效。
228
- </ebiz-tdesign-card>
229
- </div>
230
- </div>
231
-
232
- <div class="section">
233
- <h3>事件处理</h3>
234
- <div class="card-row">
235
- <ebiz-tdesign-card
236
- title="点击事件"
237
- @click="handleCardClick"
238
- >
239
- 点击此卡片触发点击事件。
240
- </ebiz-tdesign-card>
241
- </div>
242
- </div>
243
- </div>
244
- </template>
245
-
246
- <script>
247
- import { EbizTdesignCard } from '../index.js'
248
-
249
- export default {
250
- name: 'TdesignCardDemo',
251
- components: {
252
- EbizTdesignCard
253
- },
254
- methods: {
255
- handleCardClick(_e) {
256
- alert('卡片被点击了!')
257
- }
258
- }
259
- }
260
- </script>
261
-
262
- <style scoped>
263
- .tdesign-card-demo {
264
- padding: 20px;
265
- max-width: 1200px;
266
- margin: 0 auto;
267
- }
268
-
269
- .section {
270
- margin-bottom: 30px;
271
- border-bottom: 1px solid #eee;
272
- padding-bottom: 20px;
273
- }
274
-
275
- h2 {
276
- margin-bottom: 20px;
277
- font-size: 24px;
278
- color: #0052d9;
279
- }
280
-
281
- h3 {
282
- margin-bottom: 12px;
283
- font-size: 18px;
284
- color: #333;
285
- }
286
-
287
- .card-row {
288
- display: flex;
289
- gap: 12px;
290
- margin-bottom: 16px;
291
- flex-wrap: wrap;
292
- }
293
-
294
- .card-row > * {
295
- width: 300px;
296
- }
1
+ <template>
2
+ <div class="tdesign-card-demo">
3
+ <h2>TDesign 卡片示例</h2>
4
+
5
+ <div class="section">
6
+ <h3>标准卡片</h3>
7
+ <div class="card-row">
8
+ <ebiz-tdesign-card
9
+ title="标准卡片"
10
+ subtitle="副标题"
11
+ description="卡片描述信息"
12
+ >
13
+ 卡片内容区域,可以是文字、图片等形式信息内容。
14
+ </ebiz-tdesign-card>
15
+ </div>
16
+ </div>
17
+
18
+ <div class="section">
19
+ <h3>无边框卡片</h3>
20
+ <div class="card-row">
21
+ <ebiz-tdesign-card
22
+ title="无边框卡片"
23
+ :bordered="false"
24
+ >
25
+ 无边框的卡片样式,适合在有背景的容器中使用。
26
+ </ebiz-tdesign-card>
27
+ </div>
28
+ </div>
29
+
30
+ <div class="section">
31
+ <h3>带阴影卡片</h3>
32
+ <div class="card-row">
33
+ <ebiz-tdesign-card
34
+ title="阴影卡片"
35
+ :shadow="true"
36
+ >
37
+ 带阴影的卡片,用于强调内容。
38
+ </ebiz-tdesign-card>
39
+
40
+ <ebiz-tdesign-card
41
+ title="悬浮阴影卡片"
42
+ :hoverShadow="true"
43
+ >
44
+ 悬浮时显示阴影,鼠标放上来查看效果。
45
+ </ebiz-tdesign-card>
46
+ </div>
47
+ </div>
48
+
49
+ <div class="section">
50
+ <h3>卡片尺寸</h3>
51
+ <div class="card-row">
52
+ <ebiz-tdesign-card
53
+ title="中型卡片"
54
+ size="medium"
55
+ >
56
+ 中型卡片内容
57
+ </ebiz-tdesign-card>
58
+
59
+ <ebiz-tdesign-card
60
+ title="小型卡片"
61
+ size="small"
62
+ >
63
+ 小型卡片内容
64
+ </ebiz-tdesign-card>
65
+ </div>
66
+ </div>
67
+
68
+ <div class="section">
69
+ <h3>带头部分割线的卡片</h3>
70
+ <div class="card-row">
71
+ <ebiz-tdesign-card
72
+ title="头部分割线"
73
+ :headerBordered="true"
74
+ >
75
+ 头部带分割线的卡片,使内容区域和头部有明显分隔。
76
+ </ebiz-tdesign-card>
77
+ </div>
78
+ </div>
79
+
80
+ <div class="section">
81
+ <h3>带封面的卡片</h3>
82
+ <div class="card-row">
83
+ <ebiz-tdesign-card
84
+ title="封面卡片"
85
+ cover="https://tdesign.gtimg.com/site/source/card-demo.jpg"
86
+ >
87
+ 带有封面图的卡片。
88
+ </ebiz-tdesign-card>
89
+ </div>
90
+ </div>
91
+
92
+ <div class="section">
93
+ <h3>操作区域卡片</h3>
94
+ <div class="card-row">
95
+ <ebiz-tdesign-card
96
+ title="操作区域"
97
+ >
98
+ <template #actions>
99
+ <div style="display: flex; justify-content: space-between; width: 100%;">
100
+ <span>操作一</span>
101
+ <span>操作二</span>
102
+ <span>操作三</span>
103
+ </div>
104
+ </template>
105
+ 带有操作区域的卡片,可以添加各种操作按钮。
106
+ </ebiz-tdesign-card>
107
+ </div>
108
+ </div>
109
+
110
+ <div class="section">
111
+ <h3>带底部的卡片</h3>
112
+ <div class="card-row">
113
+ <ebiz-tdesign-card
114
+ title="带底部的卡片"
115
+ >
116
+ <template #footer>
117
+ <div style="text-align: right;">
118
+ <button style="padding: 5px 10px; margin-right: 8px;">取消</button>
119
+ <button style="padding: 5px 10px; background: #0052d9; color: white; border: none;">确定</button>
120
+ </div>
121
+ </template>
122
+ 带有底部区域的卡片,常用于放置按钮等操作元素。
123
+ </ebiz-tdesign-card>
124
+ </div>
125
+ </div>
126
+
127
+ <div class="section">
128
+ <h3>自定义头部的卡片</h3>
129
+ <div class="card-row">
130
+ <ebiz-tdesign-card>
131
+ <template #header>
132
+ <div style="display: flex; justify-content: space-between; align-items: center; padding: 10px 0;">
133
+ <div>
134
+ <h4 style="margin: 0;">自定义头部</h4>
135
+ <small style="color: #999;">2023-05-20</small>
136
+ </div>
137
+ <span style="cursor: pointer;">···</span>
138
+ </div>
139
+ </template>
140
+ 通过自定义头部插槽,实现更复杂的头部布局。
141
+ </ebiz-tdesign-card>
142
+ </div>
143
+ </div>
144
+
145
+ <div class="section">
146
+ <h3>加载状态卡片</h3>
147
+ <div class="card-row">
148
+ <ebiz-tdesign-card
149
+ title="加载中"
150
+ :loading="true"
151
+ >
152
+ 内容加载中...
153
+ </ebiz-tdesign-card>
154
+
155
+ <ebiz-tdesign-card
156
+ title="自定义加载"
157
+ :loading="true"
158
+ :loadingProps="{ text: '正在加载数据...', size: 'medium' }"
159
+ >
160
+ 内容加载中...
161
+ </ebiz-tdesign-card>
162
+
163
+ <ebiz-tdesign-card
164
+ title="自定义加载插槽"
165
+ :loading="true"
166
+ >
167
+ <template #loading>
168
+ <div style="display: flex; justify-content: center; align-items: center; padding: 20px;">
169
+ <span>TDesign努力加载中...</span>
170
+ </div>
171
+ </template>
172
+ 内容加载中...
173
+ </ebiz-tdesign-card>
174
+ </div>
175
+ </div>
176
+
177
+ <div class="section">
178
+ <h3>不同风格卡片</h3>
179
+ <div class="card-row">
180
+ <ebiz-tdesign-card
181
+ title="普通风格"
182
+ subtitle="副标题"
183
+ theme="normal"
184
+ >
185
+ 普通风格卡片内容
186
+ </ebiz-tdesign-card>
187
+
188
+ <ebiz-tdesign-card
189
+ title="海报风格1"
190
+ subtitle="副标题"
191
+ theme="poster1"
192
+ cover="https://tdesign.gtimg.com/site/source/card-demo.jpg"
193
+ >
194
+ <template #actions>
195
+ <div style="display: flex; justify-content: space-between; width: 100%;">
196
+ <span>操作区域在顶部</span>
197
+ </div>
198
+ </template>
199
+ 海报风格1卡片内容,操作区域在顶部。
200
+ </ebiz-tdesign-card>
201
+
202
+ <ebiz-tdesign-card
203
+ title="海报风格2"
204
+ subtitle="副标题"
205
+ theme="poster2"
206
+ status="进行中"
207
+ cover="https://tdesign.gtimg.com/site/source/card-demo.jpg"
208
+ >
209
+ <template #actions>
210
+ <div style="display: flex; justify-content: space-between; width: 100%;">
211
+ <span>操作区域在底部</span>
212
+ </div>
213
+ </template>
214
+ 海报风格2卡片内容,操作区域在底部。
215
+ </ebiz-tdesign-card>
216
+ </div>
217
+ </div>
218
+
219
+ <div class="section">
220
+ <h3>带头像的卡片</h3>
221
+ <div class="card-row">
222
+ <ebiz-tdesign-card
223
+ title="头像卡片"
224
+ theme="poster2"
225
+ avatar="https://tdesign.gtimg.com/site/avatar.jpg"
226
+ >
227
+ 仅在海报风格的卡片中头像才有效。
228
+ </ebiz-tdesign-card>
229
+ </div>
230
+ </div>
231
+
232
+ <div class="section">
233
+ <h3>事件处理</h3>
234
+ <div class="card-row">
235
+ <ebiz-tdesign-card
236
+ title="点击事件"
237
+ @click="handleCardClick"
238
+ >
239
+ 点击此卡片触发点击事件。
240
+ </ebiz-tdesign-card>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ </template>
245
+
246
+ <script>
247
+ import { EbizTdesignCard } from '../index.js'
248
+
249
+ export default {
250
+ name: 'TdesignCardDemo',
251
+ components: {
252
+ EbizTdesignCard
253
+ },
254
+ methods: {
255
+ handleCardClick(_e) {
256
+ alert('卡片被点击了!')
257
+ }
258
+ }
259
+ }
260
+ </script>
261
+
262
+ <style scoped>
263
+ .tdesign-card-demo {
264
+ padding: 20px;
265
+ max-width: 1200px;
266
+ margin: 0 auto;
267
+ }
268
+
269
+ .section {
270
+ margin-bottom: 30px;
271
+ border-bottom: 1px solid #eee;
272
+ padding-bottom: 20px;
273
+ }
274
+
275
+ h2 {
276
+ margin-bottom: 20px;
277
+ font-size: 24px;
278
+ color: #0052d9;
279
+ }
280
+
281
+ h3 {
282
+ margin-bottom: 12px;
283
+ font-size: 18px;
284
+ color: #333;
285
+ }
286
+
287
+ .card-row {
288
+ display: flex;
289
+ gap: 12px;
290
+ margin-bottom: 16px;
291
+ flex-wrap: wrap;
292
+ }
293
+
294
+ .card-row > * {
295
+ width: 300px;
296
+ }
297
297
  </style>