vxe-pc-ui 4.10.23 → 4.10.25

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 (42) hide show
  1. package/es/icon/style.css +1 -1
  2. package/es/style.css +1 -1
  3. package/es/style.min.css +1 -1
  4. package/es/ui/index.js +1 -1
  5. package/es/ui/src/log.js +1 -1
  6. package/es/upload/src/upload.js +256 -203
  7. package/es/upload/style.css +1 -1
  8. package/es/upload/style.min.css +1 -1
  9. package/es/vxe-upload/style.css +1 -1
  10. package/es/vxe-upload/style.min.css +1 -1
  11. package/lib/icon/style/style.css +1 -1
  12. package/lib/icon/style/style.min.css +1 -1
  13. package/lib/index.umd.js +108 -16
  14. package/lib/index.umd.min.js +1 -1
  15. package/lib/style.css +1 -1
  16. package/lib/style.min.css +1 -1
  17. package/lib/ui/index.js +1 -1
  18. package/lib/ui/index.min.js +1 -1
  19. package/lib/ui/src/log.js +1 -1
  20. package/lib/ui/src/log.min.js +1 -1
  21. package/lib/upload/src/upload.js +106 -14
  22. package/lib/upload/src/upload.min.js +1 -1
  23. package/lib/upload/style/style.css +1 -1
  24. package/lib/upload/style/style.min.css +1 -1
  25. package/lib/vxe-upload/style/style.css +1 -1
  26. package/lib/vxe-upload/style/style.min.css +1 -1
  27. package/package.json +1 -1
  28. package/packages/upload/src/upload.ts +275 -223
  29. package/styles/components/upload.scss +1 -1
  30. package/types/components/upload.d.ts +56 -5
  31. /package/es/icon/{iconfont.1762996548923.ttf → iconfont.1763018326353.ttf} +0 -0
  32. /package/es/icon/{iconfont.1762996548923.woff → iconfont.1763018326353.woff} +0 -0
  33. /package/es/icon/{iconfont.1762996548923.woff2 → iconfont.1763018326353.woff2} +0 -0
  34. /package/es/{iconfont.1762996548923.ttf → iconfont.1763018326353.ttf} +0 -0
  35. /package/es/{iconfont.1762996548923.woff → iconfont.1763018326353.woff} +0 -0
  36. /package/es/{iconfont.1762996548923.woff2 → iconfont.1763018326353.woff2} +0 -0
  37. /package/lib/icon/style/{iconfont.1762996548923.ttf → iconfont.1763018326353.ttf} +0 -0
  38. /package/lib/icon/style/{iconfont.1762996548923.woff → iconfont.1763018326353.woff} +0 -0
  39. /package/lib/icon/style/{iconfont.1762996548923.woff2 → iconfont.1763018326353.woff2} +0 -0
  40. /package/lib/{iconfont.1762996548923.ttf → iconfont.1763018326353.ttf} +0 -0
  41. /package/lib/{iconfont.1762996548923.woff → iconfont.1763018326353.woff} +0 -0
  42. /package/lib/{iconfont.1762996548923.woff2 → iconfont.1763018326353.woff2} +0 -0
package/es/upload/src/upload.js CHANGED
@@ -1,4 +1,4 @@
1
- import { ref, h, reactive, watch, computed, TransitionGroup, inject, onUnmounted, onMounted } from 'vue';
1
+ import { ref, h, reactive, watch, computed, TransitionGroup, inject, onUnmounted, onMounted, nextTick } from 'vue';
2
2
  import { defineVxeComponent } from '../../ui/src/comp';
3
3
  import XEUtils from 'xe-utils';
4
4
  import { VxeUI, getConfig, getI18n, getIcon, useSize, createEvent, globalEvents, renderEmptyElement } from '../../ui';
