@ebiz/designer-components 0.0.57 → 0.0.59

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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 -712
  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,474 +1,474 @@
1
- <template>
2
- <div class="tdesign-select-demo">
3
- <h2>TDesign 选择器示例</h2>
4
-
5
- <div class="section">
6
- <h3>基础选择器</h3>
7
- <div class="select-row">
8
- <ebiz-tdesign-select
9
- v-model="value1"
10
- placeholder="请选择"
11
- :options="baseOptions"
12
- clearable
13
- />
14
- </div>
15
- </div>
16
-
17
- <div class="section">
18
- <h3>多选选择器</h3>
19
- <div class="select-row">
20
- <ebiz-tdesign-select
21
- v-model="value2"
22
- placeholder="请选择多项"
23
- :options="baseOptions"
24
- multiple
25
- clearable
26
- />
27
- </div>
28
- </div>
29
-
30
- <div class="section">
31
- <h3>可搜索选择器</h3>
32
- <div class="select-row">
33
- <ebiz-tdesign-select
34
- v-model="value3"
35
- placeholder="请输入搜索"
36
- :options="baseOptions"
37
- filterable
38
- clearable
39
- />
40
- </div>
41
- </div>
42
-
43
- <div class="section">
44
- <h3>带标签的选择器</h3>
45
- <div class="select-row">
46
- <ebiz-tdesign-select
47
- v-model="valueWithLabel"
48
- label="选择器:"
49
- placeholder="带标签的选择器"
50
- :options="baseOptions"
51
- clearable
52
- />
53
- </div>
54
- </div>
55
-
56
- <div class="section">
57
- <h3>自定义键名选择器</h3>
58
- <div class="select-row">
59
- <ebiz-tdesign-select
60
- v-model="valueWithKeys"
61
- placeholder="自定义键名选择器"
62
- :options="customKeyOptions"
63
- :keys="{label: 'text', value: 'id'}"
64
- clearable
65
- />
66
- </div>
67
- </div>
68
-
69
- <div class="section">
70
- <h3>尺寸变体</h3>
71
- <div class="select-row">
72
- <ebiz-tdesign-select
73
- v-model="value4Small"
74
- placeholder="小尺寸"
75
- :options="baseOptions"
76
- size="small"
77
- clearable
78
- />
79
- <ebiz-tdesign-select
80
- v-model="value4Medium"
81
- placeholder="中尺寸"
82
- :options="baseOptions"
83
- size="medium"
84
- clearable
85
- />
86
- <ebiz-tdesign-select
87
- v-model="value4Large"
88
- placeholder="大尺寸"
89
- :options="baseOptions"
90
- size="large"
91
- clearable
92
- />
93
- </div>
94
- </div>
95
-
96
- <div class="section">
97
- <h3>无边框选择器</h3>
98
- <div class="select-row">
99
- <ebiz-tdesign-select
100
- v-model="value5"
101
- placeholder="无边框样式"
102
- :options="baseOptions"
103
- borderless
104
- clearable
105
- />
106
- </div>
107
- </div>
108
-
109
- <div class="section">
110
- <h3>状态变体</h3>
111
- <div class="select-row">
112
- <ebiz-tdesign-select
113
- v-model="value6Success"
114
- placeholder="成功状态"
115
- :options="baseOptions"
116
- status="success"
117
- tips="成功的提示信息"
118
- clearable
119
- />
120
- <ebiz-tdesign-select
121
- v-model="value6Warning"
122
- placeholder="警告状态"
123
- :options="baseOptions"
124
- status="warning"
125
- tips="警告的提示信息"
126
- clearable
127
- />
128
- <ebiz-tdesign-select
129
- v-model="value6Error"
130
- placeholder="错误状态"
131
- :options="baseOptions"
132
- status="error"
133
- tips="错误的提示信息"
134
- clearable
135
- />
136
- </div>
137
- </div>
138
-
139
- <div class="section">
140
- <h3>特殊状态</h3>
141
- <div class="select-row">
142
- <ebiz-tdesign-select
143
- v-model="value7Disabled"
144
- placeholder="禁用状态"
145
- :options="baseOptions"
146
- disabled
147
- />
148
- <ebiz-tdesign-select
149
- v-model="value7Loading"
150
- placeholder="加载状态"
151
- :options="baseOptions"
152
- loading
153
- loadingText="加载中..."
154
- />
155
- <ebiz-tdesign-select
156
- v-model="value7Readonly"
157
- placeholder="只读状态"
158
- :options="baseOptions"
159
- readonly
160
- />
161
- </div>
162
- </div>
163
-
164
- <div class="section">
165
- <h3>自适应宽度</h3>
166
- <div class="select-row">
167
- <ebiz-tdesign-select
168
- v-model="value8"
169
- placeholder="宽度自适应"
170
- :options="baseOptions"
171
- autoWidth
172
- clearable
173
- />
174
- </div>
175
- </div>
176
-
177
- <div class="section">
178
- <h3>可创建选项</h3>
179
- <div class="select-row">
180
- <ebiz-tdesign-select
181
- v-model="value9"
182
- placeholder="输入创建新选项"
183
- :options="baseOptions"
184
- creatable
185
- filterable
186
- clearable
187
- @create="handleCreate"
188
- />
189
- </div>
190
- </div>
191
-
192
- <div class="section">
193
- <h3>多选折叠显示</h3>
194
- <div class="select-row">
195
- <ebiz-tdesign-select
196
- v-model="valueCollapsed"
197
- placeholder="多选折叠显示"
198
- :options="moreOptions"
199
- multiple
200
- :minCollapsedNum="2"
201
- clearable
202
- :collapsedItems="({ collapsedSelectedItems }) => `+${collapsedSelectedItems.length}`"
203
- />
204
- </div>
205
- </div>
206
-
207
- <div class="section">
208
- <h3>虚拟滚动</h3>
209
- <div class="select-row">
210
- <ebiz-tdesign-select
211
- v-model="valueWithScroll"
212
- placeholder="虚拟滚动(大数据量)"
213
- :options="largeDataOptions"
214
- :scroll="{ type: 'virtual', threshold: 100 }"
215
- clearable
216
- @scroll="handleVirtualScroll"
217
- />
218
- </div>
219
- </div>
220
-
221
- <div class="section">
222
- <h3>带前缀图标</h3>
223
- <div class="select-row">
224
- <ebiz-tdesign-select
225
- v-model="valueWithIcon"
226
- placeholder="带图标的选择器"
227
- :options="baseOptions"
228
- prefixIcon="search"
229
- clearable
230
- />
231
- </div>
232
- </div>
233
-
234
- <div class="section">
235
- <h3>事件处理</h3>
236
- <div class="select-row">
237
- <ebiz-tdesign-select
238
- v-model="value10"
239
- placeholder="包含多种事件"
240
- :options="baseOptions"
241
- clearable
242
- @change="handleChange"
243
- @focus="handleFocus"
244
- @blur="handleBlur"
245
- @clear="handleClear"
246
- @keydown="handleKeydown"
247
- @mouseenter="handleMouseEnter"
248
- @mouseleave="handleMouseLeave"
249
- />
250
- </div>
251
- <div class="event-log">
252
- <p>事件日志:</p>
253
- <div v-for="(log, index) in eventLogs" :key="index">
254
- {{ log }}
255
- </div>
256
- </div>
257
- </div>
258
-
259
- <div class="section">
260
- <h3>自定义选项面板</h3>
261
- <div class="select-row">
262
- <ebiz-tdesign-select
263
- v-model="valueWithPanel"
264
- placeholder="带自定义面板的选择器"
265
- :options="baseOptions"
266
- clearable
267
- >
268
- <template #panelTopContent>
269
- <div class="custom-panel-header">自定义面板顶部内容</div>
270
- </template>
271
- <template #panelBottomContent>
272
- <div class="custom-panel-footer">自定义面板底部内容</div>
273
- </template>
274
- </ebiz-tdesign-select>
275
- </div>
276
- </div>
277
- </div>
278
- </template>
279
-
280
- <script>
281
- import { EbizTdesignSelect } from '../index.js'
282
-
283
- export default {
284
- name: 'TdesignSelectDemo',
285
- components: {
286
- EbizTdesignSelect
287
- },
288
- data() {
289
- return {
290
- // 基础选项数据
291
- baseOptions: [
292
- { label: '选项一', value: '1' },
293
- { label: '选项二', value: '2' },
294
- { label: '选项三', value: '3' },
295
- { label: '选项四', value: '4' },
296
- { label: '选项五', value: '5' }
297
- ],
298
-
299
- // 自定义键名选项数据
300
- customKeyOptions: [
301
- { text: '自定义选项一', id: '101' },
302
- { text: '自定义选项二', id: '102' },
303
- { text: '自定义选项三', id: '103' }
304
- ],
305
-
306
- // 多项选项数据
307
- moreOptions: Array.from({ length: 20 }).map((_, index) => ({
308
- label: `选项 ${index + 1}`,
309
- value: `${index + 1}`
310
- })),
311
-
312
- // 各种示例的选中值
313
- value1: '',
314
- value2: [],
315
- value3: '',
316
- value4Small: '',
317
- value4Medium: '',
318
- value4Large: '',
319
- value5: '',
320
- value6Success: '',
321
- value6Warning: '',
322
- value6Error: '',
323
- value7Disabled: '',
324
- value7Loading: '',
325
- value7Readonly: '1',
326
- value8: '',
327
- value9: '',
328
- value10: '',
329
- valueWithLabel: '',
330
- valueWithKeys: '',
331
- valueCollapsed: [],
332
- valueWithPanel: '',
333
- valueWithIcon: '',
334
- valueWithScroll: '',
335
-
336
- // 事件日志
337
- eventLogs: [],
338
-
339
- // 大数据选项
340
- largeDataOptions: Array.from({ length: 5000 }).map((_, index) => ({
341
- label: `大数据选项 ${index + 1}`,
342
- value: `large-${index + 1}`
343
- }))
344
- }
345
- },
346
- methods: {
347
- // 创建新选项
348
- handleCreate(value) {
349
- this.baseOptions.push({
350
- label: value,
351
- value: `new-${this.baseOptions.length + 1}`
352
- });
353
- this.addEventLog(`创建了新选项: ${value}`);
354
- },
355
-
356
- // 选中值变化
357
- handleChange(value, context) {
358
- this.addEventLog(`选中值变化: ${value}`);
359
- },
360
-
361
- // 获得焦点
362
- handleFocus(context) {
363
- this.addEventLog('选择器获得焦点');
364
- },
365
-
366
- // 失去焦点
367
- handleBlur(value, context) {
368
- this.addEventLog('选择器失去焦点');
369
- },
370
-
371
- // 清空选项
372
- handleClear(context) {
373
- this.addEventLog('选择器被清空');
374
- },
375
-
376
- // 键盘按下
377
- handleKeydown(value, context) {
378
- this.addEventLog(`键盘按下: ${value.key}`);
379
- },
380
-
381
- // 鼠标进入
382
- handleMouseEnter(context) {
383
- this.addEventLog('鼠标进入选择器');
384
- },
385
-
386
- // 鼠标离开
387
- handleMouseLeave(context) {
388
- this.addEventLog('鼠标离开选择器');
389
- },
390
-
391
- // 虚拟滚动事件
392
- handleVirtualScroll({ scrollTop, scrollBottom }) {
393
- this.addEventLog(`滚动位置: 顶部${scrollTop}px, 底部${scrollBottom}px`);
394
- },
395
-
396
- // 添加事件日志
397
- addEventLog(log) {
398
- const now = new Date();
399
- const time = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
400
- this.eventLogs.unshift(`[${time}] ${log}`);
401
-
402
- // 只保留最近10条日志
403
- if (this.eventLogs.length > 10) {
404
- this.eventLogs = this.eventLogs.slice(0, 10);
405
- }
406
- }
407
- }
408
- }
409
- </script>
410
-
411
- <style scoped>
412
- .tdesign-select-demo {
413
- padding: 20px;
414
- max-width: 1200px;
415
- margin: 0 auto;
416
- }
417
-
418
- .section {
419
- margin-bottom: 30px;
420
- border-bottom: 1px solid #eee;
421
- padding-bottom: 20px;
422
- }
423
-
424
- h2 {
425
- margin-bottom: 20px;
426
- font-size: 24px;
427
- color: #0052d9;
428
- }
429
-
430
- h3 {
431
- margin-bottom: 12px;
432
- font-size: 18px;
433
- color: #333;
434
- }
435
-
436
- .select-row {
437
- display: flex;
438
- gap: 20px;
439
- margin-bottom: 16px;
440
- flex-wrap: wrap;
441
- align-items: center;
442
- }
443
-
444
- .event-log {
445
- margin-top: 16px;
446
- background-color: #f5f5f5;
447
- padding: 12px;
448
- border-radius: 6px;
449
- max-height: 200px;
450
- overflow-y: auto;
451
- font-family: monospace;
452
- font-size: 14px;
453
- }
454
-
455
- .event-log p {
456
- font-weight: bold;
457
- margin-bottom: 8px;
458
- }
459
-
460
- .custom-panel-header,
461
- .custom-panel-footer {
462
- padding: 8px 12px;
463
- background-color: #f0f5ff;
464
- color: #0052d9;
465
- text-align: center;
466
- border-radius: 3px;
467
- margin: 4px 0;
468
- }
469
-
470
- .custom-panel-footer {
471
- background-color: #f5f5f5;
472
- color: #666;
473
- }
1
+ <template>
2
+ <div class="tdesign-select-demo">
3
+ <h2>TDesign 选择器示例</h2>
4
+
5
+ <div class="section">
6
+ <h3>基础选择器</h3>
7
+ <div class="select-row">
8
+ <ebiz-tdesign-select
9
+ v-model="value1"
10
+ placeholder="请选择"
11
+ :options="baseOptions"
12
+ clearable
13
+ />
14
+ </div>
15
+ </div>
16
+
17
+ <div class="section">
18
+ <h3>多选选择器</h3>
19
+ <div class="select-row">
20
+ <ebiz-tdesign-select
21
+ v-model="value2"
22
+ placeholder="请选择多项"
23
+ :options="baseOptions"
24
+ multiple
25
+ clearable
26
+ />
27
+ </div>
28
+ </div>
29
+
30
+ <div class="section">
31
+ <h3>可搜索选择器</h3>
32
+ <div class="select-row">
33
+ <ebiz-tdesign-select
34
+ v-model="value3"
35
+ placeholder="请输入搜索"
36
+ :options="baseOptions"
37
+ filterable
38
+ clearable
39
+ />
40
+ </div>
41
+ </div>
42
+
43
+ <div class="section">
44
+ <h3>带标签的选择器</h3>
45
+ <div class="select-row">
46
+ <ebiz-tdesign-select
47
+ v-model="valueWithLabel"
48
+ label="选择器:"
49
+ placeholder="带标签的选择器"
50
+ :options="baseOptions"
51
+ clearable
52
+ />
53
+ </div>
54
+ </div>
55
+
56
+ <div class="section">
57
+ <h3>自定义键名选择器</h3>
58
+ <div class="select-row">
59
+ <ebiz-tdesign-select
60
+ v-model="valueWithKeys"
61
+ placeholder="自定义键名选择器"
62
+ :options="customKeyOptions"
63
+ :keys="{label: 'text', value: 'id'}"
64
+ clearable
65
+ />
66
+ </div>
67
+ </div>
68
+
69
+ <div class="section">
70
+ <h3>尺寸变体</h3>
71
+ <div class="select-row">
72
+ <ebiz-tdesign-select
73
+ v-model="value4Small"
74
+ placeholder="小尺寸"
75
+ :options="baseOptions"
76
+ size="small"
77
+ clearable
78
+ />
79
+ <ebiz-tdesign-select
80
+ v-model="value4Medium"
81
+ placeholder="中尺寸"
82
+ :options="baseOptions"
83
+ size="medium"
84
+ clearable
85
+ />
86
+ <ebiz-tdesign-select
87
+ v-model="value4Large"
88
+ placeholder="大尺寸"
89
+ :options="baseOptions"
90
+ size="large"
91
+ clearable
92
+ />
93
+ </div>
94
+ </div>
95
+
96
+ <div class="section">
97
+ <h3>无边框选择器</h3>
98
+ <div class="select-row">
99
+ <ebiz-tdesign-select
100
+ v-model="value5"
101
+ placeholder="无边框样式"
102
+ :options="baseOptions"
103
+ borderless
104
+ clearable
105
+ />
106
+ </div>
107
+ </div>
108
+
109
+ <div class="section">
110
+ <h3>状态变体</h3>
111
+ <div class="select-row">
112
+ <ebiz-tdesign-select
113
+ v-model="value6Success"
114
+ placeholder="成功状态"
115
+ :options="baseOptions"
116
+ status="success"
117
+ tips="成功的提示信息"
118
+ clearable
119
+ />
120
+ <ebiz-tdesign-select
121
+ v-model="value6Warning"
122
+ placeholder="警告状态"
123
+ :options="baseOptions"
124
+ status="warning"
125
+ tips="警告的提示信息"
126
+ clearable
127
+ />
128
+ <ebiz-tdesign-select
129
+ v-model="value6Error"
130
+ placeholder="错误状态"
131
+ :options="baseOptions"
132
+ status="error"
133
+ tips="错误的提示信息"
134
+ clearable
135
+ />
136
+ </div>
137
+ </div>
138
+
139
+ <div class="section">
140
+ <h3>特殊状态</h3>
141
+ <div class="select-row">
142
+ <ebiz-tdesign-select
143
+ v-model="value7Disabled"
144
+ placeholder="禁用状态"
145
+ :options="baseOptions"
146
+ disabled
147
+ />
148
+ <ebiz-tdesign-select
149
+ v-model="value7Loading"
150
+ placeholder="加载状态"
151
+ :options="baseOptions"
152
+ loading
153
+ loadingText="加载中..."
154
+ />
155
+ <ebiz-tdesign-select
156
+ v-model="value7Readonly"
157
+ placeholder="只读状态"
158
+ :options="baseOptions"
159
+ readonly
160
+ />
161
+ </div>
162
+ </div>
163
+
164
+ <div class="section">
165
+ <h3>自适应宽度</h3>
166
+ <div class="select-row">
167
+ <ebiz-tdesign-select
168
+ v-model="value8"
169
+ placeholder="宽度自适应"
170
+ :options="baseOptions"
171
+ autoWidth
172
+ clearable
173
+ />
174
+ </div>
175
+ </div>
176
+
177
+ <div class="section">
178
+ <h3>可创建选项</h3>
179
+ <div class="select-row">
180
+ <ebiz-tdesign-select
181
+ v-model="value9"
182
+ placeholder="输入创建新选项"
183
+ :options="baseOptions"
184
+ creatable
185
+ filterable
186
+ clearable
187
+ @create="handleCreate"
188
+ />
189
+ </div>
190
+ </div>
191
+
192
+ <div class="section">
193
+ <h3>多选折叠显示</h3>
194
+ <div class="select-row">
195
+ <ebiz-tdesign-select
196
+ v-model="valueCollapsed"
197
+ placeholder="多选折叠显示"
198
+ :options="moreOptions"
199
+ multiple
200
+ :minCollapsedNum="2"
201
+ clearable
202
+ :collapsedItems="({ collapsedSelectedItems }) => `+${collapsedSelectedItems.length}`"
203
+ />
204
+ </div>
205
+ </div>
206
+
207
+ <div class="section">
208
+ <h3>虚拟滚动</h3>
209
+ <div class="select-row">
210
+ <ebiz-tdesign-select
211
+ v-model="valueWithScroll"
212
+ placeholder="虚拟滚动(大数据量)"
213
+ :options="largeDataOptions"
214
+ :scroll="{ type: 'virtual', threshold: 100 }"
215
+ clearable
216
+ @scroll="handleVirtualScroll"
217
+ />
218
+ </div>
219
+ </div>
220
+
221
+ <div class="section">
222
+ <h3>带前缀图标</h3>
223
+ <div class="select-row">
224
+ <ebiz-tdesign-select
225
+ v-model="valueWithIcon"
226
+ placeholder="带图标的选择器"
227
+ :options="baseOptions"
228
+ prefixIcon="search"
229
+ clearable
230
+ />
231
+ </div>
232
+ </div>
233
+
234
+ <div class="section">
235
+ <h3>事件处理</h3>
236
+ <div class="select-row">
237
+ <ebiz-tdesign-select
238
+ v-model="value10"
239
+ placeholder="包含多种事件"
240
+ :options="baseOptions"
241
+ clearable
242
+ @change="handleChange"
243
+ @focus="handleFocus"
244
+ @blur="handleBlur"
245
+ @clear="handleClear"
246
+ @keydown="handleKeydown"
247
+ @mouseenter="handleMouseEnter"
248
+ @mouseleave="handleMouseLeave"
249
+ />
250
+ </div>
251
+ <div class="event-log">
252
+ <p>事件日志:</p>
253
+ <div v-for="(log, index) in eventLogs" :key="index">
254
+ {{ log }}
255
+ </div>
256
+ </div>
257
+ </div>
258
+
259
+ <div class="section">
260
+ <h3>自定义选项面板</h3>
261
+ <div class="select-row">
262
+ <ebiz-tdesign-select
263
+ v-model="valueWithPanel"
264
+ placeholder="带自定义面板的选择器"
265
+ :options="baseOptions"
266
+ clearable
267
+ >
268
+ <template #panelTopContent>
269
+ <div class="custom-panel-header">自定义面板顶部内容</div>
270
+ </template>
271
+ <template #panelBottomContent>
272
+ <div class="custom-panel-footer">自定义面板底部内容</div>
273
+ </template>
274
+ </ebiz-tdesign-select>
275
+ </div>
276
+ </div>
277
+ </div>
278
+ </template>
279
+
280
+ <script>
281
+ import { EbizTdesignSelect } from '../index.js'
282
+
283
+ export default {
284
+ name: 'TdesignSelectDemo',
285
+ components: {
286
+ EbizTdesignSelect
287
+ },
288
+ data() {
289
+ return {
290
+ // 基础选项数据
291
+ baseOptions: [
292
+ { label: '选项一', value: '1' },
293
+ { label: '选项二', value: '2' },
294
+ { label: '选项三', value: '3' },
295
+ { label: '选项四', value: '4' },
296
+ { label: '选项五', value: '5' }
297
+ ],
298
+
299
+ // 自定义键名选项数据
300
+ customKeyOptions: [
301
+ { text: '自定义选项一', id: '101' },
302
+ { text: '自定义选项二', id: '102' },
303
+ { text: '自定义选项三', id: '103' }
304
+ ],
305
+
306
+ // 多项选项数据
307
+ moreOptions: Array.from({ length: 20 }).map((_, index) => ({
308
+ label: `选项 ${index + 1}`,
309
+ value: `${index + 1}`
310
+ })),
311
+
312
+ // 各种示例的选中值
313
+ value1: '',
314
+ value2: [],
315
+ value3: '',
316
+ value4Small: '',
317
+ value4Medium: '',
318
+ value4Large: '',
319
+ value5: '',
320
+ value6Success: '',
321
+ value6Warning: '',
322
+ value6Error: '',
323
+ value7Disabled: '',
324
+ value7Loading: '',
325
+ value7Readonly: '1',
326
+ value8: '',
327
+ value9: '',
328
+ value10: '',
329
+ valueWithLabel: '',
330
+ valueWithKeys: '',
331
+ valueCollapsed: [],
332
+ valueWithPanel: '',
333
+ valueWithIcon: '',
334
+ valueWithScroll: '',
335
+
336
+ // 事件日志
337
+ eventLogs: [],
338
+
339
+ // 大数据选项
340
+ largeDataOptions: Array.from({ length: 5000 }).map((_, index) => ({
341
+ label: `大数据选项 ${index + 1}`,
342
+ value: `large-${index + 1}`
343
+ }))
344
+ }
345
+ },
346
+ methods: {
347
+ // 创建新选项
348
+ handleCreate(value) {
349
+ this.baseOptions.push({
350
+ label: value,
351
+ value: `new-${this.baseOptions.length + 1}`
352
+ });
353
+ this.addEventLog(`创建了新选项: ${value}`);
354
+ },
355
+
356
+ // 选中值变化
357
+ handleChange(value, context) {
358
+ this.addEventLog(`选中值变化: ${value}`);
359
+ },
360
+
361
+ // 获得焦点
362
+ handleFocus(context) {
363
+ this.addEventLog('选择器获得焦点');
364
+ },
365
+
366
+ // 失去焦点
367
+ handleBlur(value, context) {
368
+ this.addEventLog('选择器失去焦点');
369
+ },
370
+
371
+ // 清空选项
372
+ handleClear(context) {
373
+ this.addEventLog('选择器被清空');
374
+ },
375
+
376
+ // 键盘按下
377
+ handleKeydown(value, context) {
378
+ this.addEventLog(`键盘按下: ${value.key}`);
379
+ },
380
+
381
+ // 鼠标进入
382
+ handleMouseEnter(context) {
383
+ this.addEventLog('鼠标进入选择器');
384
+ },
385
+
386
+ // 鼠标离开
387
+ handleMouseLeave(context) {
388
+ this.addEventLog('鼠标离开选择器');
389
+ },
390
+
391
+ // 虚拟滚动事件
392
+ handleVirtualScroll({ scrollTop, scrollBottom }) {
393
+ this.addEventLog(`滚动位置: 顶部${scrollTop}px, 底部${scrollBottom}px`);
394
+ },
395
+
396
+ // 添加事件日志
397
+ addEventLog(log) {
398
+ const now = new Date();
399
+ const time = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
400
+ this.eventLogs.unshift(`[${time}] ${log}`);
401
+
402
+ // 只保留最近10条日志
403
+ if (this.eventLogs.length > 10) {
404
+ this.eventLogs = this.eventLogs.slice(0, 10);
405
+ }
406
+ }
407
+ }
408
+ }
409
+ </script>
410
+
411
+ <style scoped>
412
+ .tdesign-select-demo {
413
+ padding: 20px;
414
+ max-width: 1200px;
415
+ margin: 0 auto;
416
+ }
417
+
418
+ .section {
419
+ margin-bottom: 30px;
420
+ border-bottom: 1px solid #eee;
421
+ padding-bottom: 20px;
422
+ }
423
+
424
+ h2 {
425
+ margin-bottom: 20px;
426
+ font-size: 24px;
427
+ color: #0052d9;
428
+ }
429
+
430
+ h3 {
431
+ margin-bottom: 12px;
432
+ font-size: 18px;
433
+ color: #333;
434
+ }
435
+
436
+ .select-row {
437
+ display: flex;
438
+ gap: 20px;
439
+ margin-bottom: 16px;
440
+ flex-wrap: wrap;
441
+ align-items: center;
442
+ }
443
+
444
+ .event-log {
445
+ margin-top: 16px;
446
+ background-color: #f5f5f5;
447
+ padding: 12px;
448
+ border-radius: 6px;
449
+ max-height: 200px;
450
+ overflow-y: auto;
451
+ font-family: monospace;
452
+ font-size: 14px;
453
+ }
454
+
455
+ .event-log p {
456
+ font-weight: bold;
457
+ margin-bottom: 8px;
458
+ }
459
+
460
+ .custom-panel-header,
461
+ .custom-panel-footer {
462
+ padding: 8px 12px;
463
+ background-color: #f0f5ff;
464
+ color: #0052d9;
465
+ text-align: center;
466
+ border-radius: 3px;
467
+ margin: 4px 0;
468
+ }
469
+
470
+ .custom-panel-footer {
471
+ background-color: #f5f5f5;
472
+ color: #666;
473
+ }
474
474
  </style>