vxe-pc-ui 3.3.36 → 3.3.38

package/es/ui/index.js

@@ -2,7 +2,7 @@ import { VxeUI, setConfig, setIcon } from '@vxe-ui/core';
 import { dynamicApp } from '../dynamics';
 import { getFuncText } from './src/utils';
 import { warnLog } from './src/log';
-export const version = "3.3.36";
+export const version = "3.3.38";
 VxeUI.version = version;
 VxeUI.uiVersion = version;
 VxeUI.tableVersion = '';

package/es/ui/src/dom.js

@@ -1,5 +1,6 @@
 import XEUtils from 'xe-utils';
 export const browse = XEUtils.browse();
+export const tpImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
 const reClsMap = {};
 function getClsRE(cls) {
     if (!reClsMap[cls]) {

package/es/ui/src/log.js

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

package/es/upload/src/upload.js

@@ -2,8 +2,8 @@ import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
 import { VxeUI, getConfig, getI18n, getIcon, globalMixins, createEvent, globalEvents, renderEmptyElement } from '../../ui';
 import { getSlotVNs } from '../..//ui/src/vn';
-import { errLog } from '../../ui/src/log';
-import { getEventTargetNode, toCssUnit } from '../../ui/src/dom';
+import { errLog, warnLog } from '../../ui/src/log';
+import { tpImg, getEventTargetNode, toCssUnit } from '../../ui/src/dom';
 import { readLocalFile } from './util';
 import VxeButtonComponent from '../../button/src/button';
 function getUniqueKey() {
@@ -19,6 +19,41 @@ function handleTransferFiles(items) {
     });
     return files;
 }
+function showDropTip($xeUpload, evnt, dragEl, dragPos) {
+    const { xID } = $xeUpload;
+    const reactData = $xeUpload.reactData;
+    const { showMorePopup } = reactData;
+    const el = $xeUpload.$refs.refElem;
+    const popupEl = document.getElementById(`refPopupElem${xID}`);
+    const wrapperEl = showMorePopup ? popupEl : el;
+    if (!wrapperEl) {
+        return;
+    }
+    const wrapperRect = wrapperEl.getBoundingClientRect();
+    const ddLineEl = $xeUpload.$refs.refDragLineElem;
+    const mdLineEl = document.getElementById(`refModalDragLineElem${xID}`);
+    const currDLineEl = showMorePopup ? mdLineEl : ddLineEl;
+    if (currDLineEl) {
+        const dragRect = dragEl.getBoundingClientRect();
+        currDLineEl.style.display = 'block';
+        currDLineEl.style.top = `${Math.max(1, dragRect.y - wrapperRect.y)}px`;
+        currDLineEl.style.left = `${Math.max(1, dragRect.x - wrapperRect.x)}px`;
+        currDLineEl.style.height = `${dragRect.height}px`;
+        currDLineEl.style.width = `${dragRect.width - 1}px`;
+        currDLineEl.setAttribute('drag-pos', dragPos);
+    }
+}
+function hideDropTip($xeUpload) {
+    const { xID } = $xeUpload;
+    const ddLineEl = $xeUpload.$refs.refDragLineElem;
+    const mdLineEl = document.getElementById(`refModalDragLineElem${xID}`);
+    if (ddLineEl) {
+        ddLineEl.style.display = '';
+    }
+    if (mdLineEl) {
+        mdLineEl.style.display = '';
+    }
+}
 export default defineVxeComponent({
     name: 'VxeUpload',
     model: {
@@ -67,6 +102,7 @@ export default defineVxeComponent({
             type: Array,
             default: () => XEUtils.clone(getConfig().upload.fileTypes, true)
         },
+        dragSort: Boolean,
         dragToUpload: {
             type: Boolean,
             default: () => XEUtils.clone(getConfig().upload.dragToUpload, true)
@@ -178,14 +214,19 @@ export default defineVxeComponent({
     data() {
         const xID = XEUtils.uniqueId();
         const reactData = {
-            isDrag: false,
+            isDragUploadStatus: false,
             showMorePopup: false,
             isActivated: false,
             fileList: [],
-            fileCacheMaps: {}
+            fileCacheMaps: {},
+            isDragMove: false,
+            dragIndex: -1,
+            dragTipText: ''
         };
         const internalData = {
-            imagePreviewTypes: ['jpg', 'jpeg', 'png', 'gif']
+            imagePreviewTypes: ['jpg', 'jpeg', 'png', 'gif'],
+            prevDragIndex: -1
+            // prevDragPos: ''
         };
         return {
             xID,
@@ -812,7 +853,7 @@ export default defineVxeComponent({
                 }
             });
         },
-        handleDragleaveEvent(evnt) {
+        handleUploadDragleaveEvent(evnt) {
             const $xeUpload = this;
             const reactData = $xeUpload.reactData;
             const targetElem = evnt.currentTarget;
@@ -820,11 +861,11 @@ export default defineVxeComponent({
             if (targetElem) {
                 const { x: targetX, y: targetY, height: targetHeight, width: targetWidth } = targetElem.getBoundingClientRect();
                 if (clientX < targetX || clientX > targetX + targetWidth || clientY < targetY || clientY > targetY + targetHeight) {
-                    reactData.isDrag = false;
+                    reactData.isDragUploadStatus = false;
                 }
             }
         },
-        handleDragoverEvent(evnt) {
+        handleUploadDragoverEvent(evnt) {
             const $xeUpload = this;
             const reactData = $xeUpload.reactData;
             const dataTransfer = evnt.dataTransfer;
@@ -832,7 +873,7 @@ export default defineVxeComponent({
                 const { items } = dataTransfer;
                 if (items && items.length) {
                     evnt.preventDefault();
-                    reactData.isDrag = true;
+                    reactData.isDragUploadStatus = true;
                 }
             }
         },
@@ -866,7 +907,7 @@ export default defineVxeComponent({
             }
             $xeUpload.uploadFile(files, evnt);
         },
-        handleDropEvent(evnt) {
+        handleUploadDropEvent(evnt) {
             const $xeUpload = this;
             const reactData = $xeUpload.reactData;
             const dataTransfer = evnt.dataTransfer;
@@ -880,12 +921,13 @@ export default defineVxeComponent({
                     }
                 }
             }
-            reactData.isDrag = false;
+            reactData.isDragUploadStatus = false;
         },
         handleMoreEvent() {
             const $xeUpload = this;
             const props = $xeUpload;
             const reactData = $xeUpload.reactData;
+            const { xID } = $xeUpload;
             const formReadonly = $xeUpload.computeFormReadonly;
             const isImage = $xeUpload.computeIsImage;
             if (VxeUI.modal) {
@@ -899,38 +941,65 @@ export default defineVxeComponent({
                     maskClosable: true,
                     slots: {
                         default(params, h) {
-                            const { showErrorStatus, dragToUpload } = props;
-                            const { isDrag } = reactData;
-                            const isDisabled = $xeUpload.computeIsDisabled;
+                            const { showErrorStatus, dragToUpload, dragSort } = props;
+                            const { isDragMove, isDragUploadStatus, dragIndex } = reactData;
                             const { fileList } = reactData;
+                            const isDisabled = $xeUpload.computeIsDisabled;
                             const ons = {};
-                            if (dragToUpload) {
-                                ons.dragover = $xeUpload.handleDragoverEvent;
-                                ons.dragleave = $xeUpload.handleDragleaveEvent;
-                                ons.drop = $xeUpload.handleDropEvent;
+                            if (dragToUpload && dragIndex === -1) {
+                                ons.dragover = $xeUpload.handleUploadDragoverEvent;
+                                ons.dragleave = $xeUpload.handleUploadDragleaveEvent;
+                                ons.drop = $xeUpload.handleUploadDropEvent;
                             }
                             return h('div', {
+                                attrs: {
+                                    id: `refPopupElem${xID}`
+                                },
                                 class: ['vxe-upload--more-popup', {
                                         'is--readonly': formReadonly,
                                         'is--disabled': isDisabled,
                                         'show--error': showErrorStatus,
-                                        'is--drag': isDrag
+                                        'is--drag': isDragUploadStatus
                                     }],
                                 on: ons
                             }, [
                                 isImage
-                                    ? h('div', {
-                                        class: 'vxe-upload--image-more-list'
-                                    }, $xeUpload.renderImageItemList(h, fileList, true).concat($xeUpload.renderImageAction(h, true)))
+                                    ? (dragSort
+                                        ? h('transition-group', {
+                                            props: {
+                                                name: `vxe-upload--drag-list${isDragMove ? '' : '-disabled'}`,
+                                                tag: 'div'
+                                            },
+                                            class: 'vxe-upload--image-more-list'
+                                        }, $xeUpload.renderImageItemList(h, fileList, true).concat($xeUpload.renderImageAction(h, true)))
+                                        : h('div', {
+                                            class: 'vxe-upload--image-more-list'
+                                        }, $xeUpload.renderImageItemList(h, fileList, true).concat($xeUpload.renderImageAction(h, true))))
                                     : h('div', {
                                         class: 'vxe-upload--file-more-list'
                                     }, [
                                         $xeUpload.renderFileAction(h, true),
-                                        h('div', {
-                                            class: 'vxe-upload--file-list'
-                                        }, $xeUpload.renderFileItemList(h, fileList, true))
+                                        (dragSort
+                                            ? h('transition-group', {
+                                                props: {
+                                                    name: `vxe-upload--drag-list${isDragMove ? '' : '-disabled'}`,
+                                                    tag: 'div'
+                                                },
+                                                class: 'vxe-upload--file-list'
+                                            }, $xeUpload.renderFileItemList(h, fileList, true))
+                                            : h('div', {
+                                                class: 'vxe-upload--file-list'
+                                            }, $xeUpload.renderFileItemList(h, fileList, true)))
                                     ]),
-                                isDrag
+                                dragSort
+                                    ? h('div', {
+                                        attrs: {
+                                            id: `refModalDragLineElem${xID}`
+                                        },
+                                        class: 'vxe-upload--drag-line'
+                                    })
+                                    : renderEmptyElement($xeUpload),
+                                isDragUploadStatus
                                     ? h('div', {
                                         class: 'vxe-upload--drag-placeholder'
                                     }, getI18n('vxe.upload.dragPlaceholder'))
@@ -938,15 +1007,95 @@ export default defineVxeComponent({
                             ]);
                         }
                     },
-                    onShow() {
-                        reactData.showMorePopup = true;
-                    },
-                    onHide() {
-                        reactData.showMorePopup = false;
+                    events: {
+                        show() {
+                            reactData.showMorePopup = true;
+                        },
+                        hide() {
+                            reactData.showMorePopup = false;
+                        }
                     }
                 });
             }
         },
+        // 拖拽
+        handleDragSortDragstartEvent(evnt) {
+            const $xeUpload = this;
+            const reactData = $xeUpload.reactData;
+            if (evnt.dataTransfer) {
+                const img = new Image();
+                img.src = tpImg;
+                evnt.dataTransfer.setDragImage(img, 0, 0);
+            }
+            const dragEl = evnt.currentTarget;
+            const parentEl = dragEl.parentElement;
+            const dragIndex = XEUtils.findIndexOf(Array.from(parentEl.children), item => dragEl === item);
+            reactData.isDragMove = true;
+            reactData.dragIndex = dragIndex;
+            setTimeout(() => {
+                reactData.isDragMove = false;
+            }, 500);
+        },
+        handleDragSortDragoverEvent(evnt) {
+            const $xeUpload = this;
+            const reactData = $xeUpload.reactData;
+            const internalData = $xeUpload.internalData;
+            evnt.preventDefault();
+            const { dragIndex } = reactData;
+            if (dragIndex === -1) {
+                return;
+            }
+            const isImage = $xeUpload.computeIsImage;
+            const dragEl = evnt.currentTarget;
+            const parentEl = dragEl.parentElement;
+            const currIndex = XEUtils.findIndexOf(Array.from(parentEl.children), item => dragEl === item);
+            let dragPos = '';
+            if (isImage) {
+                const offsetX = evnt.clientX - dragEl.getBoundingClientRect().x;
+                dragPos = offsetX < dragEl.clientWidth / 2 ? 'left' : 'right';
+            }
+            else {
+                const offsetY = evnt.clientY - dragEl.getBoundingClientRect().y;
+                dragPos = offsetY < dragEl.clientHeight / 2 ? 'top' : 'bottom';
+            }
+            if (dragIndex === currIndex) {
+                showDropTip($xeUpload, evnt, dragEl, dragPos);
+                return;
+            }
+            showDropTip($xeUpload, evnt, dragEl, dragPos);
+            internalData.prevDragIndex = currIndex;
+            internalData.prevDragPos = dragPos;
+        },
+        handleDragSortDragendEvent(evnt) {
+            const $xeUpload = this;
+            const reactData = $xeUpload.reactData;
+            const internalData = $xeUpload.internalData;
+            const { fileList, dragIndex } = reactData;
+            const { prevDragIndex, prevDragPos } = internalData;
+            const oldIndex = dragIndex;
+            const targetIndex = prevDragIndex;
+            const dragOffsetIndex = prevDragPos === 'bottom' || prevDragPos === 'right' ? 1 : 0;
+            const oldItem = fileList[oldIndex];
+            const newItem = fileList[targetIndex];
+            if (oldItem && newItem) {
+                fileList.splice(oldIndex, 1);
+                const ptfIndex = XEUtils.findIndexOf(fileList, item => newItem === item);
+                const nIndex = ptfIndex + dragOffsetIndex;
+                fileList.splice(nIndex, 0, oldItem);
+                $xeUpload.dispatchEvent('sort-dragend', {
+                    oldItem: oldItem,
+                    newItem: newItem,
+                    dragPos: prevDragPos,
+                    offsetIndex: dragOffsetIndex,
+                    _index: {
+                        newIndex: nIndex,
+                        oldIndex: oldIndex
+                    }
+                }, evnt);
+            }
+            hideDropTip($xeUpload);
+            reactData.dragIndex = -1;
+        },
         handleGlobalPasteEvent(evnt) {
             const $xeUpload = this;
             const props = $xeUpload;
@@ -990,25 +1139,36 @@ export default defineVxeComponent({
             const props = $xeUpload;
             const slots = $xeUpload.$scopedSlots;
             const reactData = $xeUpload.reactData;
-            const { showRemoveButton, showDownloadButton, showProgress, progressText, showPreview, showErrorStatus } = props;
+            const { showRemoveButton, showDownloadButton, showProgress, progressText, showPreview, showErrorStatus, dragSort } = props;
             const { fileCacheMaps } = reactData;
             const isDisabled = $xeUpload.computeIsDisabled;
             const formReadonly = $xeUpload.computeFormReadonly;
             const nameProp = $xeUpload.computeNameProp;
             const typeProp = $xeUpload.computeTypeProp;
             const cornerSlot = slots.corner;
+            const ons = {};
+            if (dragSort) {
+                ons.dragstart = $xeUpload.handleDragSortDragstartEvent;
+                ons.dragover = $xeUpload.handleDragSortDragoverEvent;
+                ons.dragend = $xeUpload.handleDragSortDragendEvent;
+            }
             return currList.map((item, index) => {
                 const fileKey = $xeUpload.getFieldKey(item);
                 const cacheItem = fileCacheMaps[fileKey];
                 const isLoading = cacheItem && cacheItem.loading;
                 const isError = cacheItem && cacheItem.status === 'error';
                 return h('div', {
-                    key: index,
+                    key: dragSort ? fileKey : index,
                     class: ['vxe-upload--file-item', {
                             'is--preview': showPreview,
                             'is--loading': isLoading,
                             'is--error': isError
-                        }]
+                        }],
+                    attrs: {
+                        fileid: fileKey,
+                        draggable: dragSort ? true : null
+                    },
+                    on: ons
                 }, [
                     h('div', {
                         class: 'vxe-upload--file-item-icon'
@@ -1147,8 +1307,8 @@ export default defineVxeComponent({
             const $xeUpload = this;
             const props = $xeUpload;
             const reactData = $xeUpload.reactData;
-            const { moreConfig } = props;
-            const { fileList } = reactData;
+            const { moreConfig, dragSort } = props;
+            const { fileList, isDragMove } = reactData;
             const moreOpts = $xeUpload.computeMoreOpts;
             const { maxCount, showMoreButton, layout } = moreOpts;
             const isHorizontal = layout === 'horizontal';
@@ -1172,9 +1332,17 @@ export default defineVxeComponent({
                             }]
                     }, [
                         currList.length
-                            ? h('div', {
-                                class: 'vxe-upload--file-list'
-                            }, $xeUpload.renderFileItemList(h, currList, false))
+                            ? (dragSort
+                                ? h('transition-group', {
+                                    attrs: {
+                                        name: `vxe-upload--drag-list${isDragMove ? '' : '-disabled'}`,
+                                        tag: 'div'
+                                    },
+                                    class: 'vxe-upload--file-list'
+                                }, $xeUpload.renderFileItemList(h, currList, false))
+                                : h('div', {
+                                    class: 'vxe-upload--file-list'
+                                }, $xeUpload.renderFileItemList(h, currList, false)))
                             : renderEmptyElement($xeUpload),
                         showMoreButton && overMaxNum
                             ? h('div', {
@@ -1204,26 +1372,37 @@ export default defineVxeComponent({
             const props = $xeUpload;
             const slots = $xeUpload.$scopedSlots;
             const reactData = $xeUpload.reactData;
-            const { showRemoveButton, showProgress, progressText, showPreview, showErrorStatus } = props;
+            const { showRemoveButton, showProgress, progressText, showPreview, showErrorStatus, dragSort } = props;
             const { fileCacheMaps } = reactData;
             const isDisabled = $xeUpload.computeIsDisabled;
             const formReadonly = $xeUpload.computeFormReadonly;
             const imageOpts = $xeUpload.computeImageOpts;
             const imgStyle = $xeUpload.computeImgStyle;
             const cornerSlot = slots.corner;
+            const ons = {};
+            if (dragSort) {
+                ons.dragstart = $xeUpload.handleDragSortDragstartEvent;
+                ons.dragover = $xeUpload.handleDragSortDragoverEvent;
+                ons.dragend = $xeUpload.handleDragSortDragendEvent;
+            }
             return currList.map((item, index) => {
                 const fileKey = $xeUpload.getFieldKey(item);
                 const cacheItem = fileCacheMaps[fileKey];
                 const isLoading = cacheItem && cacheItem.loading;
                 const isError = cacheItem && cacheItem.status === 'error';
                 return h('div', {
-                    key: index,
+                    key: dragSort ? fileKey : index,
                     class: ['vxe-upload--image-item', {
                             'is--preview': showPreview,
                             'is--circle': imageOpts.circle,
                             'is--loading': isLoading,
                             'is--error': isError
-                        }]
+                        }],
+                    attrs: {
+                        fileid: fileKey,
+                        draggable: dragSort ? true : null
+                    },
+                    on: ons
                 }, [
                     h('div', {
                         class: 'vxe-upload--image-item-box',
@@ -1375,8 +1554,10 @@ export default defineVxeComponent({
         },
         renderImageMode(h) {
             const $xeUpload = this;
+            const props = $xeUpload;
             const reactData = $xeUpload.reactData;
-            const { fileList } = reactData;
+            const { dragSort } = props;
+            const { fileList, isDragMove } = reactData;
             const moreOpts = $xeUpload.computeMoreOpts;
             const { maxCount, showMoreButton } = moreOpts;
             let currList = fileList;
@@ -1389,44 +1570,71 @@ export default defineVxeComponent({
                 key: 'image',
                 class: 'vxe-upload--image-wrapper'
             }, [
-                h('div', {
-                    class: 'vxe-upload--image-list'
-                }, $xeUpload.renderImageItemList(h, currList, false).concat([
-                    showMoreButton && overMaxNum
-                        ? h('div', {
-                            class: 'vxe-upload--image-over-more'
-                        }, [
-                            h(VxeButtonComponent, {
-                                props: {
-                                    mode: 'text',
-                                    content: getI18n('vxe.upload.moreBtnText', [fileList.length]),
-                                    status: 'primary'
-                                },
-                                on: {
-                                    click: $xeUpload.handleMoreEvent
-                                }
-                            })
-                        ])
-                        : renderEmptyElement($xeUpload),
-                    $xeUpload.renderImageAction(h, false)
-                ]))
+                dragSort
+                    ? h('transition-group', {
+                        attrs: {
+                            name: `vxe-upload--drag-list${isDragMove ? '' : '-disabled'}`,
+                            tag: 'div'
+                        },
+                        class: 'vxe-upload--image-list'
+                    }, $xeUpload.renderImageItemList(h, currList, false).concat([
+                        showMoreButton && overMaxNum
+                            ? h('div', {
+                                key: 'om',
+                                class: 'vxe-upload--image-over-more'
+                            }, [
+                                h(VxeButtonComponent, {
+                                    props: {
+                                        mode: 'text',
+                                        content: getI18n('vxe.upload.moreBtnText', [fileList.length]),
+                                        status: 'primary'
+                                    },
+                                    on: {
+                                        click: $xeUpload.handleMoreEvent
+                                    }
+                                })
+                            ])
+                            : renderEmptyElement($xeUpload),
+                        $xeUpload.renderImageAction(h, false)
+                    ]))
+                    : h('div', {
+                        class: 'vxe-upload--image-list'
+                    }, $xeUpload.renderImageItemList(h, currList, false).concat([
+                        showMoreButton && overMaxNum
+                            ? h('div', {
+                                class: 'vxe-upload--image-over-more'
+                            }, [
+                                h(VxeButtonComponent, {
+                                    props: {
+                                        mode: 'text',
+                                        content: getI18n('vxe.upload.moreBtnText', [fileList.length]),
+                                        status: 'primary'
+                                    },
+                                    on: {
+                                        click: $xeUpload.handleMoreEvent
+                                    }
+                                })
+                            ])
+                            : renderEmptyElement($xeUpload),
+                        $xeUpload.renderImageAction(h, false)
+                    ]))
             ]);
         },
         renderVN(h) {
             const $xeUpload = this;
             const props = $xeUpload;
             const reactData = $xeUpload.reactData;
-            const { showErrorStatus, dragToUpload, pasteToUpload } = props;
-            const { isDrag, showMorePopup, isActivated } = reactData;
+            const { showErrorStatus, dragToUpload, pasteToUpload, dragSort } = props;
+            const { isDragUploadStatus, showMorePopup, isActivated, dragIndex } = reactData;
             const vSize = $xeUpload.computeSize;
             const isDisabled = $xeUpload.computeIsDisabled;
             const formReadonly = $xeUpload.computeFormReadonly;
             const isImage = $xeUpload.computeIsImage;
             const ons = {};
-            if (dragToUpload) {
-                ons.dragover = $xeUpload.handleDragoverEvent;
-                ons.dragleave = $xeUpload.handleDragleaveEvent;
-                ons.drop = $xeUpload.handleDropEvent;
+            if (dragToUpload && dragIndex === -1) {
+                ons.dragover = $xeUpload.handleUploadDragoverEvent;
+                ons.dragleave = $xeUpload.handleUploadDragleaveEvent;
+                ons.drop = $xeUpload.handleUploadDropEvent;
             }
             return h('div', {
                 ref: 'refElem',
@@ -1437,12 +1645,18 @@ export default defineVxeComponent({
                         'is--disabled': isDisabled,
                         'is--paste': pasteToUpload,
                         'show--error': showErrorStatus,
-                        'is--drag': isDrag
+                        'is--drag': isDragUploadStatus
                     }],
                 on: ons
             }, [
                 isImage ? $xeUpload.renderImageMode(h) : $xeUpload.renderAllMode(h),
-                isDrag && !showMorePopup
+                dragSort
+                    ? h('div', {
+                        ref: 'refDragLineElem',
+                        class: 'vxe-upload--drag-line'
+                    })
+                    : renderEmptyElement($xeUpload),
+                isDragUploadStatus && !showMorePopup
                     ? h('div', {
                         class: 'vxe-upload--drag-placeholder'
                     }, getI18n('vxe.upload.dragPlaceholder'))
@@ -1462,7 +1676,7 @@ export default defineVxeComponent({
                 errLog('vxe.error.errConflicts', ['multiple', 'single-mode']);
             }
             if (props.imageStyle) {
-                errLog('vxe.error.delProp', ['image-style', 'image-config']);
+                warnLog('vxe.error.delProp', ['image-style', 'image-config']);
             }
         }
         globalEvents.on($xeUpload, 'paste', $xeUpload.handleGlobalPasteEvent);
@@ -1472,7 +1686,7 @@ export default defineVxeComponent({
     beforeDestroy() {
         const $xeUpload = this;
         const reactData = $xeUpload.reactData;
-        reactData.isDrag = false;
+        reactData.isDragUploadStatus = false;
         globalEvents.off($xeUpload, 'paste');
         globalEvents.off($xeUpload, 'mousedown');
         globalEvents.off($xeUpload, 'blur');

package/es/upload/style.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 .vxe-upload {
   position: relative;
   color: var(--vxe-ui-font-color);
@@ -72,8 +73,7 @@
   flex-direction: row;
   align-items: center;
   line-height: 1.5em;
-  margin-bottom: var(--vxe-ui-layout-padding-half);
-  padding: 0.1em var(--vxe-ui-layout-padding-half);
+  padding: var(--vxe-ui-layout-padding-half);
 }
 .vxe-upload--file-item:hover {
   background-color: var(--vxe-ui-base-hover-background-color);
@@ -366,6 +366,42 @@
   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 0.2s;
+}
+
+.vxe-upload--more-popup {
+  position: relative;
+}
+
 .vxe-upload,
 .vxe-upload--more-popup {
   font-size: var(--vxe-ui-font-size-default);