@@ -190,7 +190,8 @@ export default defineVxeComponent({
190
190
  'download-fail',
191
191
  'upload-success',
192
192
  'upload-error',
193
- 'sort-dragend'
193
+ 'sort-dragend',
194
+ 'more-visible'
194
195
  ],
195
196
  setup(props, context) {
196
197
  const { emit, slots } = context;
@@ -214,6 +215,7 @@ export default defineVxeComponent({
214
215
  dragTipText: ''
215
216
  });
216
217
  const internalData = {
218
+ moreId: XEUtils.uniqueId('upload'),
217
219
  imagePreviewTypes: ['jpg', 'jpeg', 'png', 'gif'],
218
220
  prevDragIndex: -1
219
221
  // prevDragPos: ''
@@ -895,11 +897,13 @@ export default defineVxeComponent({
895
897
  });
896
898
  return files;
897
899
  };
898
- const handleMoreEvent = () => {
900
+ const handleMoreEvent = (evntParams) => {
899
901
  const formReadonly = computeFormReadonly.value;
900
902
  const isImage = computeIsImage.value;
903
+ const evnt = evntParams.$event;
901
904
  if (VxeUI.modal) {
902
905
  VxeUI.modal.open({
906
+ id: internalData.moreId,
903
907
  title: formReadonly ? getI18n('vxe.upload.morePopup.readTitle') : getI18n(`vxe.upload.morePopup.${isImage ? 'imageTitle' : 'fileTitle'}`),
904
908
  width: 660,
905
909
  height: 500,
@@ -913,6 +917,7 @@ export default defineVxeComponent({
913
917
  const { isActivated, isDragMove, isDragUploadStatus, dragIndex } = reactData;
914
918
  const { fileList } = reactData;
915
919
  const isDisabled = computeIsDisabled.value;
920
+ const moreContSlot = slots.moreContent || slots['more-content'];
916
921
  const ons = {};
917
922
  if (dragToUpload && dragIndex === -1) {
918
923
  ons.onDragover = handleUploadDragoverEvent;
@@ -925,56 +930,64 @@ export default defineVxeComponent({
925
930
  'is--active': isActivated,
926
931
  'show--error': showErrorStatus,
927
932
  'is--drag': isDragUploadStatus
928
- }] }, ons), [
929
- isImage
930
- ? (dragSort
931
- ? h(TransitionGroup, {
932
- name: `vxe-upload--drag-list${isDragMove ? '' : '-disabled'}`,
933
- tag: 'div',
934
- class: 'vxe-upload--image-more-list'
935
- }, {
936
- default: () => renderImageItemList(fileList, true).concat(renderImageAction(true))
937
- })
938
- : h('div', {
939
- class: 'vxe-upload--image-more-list'
940
- }, renderImageItemList(fileList, true).concat(renderImageAction(true))))
941
- : h('div', {
942
- class: 'vxe-upload--file-more-list'
943
- }, [
944
- renderFileAction(true),
945
- dragSort
933
+ }] }, ons), moreContSlot
934
+ ? getSlotVNs(moreContSlot({ options: fileList }))
935
+ : [
936
+ isImage
937
+ ? (dragSort
946
938
  ? h(TransitionGroup, {
947
939
  name: `vxe-upload--drag-list${isDragMove ? '' : '-disabled'}`,
948
940
  tag: 'div',
949
- class: 'vxe-upload--file-list'
941
+ class: 'vxe-upload--image-more-list'
950
942
  }, {
951
- default: () => renderFileItemList(fileList, false)
943
+ default: () => renderImageItemList(fileList, true).concat(renderImageAction(true))
952
944
  })
953
945
  : h('div', {
954
- class: 'vxe-upload--file-list'
955
- }, renderFileItemList(fileList, true))
956
- ]),
957
- dragSort
958
- ? h('div', {
959
- ref: refModalDragLineElem,
960
- class: 'vxe-upload--drag-line'
961
- })
962
- : renderEmptyElement($xeUpload),
963
- isDragUploadStatus
964
- ? h('div', {
965
- class: 'vxe-upload--drag-placeholder'
966
- }, getI18n('vxe.upload.dragPlaceholder'))
967
- : renderEmptyElement($xeUpload)
968
- ]);
946
+ class: 'vxe-upload--image-more-list'
947
+ }, renderImageItemList(fileList, true).concat(renderImageAction(true))))
948
+ : h('div', {
949
+ class: 'vxe-upload--file-more-list'
950
+ }, [
951
+ renderFileAction(true),
952
+ dragSort
953
+ ? h(TransitionGroup, {
954
+ name: `vxe-upload--drag-list${isDragMove ? '' : '-disabled'}`,
955
+ tag: 'div',
956
+ class: 'vxe-upload--file-list'
957
+ }, {
958
+ default: () => renderFileItemList(fileList, false)
959
+ })
960
+ : h('div', {
961
+ class: 'vxe-upload--file-list'
962
+ }, renderFileItemList(fileList, true))
963
+ ]),
964
+ dragSort
965
+ ? h('div', {
966
+ ref: refModalDragLineElem,
967
+ class: 'vxe-upload--drag-line'
968
+ })
969
+ : renderEmptyElement($xeUpload),
970
+ isDragUploadStatus
971
+ ? h('div', {
972
+ class: 'vxe-upload--drag-placeholder'
973
+ }, getI18n('vxe.upload.dragPlaceholder'))
974
+ : renderEmptyElement($xeUpload)
975
+ ]);
969
976
  }
