@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,445 +1,445 @@
1
- <template>
2
- <t-select
3
- :autoWidth="autoWidth"
4
- :borderless="borderless"
5
- :clearable="clearable"
6
- :collapsedItems="collapsedItems"
7
- :creatable="creatable"
8
- :disabled="disabled"
9
- :empty="empty"
10
- :filter="filter"
11
- :filterable="filterable"
12
- :keys="keys"
13
- :label="label"
14
- :loading="loading"
15
- :loadingText="loadingText"
16
- :max="max"
17
- :minCollapsedNum="minCollapsedNum"
18
- :multiple="multiple"
19
- :options="options"
20
- :placeholder="placeholder"
21
- :popupProps="popupProps"
22
- :popupVisible="popupVisible"
23
- :prefixIcon="prefixIcon"
24
- :readonly="readonly"
25
- :reserveKeyword="reserveKeyword"
26
- :scroll="scroll"
27
- :selectInputProps="selectInputProps"
28
- :showArrow="showArrow"
29
- :size="size"
30
- :status="status"
31
- :tagInputProps="tagInputProps"
32
- :tagProps="tagProps"
33
- :tips="tips"
34
- :valueDisplay="valueDisplay"
35
- :valueType="valueType"
36
- :onPaste="onPaste"
37
- v-model="selectedValue"
38
- @blur="handleBlur"
39
- @change="handleChange"
40
- @clear="handleClear"
41
- @create="handleCreate"
42
- @dropdown-visible-change="handleDropdownVisibleChange"
43
- @enter="handleEnter"
44
- @focus="handleFocus"
45
- @keydown="handleKeydown"
46
- @mouseenter="handleMouseenter"
47
- @mouseleave="handleMouseleave"
48
- @paste="handlePaste"
49
- @popup-visible-change="handlePopupVisibleChange"
50
- @remove="handleRemove"
51
- @scroll="handleScroll"
52
- @search="handleSearch"
53
- >
54
- <!-- 选项插槽 -->
55
- <template v-if="$slots.options" #options>
56
- <slot name="options"></slot>
57
- </template>
58
-
59
- <!-- 前缀图标插槽 -->
60
- <template v-if="$slots.prefixIcon" #prefixIcon>
61
- <slot name="prefixIcon"></slot>
62
- </template>
63
-
64
- <!-- 后缀图标插槽 -->
65
- <template v-if="$slots.suffixIcon" #suffixIcon>
66
- <slot name="suffixIcon"></slot>
67
- </template>
68
-
69
- <!-- 后缀内容插槽 -->
70
- <template v-if="$slots.suffix" #suffix>
71
- <slot name="suffix"></slot>
72
- </template>
73
-
74
- <!-- 空数据插槽 -->
75
- <template v-if="$slots.empty" #empty>
76
- <slot name="empty"></slot>
77
- </template>
78
-
79
- <!-- 选项显示插槽 -->
80
- <template v-if="$slots.valueDisplay" #valueDisplay>
81
- <slot name="valueDisplay"></slot>
82
- </template>
83
-
84
- <!-- 面板底部内容插槽 -->
85
- <template v-if="$slots.panelBottomContent" #panelBottomContent>
86
- <slot name="panelBottomContent"></slot>
87
- </template>
88
-
89
- <!-- 面板顶部内容插槽 -->
90
- <template v-if="$slots.panelTopContent" #panelTopContent>
91
- <slot name="panelTopContent"></slot>
92
- </template>
93
-
94
- <!-- 选项标签插槽 -->
95
- <template v-if="$slots.tag" #tag>
96
- <slot name="tag"></slot>
97
- </template>
98
-
99
- <!-- 加载中插槽 -->
100
- <template v-if="$slots.loadingText" #loadingText>
101
- <slot name="loadingText"></slot>
102
- </template>
103
-
104
- <!-- 折叠项插槽 -->
105
- <template v-if="$slots.collapsedItems" #collapsedItems>
106
- <slot name="collapsedItems"></slot>
107
- </template>
108
-
109
- <!-- 选择框自定义首部内容插槽 -->
110
- <template v-if="$slots.header" #header>
111
- <slot name="header"></slot>
112
- </template>
113
-
114
- <!-- 选择框自定义底部内容插槽 -->
115
- <template v-if="$slots.footer" #footer>
116
- <slot name="footer"></slot>
117
- </template>
118
-
119
- <!-- 输入框前置内容插槽 -->
120
- <template v-if="$slots.prepend" #prepend>
121
- <slot name="prepend"></slot>
122
- </template>
123
-
124
- <!-- 输入框后置内容插槽 -->
125
- <template v-if="$slots.append" #append>
126
- <slot name="append"></slot>
127
- </template>
128
-
129
- <!-- 选项内容插槽 -->
130
- <template v-if="$slots.default" #default>
131
- <slot></slot>
132
- </template>
133
-
134
- <!-- 选项分组标题插槽 -->
135
- <template v-if="$slots.optionGroup" #optionGroup>
136
- <slot name="optionGroup"></slot>
137
- </template>
138
- </t-select>
139
- </template>
140
-
141
- <script>
142
- export default {
143
- name: "EbizTdesignSelect"
144
- }
145
- </script>
146
-
147
- <script setup>
148
- import { defineProps, defineEmits, computed } from 'vue';
149
- import { Select as TSelect } from 'tdesign-vue-next';
150
-
151
- const props = defineProps({
152
- // 选择器的值
153
- modelValue: {
154
- type: [String, Number, Object, Array],
155
- default: undefined
156
- },
157
- // 宽度随内容自适应
158
- autoWidth: {
159
- type: Boolean,
160
- default: false
161
- },
162
- // 无边框模式
163
- borderless: {
164
- type: Boolean,
165
- default: false
166
- },
167
- // 是否可以清空选项
168
- clearable: {
169
- type: Boolean,
170
- default: false
171
- },
172
- // 用于控制多选数量超出时,折叠选项的内容
173
- collapsedItems: {
174
- type: [Function, Boolean],
175
- default: undefined
176
- },
177
- // 是否允许用户创建新条目
178
- creatable: {
179
- type: Boolean,
180
- default: false
181
- },
182
- // 是否禁用选择器
183
- disabled: {
184
- type: Boolean,
185
- default: false
186
- },
187
- // 当下拉列表为空时显示的内容
188
- empty: {
189
- type: String,
190
- default: undefined
191
- },
192
- // 自定义过滤方法
193
- filter: {
194
- type: Function,
195
- default: undefined
196
- },
197
- // 是否可搜索
198
- filterable: {
199
- type: Boolean,
200
- default: false
201
- },
202
- // 用来定义选项中的字段别名
203
- keys: {
204
- type: Object,
205
- default: () => ({})
206
- },
207
- // 左侧文本
208
- label: {
209
- type: [String, Function],
210
- default: undefined
211
- },
212
- // 是否为加载状态
213
- loading: {
214
- type: Boolean,
215
- default: false
216
- },
217
- // 远程加载时显示的文字
218
- loadingText: {
219
- type: String,
220
- default: undefined
221
- },
222
- // 用于控制多选数量,值为 0 则不限制
223
- max: {
224
- type: Number,
225
- default: 0
226
- },
227
- // 最小折叠数量,用于多选情况下折叠选中项
228
- minCollapsedNum: {
229
- type: Number,
230
- default: 0
231
- },
232
- // 是否允许多选
233
- multiple: {
234
- type: Boolean,
235
- default: false
236
- },
237
- // 数据化配置选项内容
238
- options: {
239
- type: Array,
240
- default: () => []
241
- },
242
- // 占位符
243
- placeholder: {
244
- type: String,
245
- default: undefined
246
- },
247
- // 弹出层的定位方式,同 Popup 组件
248
- popupProps: {
249
- type: Object,
250
- default: () => ({})
251
- },
252
- // 是否显示下拉框
253
- popupVisible: {
254
- type: Boolean,
255
- default: undefined
256
- },
257
- // 前缀图标
258
- prefixIcon: {
259
- type: [Function, String],
260
- default: undefined
261
- },
262
- // 只读状态
263
- readonly: {
264
- type: Boolean,
265
- default: false
266
- },
267
- // 多选且可搜索时,是否在选中一个选项后保留当前的搜索关键词
268
- reserveKeyword: {
269
- type: Boolean,
270
- default: false
271
- },
272
- // 懒加载和虚拟滚动配置
273
- scroll: {
274
- type: Object,
275
- default: () => ({})
276
- },
277
- // 透传 SelectInput 筛选器输入框组件的全部属性
278
- selectInputProps: {
279
- type: Object,
280
- default: () => ({})
281
- },
282
- // 是否显示右侧箭头
283
- showArrow: {
284
- type: Boolean,
285
- default: true
286
- },
287
- // 组件尺寸
288
- size: {
289
- type: String,
290
- default: 'medium',
291
- validator: (val) => ['small', 'medium', 'large'].includes(val)
292
- },
293
- // 输入框状态
294
- status: {
295
- type: String,
296
- default: undefined,
297
- validator: (val) => ['default', 'success', 'warning', 'error'].includes(val)
298
- },
299
- // 后置图标前的后置内容
300
- suffix: {
301
- type: String,
302
- default: undefined
303
- },
304
- // 后置图标
305
- suffixIcon: {
306
- type: [Function, String],
307
- default: undefined
308
- },
309
- // 透传 TagInput 标签输入框组件的全部属性
310
- tagInputProps: {
311
- type: Object,
312
- default: () => ({})
313
- },
314
- // 透传 Tag 标签组件的全部属性
315
- tagProps: {
316
- type: Object,
317
- default: () => ({})
318
- },
319
- // 输入框下方提示文本,会根据不同的 status 呈现不同的样式
320
- tips: {
321
- type: String,
322
- default: ''
323
- },
324
- // 自定义选中项呈现方式
325
- valueDisplay: {
326
- type: Function,
327
- default: undefined
328
- },
329
- // 用于控制选中值的类型
330
- valueType: {
331
- type: String,
332
- default: undefined,
333
- validator: (val) => ['value', 'object'].includes(val)
334
- },
335
- // 粘贴事件回调函数,参数为粘贴板内容
336
- onPaste: {
337
- type: Function,
338
- default: undefined
339
- }
340
- });
341
-
342
- // 选择器的值
343
- const selectedValue = computed({
344
- get: () => props.modelValue,
345
- set: (value) => emit('update:modelValue', value)
346
- });
347
-
348
- const emit = defineEmits([
349
- 'update:modelValue',
350
- 'blur',
351
- 'change',
352
- 'clear',
353
- 'create',
354
- 'dropdown-visible-change',
355
- 'enter',
356
- 'focus',
357
- 'keydown',
358
- 'mouseenter',
359
- 'mouseleave',
360
- 'paste',
361
- 'popup-visible-change',
362
- 'remove',
363
- 'scroll',
364
- 'search'
365
- ]);
366
-
367
- // 失去焦点时触发
368
- const handleBlur = (value, context) => {
369
- emit('blur', value, context);
370
- };
371
-
372
- // 选中值变化时触发
373
- const handleChange = (value, context) => {
374
- emit('change', value, context);
375
- };
376
-
377
- // 点击清除按钮时触发
378
- const handleClear = (context) => {
379
- emit('clear', context);
380
- };
381
-
382
- // 当新增选项时触发
383
- const handleCreate = (value, context) => {
384
- emit('create', value, context);
385
- };
386
-
387
- // 下拉框显示状态变化时触发
388
- const handleDropdownVisibleChange = (visible) => {
389
- emit('dropdown-visible-change', visible);
390
- };
391
-
392
- // 按下回车键时触发
393
- const handleEnter = (context) => {
394
- emit('enter', context);
395
- };
396
-
397
- // 获得焦点时触发
398
- const handleFocus = (context) => {
399
- emit('focus', context);
400
- };
401
-
402
- // 键盘按下时触发
403
- const handleKeydown = (value, context) => {
404
- emit('keydown', value, context);
405
- };
406
-
407
- // 鼠标进入时触发
408
- const handleMouseenter = (context) => {
409
- emit('mouseenter', context);
410
- };
411
-
412
- // 鼠标离开时触发
413
- const handleMouseleave = (context) => {
414
- emit('mouseleave', context);
415
- };
416
-
417
- // 粘贴事件触发
418
- const handlePaste = (context) => {
419
- emit('paste', context);
420
- };
421
-
422
- // 下拉框显示或隐藏时触发
423
- const handlePopupVisibleChange = (visible, context) => {
424
- emit('popup-visible-change', visible, context);
425
- };
426
-
427
- // 多选模式下移除tag时触发
428
- const handleRemove = (options) => {
429
- emit('remove', options);
430
- };
431
-
432
- // 滚动事件触发
433
- const handleScroll = ({ scrollTop, scrollBottom }) => {
434
- emit('scroll', { scrollTop, scrollBottom });
435
- };
436
-
437
- // 搜索时触发
438
- const handleSearch = (filterWords) => {
439
- emit('search', filterWords);
440
- };
441
- </script>
442
-
443
- <style lang="less" scoped>
444
- /* 自定义样式 */
1
+ <template>
2
+ <t-select
3
+ :autoWidth="autoWidth"
4
+ :borderless="borderless"
5
+ :clearable="clearable"
6
+ :collapsedItems="collapsedItems"
7
+ :creatable="creatable"
8
+ :disabled="disabled"
9
+ :empty="empty"
10
+ :filter="filter"
11
+ :filterable="filterable"
12
+ :keys="keys"
13
+ :label="label"
14
+ :loading="loading"
15
+ :loadingText="loadingText"
16
+ :max="max"
17
+ :minCollapsedNum="minCollapsedNum"
18
+ :multiple="multiple"
19
+ :options="options"
20
+ :placeholder="placeholder"
21
+ :popupProps="popupProps"
22
+ :popupVisible="popupVisible"
23
+ :prefixIcon="prefixIcon"
24
+ :readonly="readonly"
25
+ :reserveKeyword="reserveKeyword"
26
+ :scroll="scroll"
27
+ :selectInputProps="selectInputProps"
28
+ :showArrow="showArrow"
29
+ :size="size"
30
+ :status="status"
31
+ :tagInputProps="tagInputProps"
32
+ :tagProps="tagProps"
33
+ :tips="tips"
34
+ :valueDisplay="valueDisplay"
35
+ :valueType="valueType"
36
+ :onPaste="onPaste"
37
+ v-model="selectedValue"
38
+ @blur="handleBlur"
39
+ @change="handleChange"
40
+ @clear="handleClear"
41
+ @create="handleCreate"
42
+ @dropdown-visible-change="handleDropdownVisibleChange"
43
+ @enter="handleEnter"
44
+ @focus="handleFocus"
45
+ @keydown="handleKeydown"
46
+ @mouseenter="handleMouseenter"
47
+ @mouseleave="handleMouseleave"
48
+ @paste="handlePaste"
49
+ @popup-visible-change="handlePopupVisibleChange"
50
+ @remove="handleRemove"
51
+ @scroll="handleScroll"
52
+ @search="handleSearch"
53
+ >
54
+ <!-- 选项插槽 -->
55
+ <template v-if="$slots.options" #options>
56
+ <slot name="options"></slot>
57
+ </template>
58
+
59
+ <!-- 前缀图标插槽 -->
60
+ <template v-if="$slots.prefixIcon" #prefixIcon>
61
+ <slot name="prefixIcon"></slot>
62
+ </template>
63
+
64
+ <!-- 后缀图标插槽 -->
65
+ <template v-if="$slots.suffixIcon" #suffixIcon>
66
+ <slot name="suffixIcon"></slot>
67
+ </template>
68
+
69
+ <!-- 后缀内容插槽 -->
70
+ <template v-if="$slots.suffix" #suffix>
71
+ <slot name="suffix"></slot>
72
+ </template>
73
+
74
+ <!-- 空数据插槽 -->
75
+ <template v-if="$slots.empty" #empty>
76
+ <slot name="empty"></slot>
77
+ </template>
78
+
79
+ <!-- 选项显示插槽 -->
80
+ <template v-if="$slots.valueDisplay" #valueDisplay>
81
+ <slot name="valueDisplay"></slot>
82
+ </template>
83
+
84
+ <!-- 面板底部内容插槽 -->
85
+ <template v-if="$slots.panelBottomContent" #panelBottomContent>
86
+ <slot name="panelBottomContent"></slot>
87
+ </template>
88
+
89
+ <!-- 面板顶部内容插槽 -->
90
+ <template v-if="$slots.panelTopContent" #panelTopContent>
91
+ <slot name="panelTopContent"></slot>
92
+ </template>
93
+
94
+ <!-- 选项标签插槽 -->
95
+ <template v-if="$slots.tag" #tag>
96
+ <slot name="tag"></slot>
97
+ </template>
98
+
99
+ <!-- 加载中插槽 -->
100
+ <template v-if="$slots.loadingText" #loadingText>
101
+ <slot name="loadingText"></slot>
102
+ </template>
103
+
104
+ <!-- 折叠项插槽 -->
105
+ <template v-if="$slots.collapsedItems" #collapsedItems>
106
+ <slot name="collapsedItems"></slot>
107
+ </template>
108
+
109
+ <!-- 选择框自定义首部内容插槽 -->
110
+ <template v-if="$slots.header" #header>
111
+ <slot name="header"></slot>
112
+ </template>
113
+
114
+ <!-- 选择框自定义底部内容插槽 -->
115
+ <template v-if="$slots.footer" #footer>
116
+ <slot name="footer"></slot>
117
+ </template>
118
+
119
+ <!-- 输入框前置内容插槽 -->
120
+ <template v-if="$slots.prepend" #prepend>
121
+ <slot name="prepend"></slot>
122
+ </template>
123
+
124
+ <!-- 输入框后置内容插槽 -->
125
+ <template v-if="$slots.append" #append>
126
+ <slot name="append"></slot>
127
+ </template>
128
+
129
+ <!-- 选项内容插槽 -->
130
+ <template v-if="$slots.default" #default>
131
+ <slot></slot>
132
+ </template>
133
+
134
+ <!-- 选项分组标题插槽 -->
135
+ <template v-if="$slots.optionGroup" #optionGroup>
136
+ <slot name="optionGroup"></slot>
137
+ </template>
138
+ </t-select>
139
+ </template>
140
+
141
+ <script>
142
+ export default {
143
+ name: "EbizTdesignSelect"
144
+ }
145
+ </script>
146
+
147
+ <script setup>
148
+ import { defineProps, defineEmits, computed } from 'vue';
149
+ import { Select as TSelect } from 'tdesign-vue-next';
150
+
151
+ const props = defineProps({
152
+ // 选择器的值
153
+ modelValue: {
154
+ type: [String, Number, Object, Array],
155
+ default: undefined
156
+ },
157
+ // 宽度随内容自适应
158
+ autoWidth: {
159
+ type: Boolean,
160
+ default: false
161
+ },
162
+ // 无边框模式
163
+ borderless: {
164
+ type: Boolean,
165
+ default: false
166
+ },
167
+ // 是否可以清空选项
168
+ clearable: {
169
+ type: Boolean,
170
+ default: false
171
+ },
172
+ // 用于控制多选数量超出时,折叠选项的内容
173
+ collapsedItems: {
174
+ type: [Function, Boolean],
175
+ default: undefined
176
+ },
177
+ // 是否允许用户创建新条目
178
+ creatable: {
179
+ type: Boolean,
180
+ default: false
181
+ },
182
+ // 是否禁用选择器
183
+ disabled: {
184
+ type: Boolean,
185
+ default: false
186
+ },
187
+ // 当下拉列表为空时显示的内容
188
+ empty: {
189
+ type: String,
190
+ default: undefined
191
+ },
192
+ // 自定义过滤方法
193
+ filter: {
194
+ type: Function,
195
+ default: undefined
196
+ },
197
+ // 是否可搜索
198
+ filterable: {
199
+ type: Boolean,
200
+ default: false
201
+ },
202
+ // 用来定义选项中的字段别名
203
+ keys: {
204
+ type: Object,
205
+ default: () => ({})
206
+ },
207
+ // 左侧文本
208
+ label: {
209
+ type: [String, Function],
210
+ default: undefined
211
+ },
212
+ // 是否为加载状态
213
+ loading: {
214
+ type: Boolean,
215
+ default: false
216
+ },
217
+ // 远程加载时显示的文字
218
+ loadingText: {
219
+ type: String,
220
+ default: undefined
221
+ },
222
+ // 用于控制多选数量,值为 0 则不限制
223
+ max: {
224
+ type: Number,
225
+ default: 0
226
+ },
227
+ // 最小折叠数量,用于多选情况下折叠选中项
228
+ minCollapsedNum: {
229
+ type: Number,
230
+ default: 0
231
+ },
232
+ // 是否允许多选
233
+ multiple: {
234
+ type: Boolean,
235
+ default: false
236
+ },
237
+ // 数据化配置选项内容
238
+ options: {
239
+ type: Array,
240
+ default: () => []
241
+ },
242
+ // 占位符
243
+ placeholder: {
244
+ type: String,
245
+ default: undefined
246
+ },
247
+ // 弹出层的定位方式,同 Popup 组件
248
+ popupProps: {
249
+ type: Object,
250
+ default: () => ({})
251
+ },
252
+ // 是否显示下拉框
253
+ popupVisible: {
254
+ type: Boolean,
255
+ default: undefined
256
+ },
257
+ // 前缀图标
258
+ prefixIcon: {
259
+ type: [Function, String],
260
+ default: undefined
261
+ },
262
+ // 只读状态
263
+ readonly: {
264
+ type: Boolean,
265
+ default: false
266
+ },
267
+ // 多选且可搜索时,是否在选中一个选项后保留当前的搜索关键词
268
+ reserveKeyword: {
269
+ type: Boolean,
270
+ default: false
271
+ },
272
+ // 懒加载和虚拟滚动配置
273
+ scroll: {
274
+ type: Object,
275
+ default: () => ({})
276
+ },
277
+ // 透传 SelectInput 筛选器输入框组件的全部属性
278
+ selectInputProps: {
279
+ type: Object,
280
+ default: () => ({})
281
+ },
282
+ // 是否显示右侧箭头
283
+ showArrow: {
284
+ type: Boolean,
285
+ default: true
286
+ },
287
+ // 组件尺寸
288
+ size: {
289
+ type: String,
290
+ default: 'medium',
291
+ validator: (val) => ['small', 'medium', 'large'].includes(val)
292
+ },
293
+ // 输入框状态
294
+ status: {
295
+ type: String,
296
+ default: undefined,
297
+ validator: (val) => ['default', 'success', 'warning', 'error'].includes(val)
298
+ },
299
+ // 后置图标前的后置内容
300
+ suffix: {
301
+ type: String,
302
+ default: undefined
303
+ },
304
+ // 后置图标
305
+ suffixIcon: {
306
+ type: [Function, String],
307
+ default: undefined
308
+ },
309
+ // 透传 TagInput 标签输入框组件的全部属性
310
+ tagInputProps: {
311
+ type: Object,
312
+ default: () => ({})
313
+ },
314
+ // 透传 Tag 标签组件的全部属性
315
+ tagProps: {
316
+ type: Object,
317
+ default: () => ({})
318
+ },
319
+ // 输入框下方提示文本,会根据不同的 status 呈现不同的样式
320
+ tips: {
321
+ type: String,
322
+ default: ''
323
+ },
324
+ // 自定义选中项呈现方式
325
+ valueDisplay: {
326
+ type: Function,
327
+ default: undefined
328
+ },
329
+ // 用于控制选中值的类型
330
+ valueType: {
331
+ type: String,
332
+ default: undefined,
333
+ validator: (val) => ['value', 'object'].includes(val)
334
+ },
335
+ // 粘贴事件回调函数,参数为粘贴板内容
336
+ onPaste: {
337
+ type: Function,
338
+ default: undefined
339
+ }
340
+ });
341
+
342
+ // 选择器的值
343
+ const selectedValue = computed({
344
+ get: () => props.modelValue,
345
+ set: (value) => emit('update:modelValue', value)
346
+ });
347
+
348
+ const emit = defineEmits([
349
+ 'update:modelValue',
350
+ 'blur',
351
+ 'change',
352
+ 'clear',
353
+ 'create',
354
+ 'dropdown-visible-change',
355
+ 'enter',
356
+ 'focus',
357
+ 'keydown',
358
+ 'mouseenter',
359
+ 'mouseleave',
360
+ 'paste',
361
+ 'popup-visible-change',
362
+ 'remove',
363
+ 'scroll',
364
+ 'search'
365
+ ]);
366
+
367
+ // 失去焦点时触发
368
+ const handleBlur = (value, context) => {
369
+ emit('blur', value, context);
370
+ };
371
+
372
+ // 选中值变化时触发
373
+ const handleChange = (value, context) => {
374
+ emit('change', value, context);
375
+ };
376
+
377
+ // 点击清除按钮时触发
378
+ const handleClear = (context) => {
379
+ emit('clear', context);
380
+ };
381
+
382
+ // 当新增选项时触发
383
+ const handleCreate = (value, context) => {
384
+ emit('create', value, context);
385
+ };
386
+
387
+ // 下拉框显示状态变化时触发
388
+ const handleDropdownVisibleChange = (visible) => {
389
+ emit('dropdown-visible-change', visible);
390
+ };
391
+
392
+ // 按下回车键时触发
393
+ const handleEnter = (context) => {
394
+ emit('enter', context);
395
+ };
396
+
397
+ // 获得焦点时触发
398
+ const handleFocus = (context) => {
399
+ emit('focus', context);
400
+ };
401
+
402
+ // 键盘按下时触发
403
+ const handleKeydown = (value, context) => {
404
+ emit('keydown', value, context);
405
+ };
406
+
407
+ // 鼠标进入时触发
408
+ const handleMouseenter = (context) => {
409
+ emit('mouseenter', context);
410
+ };
411
+
412
+ // 鼠标离开时触发
413
+ const handleMouseleave = (context) => {
414
+ emit('mouseleave', context);
415
+ };
416
+
417
+ // 粘贴事件触发
418
+ const handlePaste = (context) => {
419
+ emit('paste', context);
420
+ };
421
+
422
+ // 下拉框显示或隐藏时触发
423
+ const handlePopupVisibleChange = (visible, context) => {
424
+ emit('popup-visible-change', visible, context);
425
+ };
426
+
427
+ // 多选模式下移除tag时触发
428
+ const handleRemove = (options) => {
429
+ emit('remove', options);
430
+ };
431
+
432
+ // 滚动事件触发
433
+ const handleScroll = ({ scrollTop, scrollBottom }) => {
434
+ emit('scroll', { scrollTop, scrollBottom });
435
+ };
436
+
437
+ // 搜索时触发
438
+ const handleSearch = (filterWords) => {
439
+ emit('search', filterWords);
440
+ };
441
+ </script>
442
+
443
+ <style lang="less" scoped>
444
+ /* 自定义样式 */
445
445
  </style>