vxe-pc-ui 4.6.46 → 4.6.48

package/es/ui/index.js

@@ -1,7 +1,7 @@
 import { VxeUI, setConfig, setIcon } from '@vxe-ui/core';
 import { dynamicApp } from '../dynamics';
 import { warnLog } from './src/log';
-export const version = "4.6.46";
+export const version = "4.6.48";
 VxeUI.uiVersion = version;
 VxeUI.dynamicApp = dynamicApp;
 export function config(options) {
@@ -372,7 +372,9 @@ setConfig({
         dragToUpload: true,
         // imageConfig: {},
         showLimitSize: true,
-        showLimitCount: true
+        showLimitCount: true,
+        autoSubmit: true,
+        maxSimultaneousUploads: 5
     },
     watermark: {
         rotate: -30,
@@ -475,6 +477,7 @@ setIcon({
     UPLOAD_FILE_ADD: iconPrefix + 'upload',
     UPLOAD_FILE_REMOVE: iconPrefix + 'delete',
     UPLOAD_FILE_DOWNLOAD: iconPrefix + 'download',
+    UPLOAD_IMAGE_UPLOAD: iconPrefix + 'upload',
     UPLOAD_IMAGE_RE_UPLOAD: iconPrefix + 'repeat',
     UPLOAD_IMAGE_ADD: iconPrefix + 'add',
     UPLOAD_IMAGE_REMOVE: iconPrefix + 'close',

package/es/ui/src/log.js

@@ -1,4 +1,4 @@
 import { log } from '@vxe-ui/core';
-const version = `ui v${"4.6.46"}`;
+const version = `ui v${"4.6.48"}`;
 export const warnLog = log.create('warn', version);
 export const errLog = log.create('error', version);

package/es/upload/src/upload.js

@@ -24,6 +24,10 @@ export default defineVxeComponent({
             type: Boolean,
             default: null
         },
+        autoSubmit: {
+            type: Boolean,
+            default: () => getConfig().upload.autoSubmit
+        },
         mode: {
             type: String,
             default: () => getConfig().upload.mode
@@ -113,6 +117,7 @@ export default defineVxeComponent({
             type: [String, Number, Function],
             default: () => getConfig().upload.progressText
         },
+        showSubmitButton: Boolean,
         autoHiddenButton: {
             type: Boolean,
             default: () => getConfig().upload.autoHiddenButton
@@ -153,6 +158,10 @@ export default defineVxeComponent({
             type: Boolean,
             default: () => null
         },
+        maxSimultaneousUploads: {
+            type: Number,
+            default: () => getConfig().upload.maxSimultaneousUploads
+        },
         tipText: [String, Number, Function],
         hintText: String,
         previewMethod: Function,
@@ -525,6 +534,7 @@ export default defineVxeComponent({
                     const cacheItem = fileCacheMaps[fileKey];
                     if (cacheItem) {
                         cacheItem.percent = 100;
+                        cacheItem.status = 'success';
                     }
                     Object.assign(item, res);
                     dispatchEvent('upload-success', { option: item, data: res }, null);
@@ -567,7 +577,7 @@ export default defineVxeComponent({
             if (uploadFn && cacheItem) {
                 const file = cacheItem.file;
                 cacheItem.loading = true;
-                cacheItem.status = '';
+                cacheItem.status = 'pending';
                 cacheItem.percent = 0;
                 handleUploadResult(item, file).then(() => {
                     if (urlMode) {
@@ -576,8 +586,8 @@ export default defineVxeComponent({
                 });
             }
         };
-        const uploadFile = (files, evnt) => {
-            const { multiple, urlMode, showLimitSize, limitSizeText, showLimitCount, limitCountText } = props;
+        const handleUploadFile = (files, evnt) => {
+            const { multiple, urlMode, showLimitSize, limitSizeText, showLimitCount, limitCountText, autoSubmit } = props;
             const { fileList } = reactData;
             const uploadFn = props.uploadMethod || getConfig().upload.uploadMethod;
             const keyField = computeKeyField.value;
@@ -670,13 +680,13 @@ export default defineVxeComponent({
                 if (uploadFn) {
                     cacheMaps[fileKey] = {
                         file: file,
-                        loading: true,
-                        status: '',
+                        loading: !!autoSubmit,
+                        status: 'pending',
                         percent: 0
                     };
                 }
                 const item = reactive(fileObj);
-                if (uploadFn) {
+                if (uploadFn && autoSubmit) {
                     uploadPromiseRests.push(handleUploadResult(item, file));
                 }
                 newFileList.push(item);
@@ -707,7 +717,7 @@ export default defineVxeComponent({
                 multiple,
                 types: isImage ? imageTypes : fileTypes
             }).then((params) => {
-                uploadFile(params.files, evnt);
+                handleUploadFile(params.files, evnt);
                 return params;
             });
         };
@@ -848,7 +858,7 @@ export default defineVxeComponent({
                 }
                 return;
             }
-            uploadFile(files, evnt);
+            handleUploadFile(files, evnt);
         };
         const handleUploadDropEvent = (evnt) => {
             const dataTransfer = evnt.dataTransfer;
@@ -1102,12 +1112,46 @@ export default defineVxeComponent({
             dispatchEvent,
             choose() {
                 return handleChoose(null);
+            },
+            submit(isFull) {
+                const { maxSimultaneousUploads } = props;
+                const msNum = XEUtils.toNumber(maxSimultaneousUploads || 1) || 1;
+                const { fileList, fileCacheMaps } = reactData;
+                const allPendingList = fileList.filter(item => {
+                    const fileKey = getFieldKey(item);
+                    const cacheItem = fileCacheMaps[fileKey];
+                    return cacheItem && (cacheItem.status === 'pending' || (isFull && cacheItem.status === 'error'));
+                });
+                const handleSubmit = (item) => {
+                    const fileKey = getFieldKey(item);
+                    const cacheItem = fileCacheMaps[fileKey];
+                    if (cacheItem) {
+                        const file = cacheItem.file;
+                        if (file && (cacheItem.status === 'pending' || (isFull && cacheItem.status === 'error'))) {
+                            cacheItem.loading = true;
+                            cacheItem.percent = 0;
+                            return handleUploadResult(item, file).then(handleNextSubmit);
+                        }
+                    }
+                    return handleNextSubmit();
+                };
+                const handleNextSubmit = () => {
+                    if (allPendingList.length) {
+                        const item = allPendingList[0];
+                        allPendingList.splice(0, 1);
+                        return handleSubmit(item).then(handleNextSubmit);
+                    }
+                    return Promise.resolve();
+                };
+                return Promise.all(allPendingList.splice(0, msNum).map(handleSubmit)).then(() => {
+                    // 完成
+                });
             }
         };
         const uploadPrivateMethods = {};
         Object.assign($xeUpload, uploadMethods, uploadPrivateMethods);
         const renderFileItemList = (currList, isMoreView) => {
-            const { showRemoveButton, showDownloadButton, showProgress, progressText, showPreview, showErrorStatus, dragSort } = props;
+            const { showRemoveButton, showDownloadButton, showProgress, progressText, showPreview, showErrorStatus, dragSort, autoSubmit, showSubmitButton } = props;
             const { fileCacheMaps } = reactData;
             const isDisabled = computeIsDisabled.value;
             const formReadonly = computeFormReadonly.value;
@@ -1123,11 +1167,19 @@ export default defineVxeComponent({
             return currList.map((item, index) => {
                 const fileKey = getFieldKey(item);
                 const cacheItem = fileCacheMaps[fileKey];
-                const isLoading = cacheItem && cacheItem.loading;
-                const isError = cacheItem && cacheItem.status === 'error';
+                let isLoading = false;
+                let isError = false;
+                let isPending = false;
+                const fileName = `${item[nameProp] || ''}`;
+                if (cacheItem) {
+                    isLoading = cacheItem.loading;
+                    isError = cacheItem.status === 'error';
+                    isPending = cacheItem.status === 'pending';
+                }
                 return h('div', Object.assign({ key: dragSort ? fileKey : index, class: ['vxe-upload--file-item', {
                             'is--preview': showPreview,
                             'is--loading': isLoading,
+                            'is--pending': isPending,
                             'is--error': isError
                         }], fileid: fileKey, draggable: dragSort ? true : null }, ons), [
                     h('div', {
@@ -1139,12 +1191,13 @@ export default defineVxeComponent({
                     ]),
                     h('div', {
                         class: 'vxe-upload--file-item-name',
+                        title: fileName,
                         onClick(evnt) {
                             if (!isLoading && !isError) {
                                 handlePreviewFileEvent(evnt, item);
                             }
                         }
-                    }, `${item[nameProp] || ''}`),
+                    }, fileName),
                     isLoading
                         ? h('div', {
                             class: 'vxe-upload--file-item-loading-icon'
@@ -1159,15 +1212,15 @@ export default defineVxeComponent({
                             class: 'vxe-upload--file-item-loading-text'
                         }, progressText ? XEUtils.toFormatString(`${XEUtils.isFunction(progressText) ? progressText({}) : progressText}`, { percent: cacheItem.percent }) : getI18n('vxe.upload.uploadProgress', [cacheItem.percent]))
                         : renderEmptyElement($xeUpload),
-                    showErrorStatus && isError
+                    !isLoading && ((isError && showErrorStatus) || (isPending && showSubmitButton && !autoSubmit))
                         ? h('div', {
-                            class: 'vxe-upload--image-item-error'
+                            class: 'vxe-upload--file-item-rebtn'
                         }, [
                             h(VxeButtonComponent, {
-                                icon: getIcon().UPLOAD_IMAGE_RE_UPLOAD,
+                                icon: isError ? getIcon().UPLOAD_IMAGE_RE_UPLOAD : getIcon().UPLOAD_IMAGE_UPLOAD,
                                 mode: 'text',
                                 status: 'primary',
-                                content: getI18n('vxe.upload.reUpload'),
+                                content: isError ? getI18n('vxe.upload.reUpload') : getI18n('vxe.upload.manualUpload'),
                                 onClick() {
                                     handleReUpload(item);
                                 }
@@ -1182,7 +1235,7 @@ export default defineVxeComponent({
                                 class: 'vxe-upload--file-item-corner'
                             }, getSlotVNs(cornerSlot({ option: item, isMoreView, readonly: formReadonly })))
                             : renderEmptyElement($xeUpload),
-                        showDownloadButton && !isLoading
+                        showDownloadButton && !(isLoading || isPending)
                             ? h('div', {
                                 class: 'vxe-upload--file-item-download-btn',
                                 onClick(evnt) {
@@ -1309,7 +1362,7 @@ export default defineVxeComponent({
                 ]);
         };
         const renderImageItemList = (currList, isMoreView) => {
-            const { showRemoveButton, showProgress, progressText, showPreview, showErrorStatus, dragSort } = props;
+            const { showRemoveButton, showProgress, progressText, showPreview, showErrorStatus, dragSort, autoSubmit, showSubmitButton } = props;
             const { fileCacheMaps } = reactData;
             const isDisabled = computeIsDisabled.value;
             const formReadonly = computeFormReadonly.value;
@@ -1327,18 +1380,24 @@ export default defineVxeComponent({
             return currList.map((item, index) => {
                 const fileKey = getFieldKey(item);
                 const cacheItem = fileCacheMaps[fileKey];
-                const isLoading = cacheItem && cacheItem.loading;
-                const isError = cacheItem && cacheItem.status === 'error';
+                let isLoading = false;
+                let isError = false;
+                let isPending = false;
+                if (cacheItem) {
+                    isLoading = cacheItem.loading;
+                    isError = cacheItem.status === 'error';
+                    isPending = cacheItem.status === 'pending';
+                }
                 return h('div', Object.assign({ key: dragSort ? fileKey : index, class: ['vxe-upload--image-item', {
                             'is--preview': showPreview,
                             'is--circle': imageOpts.circle,
                             'is--loading': isLoading,
+                            'is--pending': isPending,
                             'is--error': isError
                         }], fileid: fileKey, draggable: dragSort ? true : null }, ons), [
                     h('div', {
                         class: 'vxe-upload--image-item-box',
                         style: isMoreView ? null : imgStyle,
-                        title: getI18n('vxe.upload.viewItemTitle'),
                         onClick(evnt) {
                             if (!isLoading && !isError) {
                                 handlePreviewImageEvent(evnt, item, index);
@@ -1363,29 +1422,29 @@ export default defineVxeComponent({
                                     : renderEmptyElement($xeUpload)
                             ])
                             : renderEmptyElement($xeUpload),
-                        !isLoading
-                            ? (isError && showErrorStatus
-                                ? h('div', {
-                                    class: 'vxe-upload--image-item-error'
-                                }, [
-                                    h(VxeButtonComponent, {
-                                        icon: getIcon().UPLOAD_IMAGE_RE_UPLOAD,
-                                        mode: 'text',
-                                        status: 'primary',
-                                        content: getI18n('vxe.upload.reUpload'),
-                                        onClick() {
-                                            handleReUpload(item);
-                                        }
-                                    })
-                                ])
-                                : h('div', {
-                                    class: 'vxe-upload--image-item-img-wrapper'
-                                }, [
-                                    h('img', {
-                                        class: 'vxe-upload--image-item-img',
-                                        src: getThumbnailFileUrl(item)
-                                    })
-                                ]))
+                        h('div', {
+                            class: 'vxe-upload--image-item-img-wrapper',
+                            title: getI18n('vxe.upload.viewItemTitle')
+                        }, [
+                            h('img', {
+                                class: 'vxe-upload--image-item-img',
+                                src: getThumbnailFileUrl(item)
+                            })
+                        ]),
+                        !isLoading && ((isError && showErrorStatus) || (isPending && showSubmitButton && !autoSubmit))
+                            ? h('div', {
+                                class: 'vxe-upload--image-item-rebtn'
+                            }, [
+                                h(VxeButtonComponent, {
+                                    icon: isError ? getIcon().UPLOAD_IMAGE_RE_UPLOAD : getIcon().UPLOAD_IMAGE_UPLOAD,
+                                    mode: 'text',
+                                    status: 'primary',
+                                    content: isError ? getI18n('vxe.upload.reUpload') : getI18n('vxe.upload.manualUpload'),
+                                    onClick() {
+                                        handleReUpload(item);
+                                    }
+                                })
+                            ])
                             : renderEmptyElement($xeUpload),
                         h('div', {
                             class: 'vxe-upload--image-item-btn-wrapper',

package/es/upload/style.css

@@ -80,18 +80,24 @@
 .vxe-upload--file-item:hover {
   background-color: var(--vxe-ui-base-hover-background-color);
 }
-.vxe-upload--file-item:hover:not(.is--loading) .vxe-upload--file-item-name {
+.vxe-upload--file-item:hover .vxe-upload--file-item-name {
   color: var(--vxe-ui-font-primary-color);
 }
 .vxe-upload--file-item:last-child {
   margin-bottom: 0;
 }
+.vxe-upload--file-item.is--preview .vxe-upload--file-item-name {
+  cursor: pointer;
+}
 .vxe-upload--file-item.is--loading {
   cursor: progress;
   color: var(--vxe-ui-input-placeholder-color);
 }
-.vxe-upload--file-item.is--preview .vxe-upload--file-item-name {
-  cursor: pointer;
+.vxe-upload--file-item.is--loading:hover .vxe-upload--file-item-name {
+  color: var(--vxe-ui-input-placeholder-color);
+}
+.vxe-upload--file-item.is--pending {
+  color: var(--vxe-ui-input-placeholder-color);
 }
 
 .vxe-upload--file-over-more {
@@ -122,7 +128,7 @@
   color: var(--vxe-ui-input-placeholder-color);
 }
 
-.vxe-upload--file-item-error {
+.vxe-upload--file-item-rebtn {
   padding-right: 0.4em;
   color: var(--vxe-ui-status-error-color);
   text-decoration: none;
@@ -251,10 +257,10 @@
   border-color: var(--vxe-ui-input-border-color);
 }
 
-.vxe-upload--image-item:hover:not(.is--loading) .vxe-upload--image-item-img-wrapper {
-  border-color: var(--vxe-ui-font-primary-color);
+.vxe-upload--image-item.is--loading .vxe-upload--image-item-box {
+  cursor: progress;
 }
-.vxe-upload--image-item:hover:not(.is--loading) .vxe-upload--image-item-img-wrapper::after {
+.vxe-upload--image-item:hover .vxe-upload--image-item-img-wrapper::after, .vxe-upload--image-item.is--error .vxe-upload--image-item-img-wrapper::after, .vxe-upload--image-item.is--pending .vxe-upload--image-item-img-wrapper::after {
   content: "";
   position: absolute;
   top: 0;
@@ -262,10 +268,15 @@
   width: 100%;
   height: 100%;
   pointer-events: none;
+}
+.vxe-upload--image-item:hover .vxe-upload--image-item-img-wrapper::after {
   background-color: rgba(0, 0, 0, 0.1);
 }
-.vxe-upload--image-item.is--loading .vxe-upload--image-item-box {
-  cursor: progress;
+.vxe-upload--image-item.is--error .vxe-upload--image-item-img-wrapper::after, .vxe-upload--image-item.is--pending .vxe-upload--image-item-img-wrapper::after {
+  background-color: rgba(0, 0, 0, 0.4);
+}
+.vxe-upload--image-item.is--error:hover .vxe-upload--image-item-img-wrapper::after, .vxe-upload--image-item.is--pending:hover .vxe-upload--image-item-img-wrapper::after {
+  background-color: rgba(0, 0, 0, 0.5);
 }
 .vxe-upload--image-item.is--error .vxe-upload--image-item-img-wrapper {
   border-color: var(--vxe-ui-status-error-color);
@@ -280,6 +291,10 @@
 .vxe-upload--image-item.is--circle .vxe-upload--image-item-img-wrapper::after {
   border-radius: 50%;
 }
+.vxe-upload--image-item.is--circle .vxe-upload--image-item-loading,
+.vxe-upload--image-item.is--circle .vxe-upload--image-item-rebtn {
+  border-radius: 50%;
+}
 
 .vxe-upload--image-item-img-wrapper {
   display: flex;
@@ -308,13 +323,26 @@
   width: 100%;
   height: 100%;
   color: var(--vxe-ui-loading-color);
-  background-color: var(--vxe-ui-loading-background-color);
+  background-color: rgba(0, 0, 0, 0.6);
   z-index: 1;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
 }
 
+.vxe-upload--image-item-rebtn {
+  position: absolute;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+
 .vxe-upload--image-action-hint {
   font-size: 0.8em;
   word-break: break-all;
@@ -406,6 +434,13 @@
 .vxe-upload--more-popup .vxe-upload--file-list {
   max-height: none;
 }
+.vxe-upload--more-popup .vxe-upload--file-action-btn {
+  width: 100%;
+}
+.vxe-upload--more-popup .vxe-upload--file-action-btn > .vxe-button {
+  width: 100%;
+  max-width: 100%;
+}
 
 .vxe-upload,
 .vxe-upload--more-popup {

package/es/upload/style.min.css

@@ -1 +1 @@
-@charset "UTF-8";.vxe-upload{position:relative;color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family)}.vxe-upload.show--error .vxe-upload--file-item.is--error{color:var(--vxe-ui-status-error-color)}.vxe-upload.show--error .vxe-upload--file-item.is--error:hover .vxe-upload--file-item-name{color:var(--vxe-ui-status-error-color)}.vxe-upload.show--error .vxe-upload--file-item.is--error .vxe-upload--file-item-name{text-decoration:line-through}.vxe-upload--more-popup.is--active .vxe-upload--image-action-box,.vxe-upload.is--active .vxe-upload--image-action-box{border-color:var(--vxe-ui-font-primary-color)}.vxe-upload--more-popup.is--active .vxe-upload--file-action-btn>.vxe-button,.vxe-upload.is--active .vxe-upload--file-action-btn>.vxe-button{border-color:var(--vxe-ui-font-primary-color);border-style:var(--vxe-ui-upload-file-button-border-style)}.vxe-upload--more-popup.is--disabled .vxe-upload--file-action-btn,.vxe-upload--more-popup.is--disabled .vxe-upload--image-action-box,.vxe-upload.is--disabled .vxe-upload--file-action-btn,.vxe-upload.is--disabled .vxe-upload--image-action-box{cursor:no-drop}.vxe-upload--drag-placeholder{display:flex;flex-direction:row;align-items:center;justify-content:center;position:absolute;top:0;left:0;width:100%;height:100%;font-weight:700;font-weight:var(--vxe-ui-font-darken-color);font-size:1.2em;border-radius:var(--vxe-ui-base-border-radius);background-color:var(--vxe-ui-upload-drag-over-background-color);border:1px dotted var(--vxe-ui-font-lighten-color);z-index:9}.vxe-upload--file-list-wrapper.is--horizontal{display:flex;flex-direction:row}.vxe-upload--file-list-wrapper.is--horizontal>.vxe-upload--file-list{flex-grow:1;display:flex;flex-direction:column;justify-content:center}.vxe-upload--file-list-wrapper.is--horizontal>.vxe-upload--file-action{flex-shrink:0}.vxe-upload--file-list{max-height:294px;overflow:auto;outline:0}.vxe-upload--file-item{position:relative;display:flex;flex-direction:row;align-items:center;line-height:1.5em;padding:var(--vxe-ui-layout-padding-half)}.vxe-upload--file-item:hover{background-color:var(--vxe-ui-base-hover-background-color)}.vxe-upload--file-item:hover:not(.is--loading) .vxe-upload--file-item-name{color:var(--vxe-ui-font-primary-color)}.vxe-upload--file-item:last-child{margin-bottom:0}.vxe-upload--file-item.is--loading{cursor:progress;color:var(--vxe-ui-input-placeholder-color)}.vxe-upload--file-item.is--preview .vxe-upload--file-item-name{cursor:pointer}.vxe-upload--file-over-more{display:flex;align-items:center;justify-content:center;flex-shrink:0}.vxe-upload--file-over-more .vxe-button{padding-top:0;padding-bottom:0}.vxe-upload--file-action-btn{display:inline-block}.vxe-upload--file-action-btn>.vxe-button{border-style:var(--vxe-ui-upload-file-button-border-style)}.vxe-upload--file-action-button:hover{border-color:var(--vxe-ui-font-primary-color)}.vxe-upload--file-action-tip{font-size:.9em;padding:var(--vxe-ui-layout-padding-half);color:var(--vxe-ui-input-placeholder-color)}.vxe-upload--file-item-error{padding-right:.4em;color:var(--vxe-ui-status-error-color);text-decoration:none;cursor:help}.vxe-upload--file-item-icon{flex-shrink:0;padding-right:.2em}.vxe-upload--file-item-name{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 .2em}.vxe-upload--file-item-btn-wrapper{display:inline-flex;flex-direction:row;justify-content:center}.vxe-upload--file-item-loading-icon{padding-right:.2em}.vxe-upload--file-item-loading-icon,.vxe-upload--file-item-loading-text{color:var(--vxe-ui-loading-color);flex-shrink:0}.vxe-upload--file-item-corner,.vxe-upload--file-item-download-btn,.vxe-upload--file-item-remove-btn{flex-shrink:0}.vxe-upload--file-item-download-btn,.vxe-upload--file-item-remove-btn{padding-left:.5em;cursor:pointer}.vxe-upload--file-item-download-btn{color:var(--vxe-ui-font-primary-color)}.vxe-upload--file-item-download-btn:hover{color:var(--vxe-ui-font-primary-lighten-color)}.vxe-upload--file-item-remove-btn{color:var(--vxe-ui-status-error-color)}.vxe-upload--file-item-remove-btn:hover{color:var(--vxe-ui-status-error-lighten-color)}.vxe-upload--image-list,.vxe-upload--image-more-list{display:flex;flex-direction:row;flex-wrap:wrap}.vxe-upload--image-action,.vxe-upload--image-item,.vxe-upload--image-over-more{flex-shrink:0;text-align:center;padding:var(--vxe-ui-layout-padding-half)}.vxe-upload--image-over-more{display:flex;align-items:center;justify-content:center}.vxe-upload--image-action-icon{font-size:1.2em;padding-bottom:.1em}.vxe-upload--image-action-content{font-size:.9em;padding:0 .15em .5em .15em}.vxe-upload--image-action-box,.vxe-upload--image-item-box{position:relative;border-radius:var(--vxe-ui-base-border-radius)}.vxe-upload--image-item-box{display:flex;flex-direction:row;align-items:center;justify-content:center}.vxe-upload--image-action-box{display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px var(--vxe-ui-upload-image-button-border-style) var(--vxe-ui-input-border-color);cursor:pointer}.vxe-upload--image-action-box:hover{color:var(--vxe-ui-font-primary-color);border-color:var(--vxe-ui-font-primary-color)}.vxe-upload.is--disabled .vxe-upload--file-action-btn,.vxe-upload.is--disabled .vxe-upload--image-action-box{color:var(--vxe-ui-font-disabled-color);cursor:no-drop}.vxe-upload.is--disabled .vxe-upload--image-action-box:hover{color:var(--vxe-ui-font-disabled-color);border-color:var(--vxe-ui-input-border-color)}.vxe-upload--image-item:hover:not(.is--loading) .vxe-upload--image-item-img-wrapper{border-color:var(--vxe-ui-font-primary-color)}.vxe-upload--image-item:hover:not(.is--loading) .vxe-upload--image-item-img-wrapper::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-color:rgba(0,0,0,.1)}.vxe-upload--image-item.is--loading .vxe-upload--image-item-box{cursor:progress}.vxe-upload--image-item.is--error .vxe-upload--image-item-img-wrapper{border-color:var(--vxe-ui-status-error-color)}.vxe-upload--image-item.is--preview .vxe-upload--image-item-box{cursor:pointer}.vxe-upload--image-item.is--circle .vxe-upload--image-item-img-wrapper{border-radius:50%;overflow:hidden}.vxe-upload--image-item.is--circle .vxe-upload--image-item-img-wrapper::after{border-radius:50%}.vxe-upload--image-item-img-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%;height:100%;border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-input-border-color)}.vxe-upload--image-item-img{max-width:100%;max-height:100%}.vxe-upload--image-item-loading{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;top:0;left:0;width:100%;height:100%;color:var(--vxe-ui-loading-color);background-color:var(--vxe-ui-loading-background-color);z-index:1;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-upload--image-action-hint{font-size:.8em;word-break:break-all;color:var(--vxe-ui-input-placeholder-color)}.vxe-upload--image-item-btn-wrapper{display:inline-flex;flex-direction:row;justify-content:center;position:absolute;top:calc(var(--vxe-ui-layout-padding-half) * -1);right:calc(var(--vxe-ui-layout-padding-half) * -1)}.vxe-upload--file-item-,.vxe-upload--image-item-remove-btn{flex-shrink:0}.vxe-upload--image-item-remove-btn{display:flex;flex-direction:row;justify-content:center;align-items:center;width:1.8em;height:1.8em;font-size:.8em;border-radius:50%;color:#fff;background-color:var(--vxe-ui-status-error-color);z-index:3;cursor:pointer}.vxe-upload--image-item-remove-btn:hover{background-color:var(--vxe-ui-status-error-lighten-color)}.vxe-upload--file-message-over-error .vxe-upload--file-message-over-extra{margin-top:.5em;max-height:160px;max-width:380px;overflow:auto;border:1px solid var(--vxe-ui-input-border-color);padding:var(--vxe-ui-layout-padding-half) var(--vxe-ui-layout-padding-default);outline:0}.vxe-upload--file-message-over-error .vxe-upload--file-message-over-extra-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-upload--drag-line{display:none;position:absolute;top:0;left:0;z-index:3;pointer-events:none}.vxe-upload--drag-line{width:1px;height:1px;border:2px solid transparent}.vxe-upload--drag-line[drag-pos=top]{border-top-color:var(--vxe-ui-font-primary-color)}.vxe-upload--drag-line[drag-pos=bottom]{border-bottom-color:var(--vxe-ui-font-primary-color)}.vxe-upload--drag-line[drag-pos=left]{border-left-color:var(--vxe-ui-font-primary-color)}.vxe-upload--drag-line[drag-pos=right]{border-right-color:var(--vxe-ui-font-primary-color)}.vxe-upload--drag-list-move{transition:transform .2s}.vxe-upload--more-popup{position:relative}.vxe-upload--more-popup .vxe-upload--file-list{max-height:none}.vxe-upload,.vxe-upload--more-popup{font-size:var(--vxe-ui-font-size-default)}.vxe-upload .vxe-upload--image-action-box,.vxe-upload .vxe-upload--image-item-box,.vxe-upload--more-popup .vxe-upload--image-action-box,.vxe-upload--more-popup .vxe-upload--image-item-box{width:var(--vxe-ui-upload-image-wh-default);height:var(--vxe-ui-upload-image-wh-default)}.vxe-upload--more-popup.size--medium,.vxe-upload.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-upload--more-popup.size--medium .vxe-upload--image-action-box,.vxe-upload--more-popup.size--medium .vxe-upload--image-item-box,.vxe-upload.size--medium .vxe-upload--image-action-box,.vxe-upload.size--medium .vxe-upload--image-item-box{width:var(--vxe-ui-upload-image-wh-medium);height:var(--vxe-ui-upload-image-wh-medium)}.vxe-upload--more-popup.size--small,.vxe-upload.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-upload--more-popup.size--small .vxe-upload--image-action-box,.vxe-upload--more-popup.size--small .vxe-upload--image-item-box,.vxe-upload.size--small .vxe-upload--image-action-box,.vxe-upload.size--small .vxe-upload--image-item-box{width:var(--vxe-ui-upload-image-wh-small);height:var(--vxe-ui-upload-image-wh-small)}.vxe-upload--more-popup.size--mini,.vxe-upload.size--mini{font-size:var(--vxe-ui-font-size-mini)}.vxe-upload--more-popup.size--mini .vxe-upload--image-action-box,.vxe-upload--more-popup.size--mini .vxe-upload--image-item-box,.vxe-upload.size--mini .vxe-upload--image-action-box,.vxe-upload.size--mini .vxe-upload--image-item-box{width:var(--vxe-ui-upload-image-wh-mini);height:var(--vxe-ui-upload-image-wh-mini)}.vxe-upload--image-more-list .vxe-upload--image-item-box{width:var(--vxe-ui-upload-image-wh-default);height:var(--vxe-ui-upload-image-wh-default)}
+@charset "UTF-8";.vxe-upload{position:relative;color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family)}.vxe-upload.show--error .vxe-upload--file-item.is--error{color:var(--vxe-ui-status-error-color)}.vxe-upload.show--error .vxe-upload--file-item.is--error:hover .vxe-upload--file-item-name{color:var(--vxe-ui-status-error-color)}.vxe-upload.show--error .vxe-upload--file-item.is--error .vxe-upload--file-item-name{text-decoration:line-through}.vxe-upload--more-popup.is--active .vxe-upload--image-action-box,.vxe-upload.is--active .vxe-upload--image-action-box{border-color:var(--vxe-ui-font-primary-color)}.vxe-upload--more-popup.is--active .vxe-upload--file-action-btn>.vxe-button,.vxe-upload.is--active .vxe-upload--file-action-btn>.vxe-button{border-color:var(--vxe-ui-font-primary-color);border-style:var(--vxe-ui-upload-file-button-border-style)}.vxe-upload--more-popup.is--disabled .vxe-upload--file-action-btn,.vxe-upload--more-popup.is--disabled .vxe-upload--image-action-box,.vxe-upload.is--disabled .vxe-upload--file-action-btn,.vxe-upload.is--disabled .vxe-upload--image-action-box{cursor:no-drop}.vxe-upload--drag-placeholder{display:flex;flex-direction:row;align-items:center;justify-content:center;position:absolute;top:0;left:0;width:100%;height:100%;font-weight:700;font-weight:var(--vxe-ui-font-darken-color);font-size:1.2em;border-radius:var(--vxe-ui-base-border-radius);background-color:var(--vxe-ui-upload-drag-over-background-color);border:1px dotted var(--vxe-ui-font-lighten-color);z-index:9}.vxe-upload--file-list-wrapper.is--horizontal{display:flex;flex-direction:row}.vxe-upload--file-list-wrapper.is--horizontal>.vxe-upload--file-list{flex-grow:1;display:flex;flex-direction:column;justify-content:center}.vxe-upload--file-list-wrapper.is--horizontal>.vxe-upload--file-action{flex-shrink:0}.vxe-upload--file-list{max-height:294px;overflow:auto;outline:0}.vxe-upload--file-item{position:relative;display:flex;flex-direction:row;align-items:center;line-height:1.5em;padding:var(--vxe-ui-layout-padding-half)}.vxe-upload--file-item:hover{background-color:var(--vxe-ui-base-hover-background-color)}.vxe-upload--file-item:hover .vxe-upload--file-item-name{color:var(--vxe-ui-font-primary-color)}.vxe-upload--file-item:last-child{margin-bottom:0}.vxe-upload--file-item.is--preview .vxe-upload--file-item-name{cursor:pointer}.vxe-upload--file-item.is--loading{cursor:progress;color:var(--vxe-ui-input-placeholder-color)}.vxe-upload--file-item.is--loading:hover .vxe-upload--file-item-name{color:var(--vxe-ui-input-placeholder-color)}.vxe-upload--file-item.is--pending{color:var(--vxe-ui-input-placeholder-color)}.vxe-upload--file-over-more{display:flex;align-items:center;justify-content:center;flex-shrink:0}.vxe-upload--file-over-more .vxe-button{padding-top:0;padding-bottom:0}.vxe-upload--file-action-btn{display:inline-block}.vxe-upload--file-action-btn>.vxe-button{border-style:var(--vxe-ui-upload-file-button-border-style)}.vxe-upload--file-action-button:hover{border-color:var(--vxe-ui-font-primary-color)}.vxe-upload--file-action-tip{font-size:.9em;padding:var(--vxe-ui-layout-padding-half);color:var(--vxe-ui-input-placeholder-color)}.vxe-upload--file-item-rebtn{padding-right:.4em;color:var(--vxe-ui-status-error-color);text-decoration:none;cursor:help}.vxe-upload--file-item-icon{flex-shrink:0;padding-right:.2em}.vxe-upload--file-item-name{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 .2em}.vxe-upload--file-item-btn-wrapper{display:inline-flex;flex-direction:row;justify-content:center}.vxe-upload--file-item-loading-icon{padding-right:.2em}.vxe-upload--file-item-loading-icon,.vxe-upload--file-item-loading-text{color:var(--vxe-ui-loading-color);flex-shrink:0}.vxe-upload--file-item-corner,.vxe-upload--file-item-download-btn,.vxe-upload--file-item-remove-btn{flex-shrink:0}.vxe-upload--file-item-download-btn,.vxe-upload--file-item-remove-btn{padding-left:.5em;cursor:pointer}.vxe-upload--file-item-download-btn{color:var(--vxe-ui-font-primary-color)}.vxe-upload--file-item-download-btn:hover{color:var(--vxe-ui-font-primary-lighten-color)}.vxe-upload--file-item-remove-btn{color:var(--vxe-ui-status-error-color)}.vxe-upload--file-item-remove-btn:hover{color:var(--vxe-ui-status-error-lighten-color)}.vxe-upload--image-list,.vxe-upload--image-more-list{display:flex;flex-direction:row;flex-wrap:wrap}.vxe-upload--image-action,.vxe-upload--image-item,.vxe-upload--image-over-more{flex-shrink:0;text-align:center;padding:var(--vxe-ui-layout-padding-half)}.vxe-upload--image-over-more{display:flex;align-items:center;justify-content:center}.vxe-upload--image-action-icon{font-size:1.2em;padding-bottom:.1em}.vxe-upload--image-action-content{font-size:.9em;padding:0 .15em .5em .15em}.vxe-upload--image-action-box,.vxe-upload--image-item-box{position:relative;border-radius:var(--vxe-ui-base-border-radius)}.vxe-upload--image-item-box{display:flex;flex-direction:row;align-items:center;justify-content:center}.vxe-upload--image-action-box{display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px var(--vxe-ui-upload-image-button-border-style) var(--vxe-ui-input-border-color);cursor:pointer}.vxe-upload--image-action-box:hover{color:var(--vxe-ui-font-primary-color);border-color:var(--vxe-ui-font-primary-color)}.vxe-upload.is--disabled .vxe-upload--file-action-btn,.vxe-upload.is--disabled .vxe-upload--image-action-box{color:var(--vxe-ui-font-disabled-color);cursor:no-drop}.vxe-upload.is--disabled .vxe-upload--image-action-box:hover{color:var(--vxe-ui-font-disabled-color);border-color:var(--vxe-ui-input-border-color)}.vxe-upload--image-item.is--loading .vxe-upload--image-item-box{cursor:progress}.vxe-upload--image-item.is--error .vxe-upload--image-item-img-wrapper::after,.vxe-upload--image-item.is--pending .vxe-upload--image-item-img-wrapper::after,.vxe-upload--image-item:hover .vxe-upload--image-item-img-wrapper::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.vxe-upload--image-item:hover .vxe-upload--image-item-img-wrapper::after{background-color:rgba(0,0,0,.1)}.vxe-upload--image-item.is--error .vxe-upload--image-item-img-wrapper::after,.vxe-upload--image-item.is--pending .vxe-upload--image-item-img-wrapper::after{background-color:rgba(0,0,0,.4)}.vxe-upload--image-item.is--error:hover .vxe-upload--image-item-img-wrapper::after,.vxe-upload--image-item.is--pending:hover .vxe-upload--image-item-img-wrapper::after{background-color:rgba(0,0,0,.5)}.vxe-upload--image-item.is--error .vxe-upload--image-item-img-wrapper{border-color:var(--vxe-ui-status-error-color)}.vxe-upload--image-item.is--preview .vxe-upload--image-item-box{cursor:pointer}.vxe-upload--image-item.is--circle .vxe-upload--image-item-img-wrapper{border-radius:50%;overflow:hidden}.vxe-upload--image-item.is--circle .vxe-upload--image-item-img-wrapper::after{border-radius:50%}.vxe-upload--image-item.is--circle .vxe-upload--image-item-loading,.vxe-upload--image-item.is--circle .vxe-upload--image-item-rebtn{border-radius:50%}.vxe-upload--image-item-img-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%;height:100%;border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-input-border-color)}.vxe-upload--image-item-img{max-width:100%;max-height:100%}.vxe-upload--image-item-loading{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;top:0;left:0;width:100%;height:100%;color:var(--vxe-ui-loading-color);background-color:rgba(0,0,0,.6);z-index:1;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-upload--image-item-rebtn{position:absolute;display:flex;flex-direction:row;justify-content:center;align-items:center;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.6)}.vxe-upload--image-action-hint{font-size:.8em;word-break:break-all;color:var(--vxe-ui-input-placeholder-color)}.vxe-upload--image-item-btn-wrapper{display:inline-flex;flex-direction:row;justify-content:center;position:absolute;top:calc(var(--vxe-ui-layout-padding-half) * -1);right:calc(var(--vxe-ui-layout-padding-half) * -1)}.vxe-upload--file-item-,.vxe-upload--image-item-remove-btn{flex-shrink:0}.vxe-upload--image-item-remove-btn{display:flex;flex-direction:row;justify-content:center;align-items:center;width:1.8em;height:1.8em;font-size:.8em;border-radius:50%;color:#fff;background-color:var(--vxe-ui-status-error-color);z-index:3;cursor:pointer}.vxe-upload--image-item-remove-btn:hover{background-color:var(--vxe-ui-status-error-lighten-color)}.vxe-upload--file-message-over-error .vxe-upload--file-message-over-extra{margin-top:.5em;max-height:160px;max-width:380px;overflow:auto;border:1px solid var(--vxe-ui-input-border-color);padding:var(--vxe-ui-layout-padding-half) var(--vxe-ui-layout-padding-default);outline:0}.vxe-upload--file-message-over-error .vxe-upload--file-message-over-extra-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-upload--drag-line{display:none;position:absolute;top:0;left:0;z-index:3;pointer-events:none}.vxe-upload--drag-line{width:1px;height:1px;border:2px solid transparent}.vxe-upload--drag-line[drag-pos=top]{border-top-color:var(--vxe-ui-font-primary-color)}.vxe-upload--drag-line[drag-pos=bottom]{border-bottom-color:var(--vxe-ui-font-primary-color)}.vxe-upload--drag-line[drag-pos=left]{border-left-color:var(--vxe-ui-font-primary-color)}.vxe-upload--drag-line[drag-pos=right]{border-right-color:var(--vxe-ui-font-primary-color)}.vxe-upload--drag-list-move{transition:transform .2s}.vxe-upload--more-popup{position:relative}.vxe-upload--more-popup .vxe-upload--file-list{max-height:none}.vxe-upload--more-popup .vxe-upload--file-action-btn{width:100%}.vxe-upload--more-popup .vxe-upload--file-action-btn>.vxe-button{width:100%;max-width:100%}.vxe-upload,.vxe-upload--more-popup{font-size:var(--vxe-ui-font-size-default)}.vxe-upload .vxe-upload--image-action-box,.vxe-upload .vxe-upload--image-item-box,.vxe-upload--more-popup .vxe-upload--image-action-box,.vxe-upload--more-popup .vxe-upload--image-item-box{width:var(--vxe-ui-upload-image-wh-default);height:var(--vxe-ui-upload-image-wh-default)}.vxe-upload--more-popup.size--medium,.vxe-upload.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-upload--more-popup.size--medium .vxe-upload--image-action-box,.vxe-upload--more-popup.size--medium .vxe-upload--image-item-box,.vxe-upload.size--medium .vxe-upload--image-action-box,.vxe-upload.size--medium .vxe-upload--image-item-box{width:var(--vxe-ui-upload-image-wh-medium);height:var(--vxe-ui-upload-image-wh-medium)}.vxe-upload--more-popup.size--small,.vxe-upload.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-upload--more-popup.size--small .vxe-upload--image-action-box,.vxe-upload--more-popup.size--small .vxe-upload--image-item-box,.vxe-upload.size--small .vxe-upload--image-action-box,.vxe-upload.size--small .vxe-upload--image-item-box{width:var(--vxe-ui-upload-image-wh-small);height:var(--vxe-ui-upload-image-wh-small)}.vxe-upload--more-popup.size--mini,.vxe-upload.size--mini{font-size:var(--vxe-ui-font-size-mini)}.vxe-upload--more-popup.size--mini .vxe-upload--image-action-box,.vxe-upload--more-popup.size--mini .vxe-upload--image-item-box,.vxe-upload.size--mini .vxe-upload--image-action-box,.vxe-upload.size--mini .vxe-upload--image-item-box{width:var(--vxe-ui-upload-image-wh-mini);height:var(--vxe-ui-upload-image-wh-mini)}.vxe-upload--image-more-list .vxe-upload--image-item-box{width:var(--vxe-ui-upload-image-wh-default);height:var(--vxe-ui-upload-image-wh-default)}

package/es/vxe-upload/style.css

@@ -80,18 +80,24 @@
 .vxe-upload--file-item:hover {
   background-color: var(--vxe-ui-base-hover-background-color);
 }
-.vxe-upload--file-item:hover:not(.is--loading) .vxe-upload--file-item-name {
+.vxe-upload--file-item:hover .vxe-upload--file-item-name {
   color: var(--vxe-ui-font-primary-color);
 }
 .vxe-upload--file-item:last-child {
   margin-bottom: 0;
 }
+.vxe-upload--file-item.is--preview .vxe-upload--file-item-name {
+  cursor: pointer;
+}
 .vxe-upload--file-item.is--loading {
   cursor: progress;
   color: var(--vxe-ui-input-placeholder-color);
 }
-.vxe-upload--file-item.is--preview .vxe-upload--file-item-name {
-  cursor: pointer;
+.vxe-upload--file-item.is--loading:hover .vxe-upload--file-item-name {
+  color: var(--vxe-ui-input-placeholder-color);
+}
+.vxe-upload--file-item.is--pending {
+  color: var(--vxe-ui-input-placeholder-color);
 }
 
 .vxe-upload--file-over-more {
@@ -122,7 +128,7 @@
   color: var(--vxe-ui-input-placeholder-color);
 }
 
-.vxe-upload--file-item-error {
+.vxe-upload--file-item-rebtn {
   padding-right: 0.4em;
   color: var(--vxe-ui-status-error-color);
   text-decoration: none;
@@ -251,10 +257,10 @@
   border-color: var(--vxe-ui-input-border-color);
 }
 
-.vxe-upload--image-item:hover:not(.is--loading) .vxe-upload--image-item-img-wrapper {
-  border-color: var(--vxe-ui-font-primary-color);
+.vxe-upload--image-item.is--loading .vxe-upload--image-item-box {
+  cursor: progress;
 }
-.vxe-upload--image-item:hover:not(.is--loading) .vxe-upload--image-item-img-wrapper::after {
+.vxe-upload--image-item:hover .vxe-upload--image-item-img-wrapper::after, .vxe-upload--image-item.is--error .vxe-upload--image-item-img-wrapper::after, .vxe-upload--image-item.is--pending .vxe-upload--image-item-img-wrapper::after {
   content: "";
   position: absolute;
   top: 0;
@@ -262,10 +268,15 @@
   width: 100%;
   height: 100%;
   pointer-events: none;
+}
+.vxe-upload--image-item:hover .vxe-upload--image-item-img-wrapper::after {
   background-color: rgba(0, 0, 0, 0.1);
 }
-.vxe-upload--image-item.is--loading .vxe-upload--image-item-box {
-  cursor: progress;
+.vxe-upload--image-item.is--error .vxe-upload--image-item-img-wrapper::after, .vxe-upload--image-item.is--pending .vxe-upload--image-item-img-wrapper::after {
+  background-color: rgba(0, 0, 0, 0.4);
+}
+.vxe-upload--image-item.is--error:hover .vxe-upload--image-item-img-wrapper::after, .vxe-upload--image-item.is--pending:hover .vxe-upload--image-item-img-wrapper::after {
+  background-color: rgba(0, 0, 0, 0.5);
 }
 .vxe-upload--image-item.is--error .vxe-upload--image-item-img-wrapper {
   border-color: var(--vxe-ui-status-error-color);
@@ -280,6 +291,10 @@
 .vxe-upload--image-item.is--circle .vxe-upload--image-item-img-wrapper::after {
   border-radius: 50%;
 }
+.vxe-upload--image-item.is--circle .vxe-upload--image-item-loading,
+.vxe-upload--image-item.is--circle .vxe-upload--image-item-rebtn {
+  border-radius: 50%;
+}
 
 .vxe-upload--image-item-img-wrapper {
   display: flex;
@@ -308,13 +323,26 @@
   width: 100%;
   height: 100%;
   color: var(--vxe-ui-loading-color);
-  background-color: var(--vxe-ui-loading-background-color);
+  background-color: rgba(0, 0, 0, 0.6);
   z-index: 1;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
 }
 
+.vxe-upload--image-item-rebtn {
+  position: absolute;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+
 .vxe-upload--image-action-hint {
   font-size: 0.8em;
   word-break: break-all;
@@ -406,6 +434,13 @@
 .vxe-upload--more-popup .vxe-upload--file-list {
   max-height: none;
 }
+.vxe-upload--more-popup .vxe-upload--file-action-btn {
+  width: 100%;
+}
+.vxe-upload--more-popup .vxe-upload--file-action-btn > .vxe-button {
+  width: 100%;
+  max-width: 100%;
+}
 
 .vxe-upload,
 .vxe-upload--more-popup {