970
977
  },
971
978
  onShow() {
972
979
  reactData.showMorePopup = true;
973
980
  },
974
- onHide() {
981
+ onHide({ $event }) {
975
982
  reactData.showMorePopup = false;
983
+ if ($event) {
984
+ dispatchEvent('more-visible', { visible: false }, $event);
985
+ }
976
986
  }
977
987
  });
988
+ if (evnt) {
989
+ dispatchEvent('more-visible', { visible: true }, evnt);
990
+ }
978
991
  }
979
992
  };
980
993
  const showDropTip = (evnt, dragEl, dragPos) => {
@@ -1157,18 +1170,38 @@ export default defineVxeComponent({
1157
1170
  return Promise.all(allPendingList.splice(0, msNum).map(handleSubmit)).then(() => {
1158
1171
  // 完成
1159
1172
  });
1173
+ },
1174
+ getMoreVisible() {
1175
+ return reactData.showMorePopup;
1176
+ },
1177
+ openMore() {
1178
+ handleMoreEvent({ $event: new Event('click') });
1179
+ return nextTick();
1180
+ },
1181
+ openMoreByEvent(evnt) {
1182
+ handleMoreEvent({ $event: evnt });
1183
+ return nextTick();
1184
+ },
1185
+ closeMore() {
1186
+ if (VxeUI.modal) {
1187
+ VxeUI.modal.close(internalData.moreId);
1188
+ }
1189
+ return nextTick();
1160
1190
  }
1161
1191
  };
1162
1192
  const uploadPrivateMethods = {};
1163
1193
  Object.assign($xeUpload, uploadMethods, uploadPrivateMethods);
1164
1194
  const renderFileItemList = (currList, isMoreView) => {
1165
1195
  const { showRemoveButton, showDownloadButton, showProgress, progressText, showPreview, showErrorStatus, dragSort, autoSubmit, showSubmitButton } = props;
1166
- const { fileCacheMaps } = reactData;
1196
+ const { fileList, fileCacheMaps } = reactData;
1167
1197
  const isDisabled = computeIsDisabled.value;
1168
1198
  const formReadonly = computeFormReadonly.value;
1169
1199
  const nameProp = computeNameProp.value;
1170
1200
  const typeProp = computeTypeProp.value;
1201
+ const optionSlot = slots.option;
1202
+ const actionSlot = slots.action;
1171
1203
  const cornerSlot = slots.corner;
1204
+ const nameSlot = slots.name;
1172
1205
  const ons = {};
1173
1206
  if (dragSort && currList.length > 1) {
1174
1207
  ons.onDragstart = handleDragSortDragstartEvent;
@@ -1192,90 +1225,95 @@ export default defineVxeComponent({
1192
1225
  'is--loading': isLoading,
1193
1226
  'is--pending': isPending,
1194
1227
  'is--error': isError
1195
- }], fileid: fileKey, draggable: dragSort ? true : null }, ons), [
1196
- h('div', {
1197
- class: 'vxe-upload--file-item-icon'
1198
- }, [
1199
- h('i', {
1200
- class: getIcon()[`UPLOAD_FILE_TYPE_${`${item[typeProp]}`.toLocaleUpperCase()}`] || getIcon().UPLOAD_FILE_TYPE_DEFAULT
1201
- })
1202
- ]),
1203
- h('div', {
1204
- class: 'vxe-upload--file-item-name',
1205
- title: fileName,
1206
- onClick(evnt) {
1207
- if (!isLoading && !isError) {
1208
- handlePreviewFileEvent(evnt, item);
1209
- }
1210
- }
1211
- }, fileName),
1212
- isLoading
1213
- ? h('div', {
1214
- class: 'vxe-upload--file-item-loading-icon'
1228
+ }], fileid: fileKey, draggable: dragSort ? true : null }, ons), optionSlot
1229
+ ? getSlotVNs(optionSlot({ option: item, isMoreView, options: fileList }))
1230
+ : [
1231
+ h('div', {
1232
+ class: 'vxe-upload--file-item-icon'
1215
1233
  }, [
1216
1234
  h('i', {
1217
- class: getIcon().UPLOAD_LOADING
1235
+ class: getIcon()[`UPLOAD_FILE_TYPE_${`${item[typeProp]}`.toLocaleUpperCase()}`] || getIcon().UPLOAD_FILE_TYPE_DEFAULT
1218
1236
  })
1219
- ])
1220
- : renderEmptyElement($xeUpload),
1221
- showProgress && isLoading && cacheItem
1222
- ? h('div', {
1223
- class: 'vxe-upload--file-item-loading-text'
1224
- }, progressText ? XEUtils.toFormatString(`${XEUtils.isFunction(progressText) ? progressText({}) : progressText}`, { percent: cacheItem.percent }) : getI18n('vxe.upload.uploadProgress', [cacheItem.percent]))
1225
- : renderEmptyElement($xeUpload),
1226
- !isLoading && ((isError && showErrorStatus) || (isPending && showSubmitButton && !autoSubmit))
1227
- ? h('div', {
1228
- class: 'vxe-upload--file-item-rebtn'
1229
- }, [
1230
- h(VxeButtonComponent, {
1231
- icon: isError ? getIcon().UPLOAD_IMAGE_RE_UPLOAD : getIcon().UPLOAD_IMAGE_UPLOAD,
1232
- mode: 'text',
1233
- status: 'primary',
1234
- content: isError ? getI18n('vxe.upload.reUpload') : getI18n('vxe.upload.manualUpload'),
1235
- onClick() {
1236
- handleReUpload(item);
1237
+ ]),
1238
+ h('div', {
1239
+ class: 'vxe-upload--file-item-name',
1240
+ title: fileName,
1241
+ onClick(evnt) {
1242
+ if (!isLoading && !isError) {
1243
+ handlePreviewFileEvent(evnt, item);
1237
1244
  }
1238
- })
1239
- ])
1240
- : renderEmptyElement($xeUpload),
1241
- h('div', {
1242
- class: 'vxe-upload--file-item-btn-wrapper'
1243
- }, [
1244
- cornerSlot
1245
- ? h('div', {
1246
- class: 'vxe-upload--file-item-corner'
1247
- }, getSlotVNs(cornerSlot({ option: item, isMoreView, readonly: formReadonly })))
1248
- : renderEmptyElement($xeUpload),
1249
- showDownloadButton && !(isLoading || isPending)
1245
+ }
1246
+ }, nameSlot ? getSlotVNs(nameSlot({ option: item, isMoreView, options: fileList })) : fileName),
1247
+ isLoading
1250
1248
  ? h('div', {
1251
- class: 'vxe-upload--file-item-download-btn',
1252
- onClick(evnt) {
1253
- downloadFileEvent(evnt, item);
1254
- }
1249
+ class: 'vxe-upload--file-item-loading-icon'
1255
1250
  }, [
1256
1251
  h('i', {
1257
- class: getIcon().UPLOAD_FILE_DOWNLOAD
1252
+ class: getIcon().UPLOAD_LOADING
1258
1253
  })
1259
1254
  ])
1260
1255
  : renderEmptyElement($xeUpload),
1261
- showRemoveButton && !formReadonly && !isDisabled && !isLoading
1256
+ showProgress && isLoading && cacheItem
1262
1257
  ? h('div', {
1263
- class: 'vxe-upload--file-item-remove-btn',
1264
- onClick(evnt) {
1265
- removeFileEvent(evnt, item, index);
1266
- }
1258
+ class: 'vxe-upload--file-item-loading-text'
1259
+ }, progressText ? XEUtils.toFormatString(`${XEUtils.isFunction(progressText) ? progressText({}) : progressText}`, { percent: cacheItem.percent }) : getI18n('vxe.upload.uploadProgress', [cacheItem.percent]))
1260
+ : renderEmptyElement($xeUpload),
1261
+ !isLoading && ((isError && showErrorStatus) || (isPending && showSubmitButton && !autoSubmit))
1262
+ ? h('div', {
1263
+ class: 'vxe-upload--file-item-rebtn'
1267
1264
  }, [
1268
- h('i', {
1269
- class: getIcon().UPLOAD_FILE_REMOVE
1265
+ h(VxeButtonComponent, {
1266
+ icon: isError ? getIcon().UPLOAD_IMAGE_RE_UPLOAD : getIcon().UPLOAD_IMAGE_UPLOAD,
1267
+ mode: 'text',
1268
+ status: 'primary',
1269
+ content: isError ? getI18n('vxe.upload.reUpload') : getI18n('vxe.upload.manualUpload'),
1270
+ onClick() {
1271
+ handleReUpload(item);
1272
+ }
1270
1273
  })
1271
1274
  ])
1272
- : renderEmptyElement($xeUpload)
1273
- ])
1274
- ]);
1275
+ : renderEmptyElement($xeUpload),
1276
+ h('div', {
1277
+ class: 'vxe-upload--file-item-btn-wrapper'
1278
+ }, actionSlot
1279
+ ? getSlotVNs(actionSlot({ option: item, isMoreView, options: fileList, readonly: formReadonly }))
1280
+ : [
1281
+ cornerSlot
1282
+ ? h('div', {
1283
+ class: 'vxe-upload--file-item-action'
1284
+ }, getSlotVNs(cornerSlot({ option: item, isMoreView, options: fileList, readonly: formReadonly })))
1285
+ : renderEmptyElement($xeUpload),
1286
+ showDownloadButton && !(isLoading || isPending)
1287
+ ? h('div', {
1288
+ class: 'vxe-upload--file-item-download-btn',
1289
+ onClick(evnt) {
1290
+ downloadFileEvent(evnt, item);
1291
+ }
1292
+ }, [
1293
+ h('i', {
1294
+ class: getIcon().UPLOAD_FILE_DOWNLOAD
1295
+ })
1296
+ ])
1297
+ : renderEmptyElement($xeUpload),
1298
+ showRemoveButton && !formReadonly && !isDisabled && !isLoading
1299
+ ? h('div', {
1300
+ class: 'vxe-upload--file-item-remove-btn',
1301
+ onClick(evnt) {
1302
+ removeFileEvent(evnt, item, index);
1303
+ }
1304
+ }, [
1305
+ h('i', {
1306
+ class: getIcon().UPLOAD_FILE_REMOVE
1307
+ })
1308
+ ])
1309
+ : renderEmptyElement($xeUpload)
1310
+ ])
1311
+ ]);
1275
1312
  });
1276
1313
  };
1277
1314
  const renderFileAction = (isMoreView) => {
1278
1315
  const { showUploadButton, buttonText, buttonIcon, showButtonText, showButtonIcon, autoHiddenButton } = props;
1316
+ const { fileList } = reactData;
1279
1317
  const isDisabled = computeIsDisabled.value;
1280
1318
  const formReadonly = computeFormReadonly.value;
1281
1319
  const showTipText = computedShowTipText.value;
@@ -1295,7 +1333,7 @@ export default defineVxeComponent({
1295
1333
  class: 'vxe-upload--file-action-btn',
1296
1334
  onClick: clickEvent
1297
1335
  }, defaultSlot
1298
- ? getSlotVNs(defaultSlot({ $upload: $xeUpload }))
1336
+ ? getSlotVNs(defaultSlot({ isMoreView, options: fileList, $upload: $xeUpload }))
1299
1337
  : [
1300
1338
  h(VxeButtonComponent, {
1301
1339
  class: 'vxe-upload--file-action-button',
@@ -1307,7 +1345,7 @@ export default defineVxeComponent({
1307
1345
  showTipText && (defTipText || tipSlot)
1308
1346
  ? h('div', {
1309
1347
  class: 'vxe-upload--file-action-tip'
1310
- }, tipSlot ? getSlotVNs(tipSlot({ $upload: $xeUpload })) : `${defTipText}`)
1348
+ }, tipSlot ? getSlotVNs(tipSlot({ isMoreView, options: fileList, $upload: $xeUpload })) : `${defTipText}`)
1311
1349
  : renderEmptyElement($xeUpload)
1312
1350
  ]);
1313
1351
  };
@@ -1317,6 +1355,7 @@ export default defineVxeComponent({
1317
1355
  const moreOpts = computeMoreOpts.value;
1318
1356
  const { maxCount, showMoreButton, layout } = moreOpts;
1319
1357
  const isHorizontal = layout === 'horizontal';
1358
+ const moreBtnSlot = slots.moreButton || slots['more-button'];
1320
1359
  let currList = fileList;
1321
1360
  let overMaxNum = 0;
1322
1361
  if (maxCount && fileList.length > maxCount) {
@@ -1353,14 +1392,16 @@ export default defineVxeComponent({
1353
1392
  showMoreButton && overMaxNum
1354
1393
  ? h('div', {
1355
1394
  class: 'vxe-upload--file-over-more'
1356
- }, [
1357
- h(VxeButtonComponent, {
1358
- mode: 'text',
1359
- content: getI18n('vxe.upload.moreBtnText', [fileList.length]),
1360
- status: 'primary',
1361
- onClick: handleMoreEvent
1362
- })
1363
- ])
1395
+ }, moreBtnSlot
1396
+ ? getSlotVNs(moreBtnSlot({ options: fileList }))
1397
+ : [
1398
+ h(VxeButtonComponent, {
1399
+ mode: 'text',
1400
+ content: getI18n('vxe.upload.moreBtnText', [fileList.length]),
1401
+ status: 'primary',
1402
+ onClick: handleMoreEvent
1403
+ })
1404
+ ])
1364
1405
  : renderEmptyElement($xeUpload),
1365
1406
  showMoreButton && moreConfig && isHorizontal
1366
1407
  ? renderFileAction(false)
@@ -1374,11 +1415,13 @@ export default defineVxeComponent({
1374
1415
  };
1375
1416
  const renderImageItemList = (currList, isMoreView) => {
1376
1417
  const { showRemoveButton, showProgress, progressText, showPreview, showErrorStatus, dragSort, autoSubmit, showSubmitButton } = props;
1377
- const { fileCacheMaps } = reactData;
1418
+ const { fileList, fileCacheMaps } = reactData;
1378
1419
  const isDisabled = computeIsDisabled.value;
1379
1420
  const formReadonly = computeFormReadonly.value;
1380
1421
  const imageOpts = computeImageOpts.value;
1381
1422
  const imgStyle = computeImgStyle.value;
1423
+ const optionSlot = slots.option;
1424
+ const actionSlot = slots.action;
1382
1425
  const cornerSlot = slots.corner;
1383
1426
  const ons = {
1384
1427
  onMousedown: handleItemMousedownEvent
@@ -1405,89 +1448,94 @@ export default defineVxeComponent({
1405
1448
  'is--loading': isLoading,
1406
1449
  'is--pending': isPending,
1407
1450
  'is--error': isError
1408
- }], fileid: fileKey, draggable: dragSort ? true : null }, ons), [
1409
- h('div', {
1410
- class: 'vxe-upload--image-item-box',
1411
- style: isMoreView ? null : imgStyle,
1412
- onClick(evnt) {
1413
- if (!isLoading && !isError) {
1414
- handlePreviewImageEvent(evnt, item, index);
1415
- }
1416
- }
1417
- }, [
1418
- isLoading && cacheItem
1419
- ? h('div', {
1420
- class: 'vxe-upload--image-item-loading'
1421
- }, [
1422
- h('div', {
1423
- class: 'vxe-upload--image-item-loading-icon'
1424
- }, [
1425
- h('i', {
1426
- class: getIcon().UPLOAD_LOADING
1427
- })
1428
- ]),
1429
- showProgress
1430
- ? h('div', {
1431
- class: 'vxe-upload--image-item-loading-text'
1432
- }, progressText ? XEUtils.toFormatString(`${XEUtils.isFunction(progressText) ? progressText({}) : progressText}`, { percent: cacheItem.percent }) : getI18n('vxe.upload.uploadProgress', [cacheItem.percent]))
1433
- : renderEmptyElement($xeUpload)
1434
- ])
1435
- : renderEmptyElement($xeUpload),
1436
- h('div', {
1437
- class: 'vxe-upload--image-item-img-wrapper',
1438
- title: getI18n('vxe.upload.viewItemTitle')
1439
- }, [
1440
- h('img', {
1441
- class: 'vxe-upload--image-item-img',
1442
- src: getThumbnailFileUrl(item)
1443
- })
1444
- ]),
1445
- !isLoading && ((isError && showErrorStatus) || (isPending && showSubmitButton && !autoSubmit))
1446
- ? h('div', {
1447
- class: 'vxe-upload--image-item-rebtn'
1448
- }, [
1449
- h(VxeButtonComponent, {
1450
- icon: isError ? getIcon().UPLOAD_IMAGE_RE_UPLOAD : getIcon().UPLOAD_IMAGE_UPLOAD,
1451
- mode: 'text',
1452
- status: 'primary',
1453
- content: isError ? getI18n('vxe.upload.reUpload') : getI18n('vxe.upload.manualUpload'),
1454
- onClick() {
1455
- handleReUpload(item);
1456
- }
1457
- })
1458
- ])
1459
- : renderEmptyElement($xeUpload),
1451
+ }], fileid: fileKey, draggable: dragSort ? true : null }, ons), optionSlot
1452
+ ? getSlotVNs(optionSlot({ option: item, isMoreView, options: fileList }))
1453
+ : [
1460
1454
  h('div', {
1461
- class: 'vxe-upload--image-item-btn-wrapper',
1455
+ class: 'vxe-upload--image-item-box',
1456
+ style: isMoreView ? null : imgStyle,
1462
1457
  onClick(evnt) {
1463
- evnt.stopPropagation();
1458
+ if (!isLoading && !isError) {
1459
+ handlePreviewImageEvent(evnt, item, index);
1460
+ }
1464
1461
  }
1465
1462
  }, [
1466
- cornerSlot
1463
+ isLoading && cacheItem
1467
1464
  ? h('div', {
1468
- class: 'vxe-upload--file-item-corner'
1469
- }, getSlotVNs(cornerSlot({ option: item, isMoreView, readonly: formReadonly })))
1465
+ class: 'vxe-upload--image-item-loading'
1466
+ }, [
1467
+ h('div', {
1468
+ class: 'vxe-upload--image-item-loading-icon'
1469
+ }, [
1470
+ h('i', {
1471
+ class: getIcon().UPLOAD_LOADING
1472
+ })
1473
+ ]),
1474
+ showProgress
1475
+ ? h('div', {
1476
+ class: 'vxe-upload--image-item-loading-text'
1477
+ }, progressText ? XEUtils.toFormatString(`${XEUtils.isFunction(progressText) ? progressText({}) : progressText}`, { percent: cacheItem.percent }) : getI18n('vxe.upload.uploadProgress', [cacheItem.percent]))
1478
+ : renderEmptyElement($xeUpload)
1479
+ ])
1470
1480
  : renderEmptyElement($xeUpload),
1471
- showRemoveButton && !formReadonly && !isDisabled && !isLoading
1481
+ h('div', {
1482
+ class: 'vxe-upload--image-item-img-wrapper',
1483
+ title: getI18n('vxe.upload.viewItemTitle')
1484
+ }, [
1485
+ h('img', {
1486
+ class: 'vxe-upload--image-item-img',
1487
+ src: getThumbnailFileUrl(item)
1488
+ })
1489
+ ]),
1490
+ !isLoading && ((isError && showErrorStatus) || (isPending && showSubmitButton && !autoSubmit))
1472
1491
  ? h('div', {
1473
- class: 'vxe-upload--image-item-remove-btn',
1474
- onClick(evnt) {
1475
- evnt.stopPropagation();
1476
- removeFileEvent(evnt, item, index);
1477
- }
1492
+ class: 'vxe-upload--image-item-rebtn'
1478
1493
  }, [
1479
- h('i', {
1480
- class: getIcon().UPLOAD_IMAGE_REMOVE
1494
+ h(VxeButtonComponent, {
1495
+ icon: isError ? getIcon().UPLOAD_IMAGE_RE_UPLOAD : getIcon().UPLOAD_IMAGE_UPLOAD,
1496
+ mode: 'text',
1497
+ status: 'primary',
1498
+ content: isError ? getI18n('vxe.upload.reUpload') : getI18n('vxe.upload.manualUpload'),
1499
+ onClick() {
1500
+ handleReUpload(item);
1501
+ }
1481
1502
  })
1482
1503
  ])
1483
- : renderEmptyElement($xeUpload)
1504
+ : renderEmptyElement($xeUpload),
1505
+ h('div', {
1506
+ class: 'vxe-upload--image-item-btn-wrapper',
1507
+ onClick(evnt) {
1508
+ evnt.stopPropagation();
1509
+ }
1510
+ }, actionSlot
1511
+ ? getSlotVNs(actionSlot({ option: item, isMoreView, options: fileList, readonly: formReadonly }))
1512
+ : [
1513
+ cornerSlot
1514
+ ? h('div', {
1515
+ class: 'vxe-upload--file-item-action'
1516
+ }, getSlotVNs(cornerSlot({ option: item, isMoreView, options: fileList, readonly: formReadonly })))
1517
+ : renderEmptyElement($xeUpload),
1518
+ showRemoveButton && !formReadonly && !isDisabled && !isLoading
1519
+ ? h('div', {
1520
+ class: 'vxe-upload--image-item-remove-btn',
1521
+ onClick(evnt) {
1522
+ evnt.stopPropagation();
1523
+ removeFileEvent(evnt, item, index);
1524
+ }
1525
+ }, [
1526
+ h('i', {
1527
+ class: getIcon().UPLOAD_IMAGE_REMOVE
1528
+ })
1529
+ ])
1530
+ : renderEmptyElement($xeUpload)
1531
+ ])
1484
1532
  ])
1485
- ])
1486
- ]);
1533
+ ]);
1487
1534
  });
1488
1535
  };
1489
1536
  const renderImageAction = (isMoreView) => {
1490
1537
  const { showUploadButton, buttonText, buttonIcon, showButtonText, showButtonIcon, autoHiddenButton } = props;
1538
+ const { fileList } = reactData;
1491
1539
  const formReadonly = computeFormReadonly.value;
1492
1540
  const showTipText = computedShowTipText.value;
1493
1541
  const defTipText = computedDefTipText.value;
@@ -1506,7 +1554,7 @@ export default defineVxeComponent({
1506
1554
  class: 'vxe-upload--image-action-btn',
1507
1555
  onClick: clickEvent
1508
1556
  }, defaultSlot
1509
- ? defaultSlot({ $upload: $xeUpload })
1557
+ ? defaultSlot({ isMoreView, options: fileList, $upload: $xeUpload })
1510
1558
  : [
1511
1559
  h('div', {
1512
1560
  class: 'vxe-upload--image-action-box',
@@ -1529,7 +1577,7 @@ export default defineVxeComponent({
1529
1577
  showTipText && (defTipText || tipSlot)
1530
1578
  ? h('div', {
1531
1579
  class: 'vxe-upload--image-action-hint'
1532
- }, tipSlot ? getSlotVNs(tipSlot({ $upload: $xeUpload })) : `${defTipText}`)
1580
+ }, tipSlot ? getSlotVNs(tipSlot({ isMoreView, options: fileList, $upload: $xeUpload })) : `${defTipText}`)
1533
1581
  : renderEmptyElement($xeUpload)
1534
1582
  ])
1535
1583
  ])
@@ -1539,6 +1587,7 @@ export default defineVxeComponent({
1539
1587
  const { showList, dragSort } = props;
1540
1588
  const { fileList, isDragMove } = reactData;
1541
1589
  const moreOpts = computeMoreOpts.value;
1590
+ const moreBtnSlot = slots.moreButton || slots['more-button'];
1542
1591
  const { maxCount, showMoreButton } = moreOpts;
1543
1592
  let currList = fileList;
1544
1593
  let overMaxNum = 0;
@@ -1562,14 +1611,16 @@ export default defineVxeComponent({
1562
1611
  ? h('div', {
1563
1612
  key: 'om',
1564
1613
  class: 'vxe-upload--image-over-more'
1565
- }, [
1566
- h(VxeButtonComponent, {
1567
- mode: 'text',
1568
- content: getI18n('vxe.upload.moreBtnText', [fileList.length]),
1569
- status: 'primary',
1570
- onClick: handleMoreEvent
1571
- })
1572
- ])
1614
+ }, moreBtnSlot
1615
+ ? getSlotVNs(moreBtnSlot({ options: fileList }))
1616
+ : [
1617
+ h(VxeButtonComponent, {
1618
+ mode: 'text',
1619
+ content: getI18n('vxe.upload.moreBtnText', [fileList.length]),
1620
+ status: 'primary',
1621
+ onClick: handleMoreEvent
1622
+ })
1623
+ ])
1573
1624
  : renderEmptyElement($xeUpload),
1574
1625
  renderImageAction(false)
1575
1626
  ])
@@ -1580,14 +1631,16 @@ export default defineVxeComponent({
1580
1631
  showMoreButton && overMaxNum
1581
1632
  ? h('div', {
1582
1633
  class: 'vxe-upload--image-over-more'
1583
- }, [
1584
- h(VxeButtonComponent, {
1585
- mode: 'text',
1586
- content: getI18n('vxe.upload.moreBtnText', [fileList.length]),
1587
- status: 'primary',
1588
- onClick: handleMoreEvent
1589
- })
1590
- ])
1634
+ }, moreBtnSlot
1635
+ ? getSlotVNs(moreBtnSlot({ options: fileList }))
1636
+ : [
1637
+ h(VxeButtonComponent, {
1638
+ mode: 'text',
1639
+ content: getI18n('vxe.upload.moreBtnText', [fileList.length]),
1640
+ status: 'primary',
1641
+ onClick: handleMoreEvent
1642
+ })
1643
+ ])
1591
1644
  : renderEmptyElement($xeUpload),
1592
1645
  renderImageAction(false)
1593
1646
  ]))