vxe-pc-ui 3.20.8 → 3.20.10

package/es/list/src/list.js

@@ -9,8 +9,7 @@ import { createComponentLog } from '../../ui/src/log';
 import { moveRowAnimateToTb, clearRowAnimate } from '../../ui/src/anime';
 import { getItemCacheObj } from './util';
 import VxeLoadingComponent from '../../loading';
-const { getConfig, getIcon, getI18n, domUtils, scrollbarUtils, menus, globalEvents, globalResize } = VxeUI;
-const { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } = scrollbarUtils;
+const { getConfig, getIcon, getI18n, domUtils, menus, globalEvents, globalResize } = VxeUI;
 const { warnLog, errLog } = createComponentLog('tree');
 let crossListDragRowObj = null;
 function eqRowKey(rowKey1, rowKey2) {
@@ -85,7 +84,9 @@ function createInternalData() {
 export default {
     name: 'VxeList',
     mixins: [
-        globalMixins.sizeMixin
+        globalMixins.sizeMixin,
+        globalMixins.vScrollbarMixin,
+        globalMixins.initVScrollbarMixin
     ],
     props: {
         data: Array,
@@ -133,7 +134,7 @@ export default {
         const xID = XEUtils.uniqueId();
         const reactData = createReactData();
         return Object.assign(Object.assign({}, {}), { xID,
-            reactData, crossListDragRowInfo: crossListDragRowGlobal, reFlag: 0 });
+            reactData, crossListDragRowInfo: crossListDragRowGlobal, reLayoutFlag: 0, reScrollFlag: 0 });
     },
     computed: Object.assign(Object.assign({}, {}), { computeRowOpts() {
             const $xeList = this;
@@ -324,6 +325,11 @@ export default {
             }
             return [];
         },
+        getScrollViewElem() {
+            const $xeList = this;
+            const viewEl = $xeList.$refs.refVirtualWrapper;
+            return viewEl || null;
+        },
         getRowId(row) {
             const $xeList = this;
             const keyField = $xeList.computeKeyField;
@@ -627,8 +633,14 @@ export default {
         },
         updateScrollbar() {
             const $xeList = this;
-            $xeList.updateThumbSize();
-            $xeList.updateThumbOffset();
+            const isVScrollbar = $xeList.computeIsVScrollbar;
+            if (isVScrollbar) {
+                return $xeList.$nextTick().then(() => {
+                    $xeList.updateThumbSize();
+                    $xeList.updateThumbOffset();
+                });
+            }
+            return Promise.resolve();
         },
         /**
          * 重新计算列表
@@ -649,10 +661,11 @@ export default {
                     parentHeight = parentEl.clientHeight - Math.ceil(XEUtils.toNumber(parentStyle.paddingLeft) + XEUtils.toNumber(parentStyle.paddingRight));
                 }
                 reactData.parentHeight = parentHeight;
-                $xeList.updateScrollbar();
                 $xeList.updateHeight();
                 if (el.clientWidth && el.clientHeight) {
-                    return $xeList.computeScrollLoad();
+                    return $xeList.computeScrollLoad().then(() => {
+                        $xeList.updateScrollbar();
+                    });
                 }
             }
             return $xeList.$nextTick();
@@ -662,7 +675,7 @@ export default {
             const internalData = $xeList.internalData;
             const { scrollYStore } = internalData;
             const { startIndex, endIndex, visibleSize, offsetSize, rowHeight } = scrollYStore;
-            const scrollBodyElem = evnt.target;
+            const scrollBodyElem = evnt.currentTarget;
             const scrollTop = scrollBodyElem.scrollTop;
             const toVisibleIndex = Math.floor(scrollTop / rowHeight);
             const offsetStartIndex = Math.max(0, toVisibleIndex - 1 - offsetSize);
@@ -679,7 +692,7 @@ export default {
             const $xeList = this;
             const reactData = $xeList.reactData;
             const internalData = $xeList.internalData;
-            const scrollBodyElem = evnt.target;
+            const scrollBodyElem = evnt.currentTarget;
             const scrollTop = scrollBodyElem.scrollTop;
             const scrollLeft = scrollBodyElem.scrollLeft;
             const isX = scrollLeft !== internalData.lastScrollLeft;
@@ -1942,183 +1955,26 @@ export default {
             $xeList.dispatchEvent('row-menu', { row }, evnt);
         },
         // 滚动条
-        updateThumbSize() {
-            const $xeList = this;
-            const reactData = $xeList.reactData;
-            const viewEl = $xeList.$refs.refVirtualWrapper;
-            if (!viewEl) {
-                return;
-            }
-            if (!viewEl.clientHeight || !viewEl.clientHeight) {
-                return;
-            }
-            const trackXEl = $xeList.$refs.refTrackXElem;
-            const xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
-            const thumbXElem = $xeList.$refs.refThumbXElem;
-            if (thumbXElem) {
-                thumbXElem.style.width = xThumbWidth + 'px';
-            }
-            reactData.xThumbWidth = xThumbWidth;
-            const trackYEl = $xeList.$refs.refTrackYElem;
-            const yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
-            const thumbYElem = $xeList.$refs.refThumbYElem;
-            if (thumbYElem) {
-                thumbYElem.style.height = yThumbHeight + 'px';
-            }
-            reactData.yThumbHeight = yThumbHeight;
-        },
-        updateThumbOffset() {
+        bindScrollbarResize() {
             const $xeList = this;
-            const reactData = $xeList.reactData;
             const internalData = $xeList.internalData;
-            const viewEl = $xeList.$refs.refVirtualWrapper;
-            if (!viewEl) {
-                return;
-            }
-            if (!viewEl.clientHeight || !viewEl.clientHeight) {
-                return;
-            }
-            const { xThumbWidth, yThumbHeight } = reactData;
-            const trackXEl = $xeList.$refs.refTrackXElem;
-            const thumbXElem = $xeList.$refs.refThumbXElem;
-            const xThumbLeft = trackXEl && xThumbWidth ? getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth, xThumbWidth) : 0;
-            internalData.xThumbLeft = xThumbLeft;
-            if (thumbXElem && xThumbWidth) {
-                thumbXElem.style.width = xThumbWidth + 'px';
-                thumbXElem.style.transform = `translateX(${xThumbLeft}px)`;
-            }
-            const trackYEl = $xeList.$refs.refTrackYElem;
-            const thumbYElem = $xeList.$refs.refThumbYElem;
-            const yThumbTop = trackYEl && yThumbHeight ? getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight, yThumbHeight) : 0;
-            internalData.yThumbTop = yThumbTop;
-            if (thumbYElem && yThumbHeight) {
-                thumbYElem.style.height = yThumbHeight + 'px';
-                thumbYElem.style.transform = `translateY(${yThumbTop}px)`;
-            }
-        },
-        clickTrackXEvent(evnt) {
-            const $xeList = this;
-            const reactData = $xeList.reactData;
-            const trackEl = evnt.currentTarget;
-            if (trackEl !== evnt.target) {
-                return;
-            }
-            const viewEl = $xeList.$refs.refVirtualWrapper;
-            if (!viewEl) {
-                return;
-            }
-            const { xThumbWidth } = reactData;
-            const trackRect = trackEl.getBoundingClientRect();
-            viewEl.scrollTo({
-                left: getScrollFromClick(evnt.clientX - trackRect.left, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth),
-                behavior: 'auto'
-            });
-        },
-        clickTrackYEvent(evnt) {
-            const $xeList = this;
-            const reactData = $xeList.reactData;
-            const trackEl = evnt.currentTarget;
-            if (trackEl !== evnt.target) {
-                return;
-            }
-            const viewEl = $xeList.$refs.refVirtualWrapper;
-            if (!viewEl) {
-                return;
-            }
-            const { yThumbHeight } = reactData;
-            const trackRect = trackEl.getBoundingClientRect();
-            viewEl.scrollTo({
-                top: getScrollFromClick(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
-                behavior: 'auto'
-            });
-        },
-        pointerdownThumbXEvent(evnt) {
-            const $xeList = this;
-            const reactData = $xeList.reactData;
-            const internalData = $xeList.internalData;
-            const thumbEl = evnt.currentTarget;
-            internalData.isThumbDrag = true;
-            thumbEl.setPointerCapture(evnt.pointerId);
-            const viewEl = $xeList.$refs.refVirtualWrapper;
-            if (!viewEl) {
-                return;
-            }
-            const { xThumbWidth } = reactData;
-            const trackEl = thumbEl.parentElement;
-            const trackRect = trackEl.getBoundingClientRect();
-            const pointerPosition = evnt.clientX - trackRect.left;
-            // 记录 thumb 的偏移
-            const thumbOffset = getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
-            internalData.thumbDragOffset = pointerPosition - thumbOffset;
-        },
-        pointermoveThumbXEvent(evnt) {
-            const $xeList = this;
-            const reactData = $xeList.reactData;
-            const internalData = $xeList.internalData;
-            const thumbEl = evnt.currentTarget;
-            if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
-                return;
-            }
-            const { isThumbDrag, thumbDragOffset } = internalData;
-            if (isThumbDrag) {
-                const viewEl = $xeList.$refs.refVirtualWrapper;
-                if (!viewEl) {
-                    return;
-                }
-                const { xThumbWidth } = reactData;
-                const thumbEl = evnt.currentTarget;
-                const trackEl = thumbEl.parentElement;
-                const trackRect = trackEl.getBoundingClientRect();
-                // 更新偏移
-                viewEl.scrollLeft = getScrollFromDrag(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
-            }
-        },
-        cleatPointerThumbEvent(evnt) {
-            const $xeList = this;
-            const internalData = $xeList.internalData;
-            const thumbEl = evnt.currentTarget;
-            thumbEl.releasePointerCapture(evnt.pointerId);
-            internalData.isThumbDrag = false;
-        },
-        pointerdownThumbYEvent(evnt) {
-            const $xeList = this;
-            const reactData = $xeList.reactData;
-            const internalData = $xeList.internalData;
-            const thumbEl = evnt.currentTarget;
-            internalData.isThumbDrag = true;
-            thumbEl.setPointerCapture(evnt.pointerId);
-            const viewEl = $xeList.$refs.refVirtualWrapper;
-            if (!viewEl) {
-                return;
-            }
-            const { yThumbHeight } = reactData;
-            const trackEl = thumbEl.parentElement;
-            const trackRect = trackEl.getBoundingClientRect();
-            const pointerPosition = evnt.clientY - trackRect.top;
-            // 记录 thumb 的偏移
-            const thumbOffset = getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
-            internalData.thumbDragOffset = pointerPosition - thumbOffset;
-        },
-        pointermoveThumbYEvent(evnt) {
-            const $xeList = this;
-            const reactData = $xeList.reactData;
-            const internalData = $xeList.internalData;
-            const thumbEl = evnt.currentTarget;
-            if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
-                return;
-            }
-            const { isThumbDrag, thumbDragOffset } = internalData;
-            if (isThumbDrag) {
-                const viewEl = $xeList.$refs.refVirtualWrapper;
-                if (!viewEl) {
-                    return;
+            const { scrollObserver } = internalData;
+            const isVScrollbar = $xeList.computeIsVScrollbar;
+            if (isVScrollbar) {
+                if (!scrollObserver) {
+                    const el = $xeList.$refs.refElem;
+                    const viewInnerEl = $xeList.$refs.refVirtualSpaceElem;
+                    const scrollObserver = globalResize.create(() => {
+                        $xeList.reScrollFlag++;
+                    });
+                    if (el) {
+                        scrollObserver.observe(el);
+                    }
+                    if (viewInnerEl) {
+                        scrollObserver.observe(viewInnerEl);
+                    }
+                    internalData.scrollObserver = scrollObserver;
                 }
-                const { yThumbHeight } = reactData;
-                const thumbEl = evnt.currentTarget;
-                const trackEl = thumbEl.parentElement;
-                const trackRect = trackEl.getBoundingClientRect();
-                // 更新偏移
-                viewEl.scrollTop = getScrollFromDrag(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
             }
         },
         //
@@ -2350,12 +2206,13 @@ export default {
             const props = $xeList;
             const reactData = $xeList.reactData;
             const slots = $xeList.$scopedSlots;
-            const { showCheckbox, className, loading, useScrollbar } = props;
+            const { showCheckbox, className, loading } = props;
             const { bodyHeight, topSpaceHeight, rowList, isAllChecked, isAllIndeterminate, xThumbWidth, yThumbHeight } = reactData;
             const defaultSlot = slots.default;
             const headerSlot = slots.header;
             const footerSlot = slots.footer;
             const vSize = $xeList.computeSize;
+            const isVScrollbar = $xeList.computeIsVScrollbar;
             const wrapperStyles = $xeList.computeWrapperStyles;
             const virtualStyles = $xeList.computeVirtualStyles;
             const radioOpts = $xeList.computeRadioOpts;
@@ -2382,17 +2239,17 @@ export default {
                 ref: 'refElem',
                 class: [
                     'vxe-list',
-                    useScrollbar ? `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}` : '',
-                    useScrollbar ? `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}` : '',
-                    useScrollbar ? `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}` : '',
-                    useScrollbar ? `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}` : '',
+                    isVScrollbar ? `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}` : '',
+                    isVScrollbar ? `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}` : '',
+                    isVScrollbar ? `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}` : '',
+                    isVScrollbar ? `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}` : '',
                     className ? (XEUtils.isFunction(className) ? className({ $list: $xeList }) : className) : '',
                     {
                         [`size--${vSize}`]: vSize,
-                        'is--virtual-scrollbar': useScrollbar,
-                        'ov-padding': useScrollbar && scrollbarOpts.padding,
-                        'ov-x--auto-hide': useScrollbar && scrollXAutoHide,
-                        'ov-y--auto-hide': useScrollbar && scrollYAutoHide,
+                        'is--virtual-scrollbar': isVScrollbar,
+                        'ov-padding': isVScrollbar && scrollbarOpts.padding,
+                        'ov-x--auto-hide': isVScrollbar && scrollXAutoHide,
+                        'ov-y--auto-hide': isVScrollbar && scrollYAutoHide,
                         'overflow-y': yThumbHeight,
                         'overflow-x': xThumbWidth,
                         'is--drag': isDrag,
@@ -2442,6 +2299,7 @@ export default {
                     }
                 }, [
                     h('div', {
+                        ref: 'refVirtualSpaceElem',
                         class: 'vxe-list--y-space',
                         style: {
                             height: bodyHeight ? `${bodyHeight}px` : ''
@@ -2470,7 +2328,7 @@ export default {
                 /**
                  * 滚动条
                  */
-                useScrollbar
+                isVScrollbar
                     ? h('div', {
                         class: scrollbarWrapperClss
                     }, [
@@ -2542,50 +2400,61 @@ export default {
         },
         height() {
             const $xeList = this;
-            $xeList.reFlag++;
+            $xeList.reLayoutFlag++;
         },
         maxHeight() {
             const $xeList = this;
-            $xeList.reFlag++;
+            $xeList.reLayoutFlag++;
         },
         syncResize() {
             const $xeList = this;
-            $xeList.reFlag++;
+            $xeList.reLayoutFlag++;
         },
-        useScrollbar() {
+        computeIsVScrollbar() {
             const $xeList = this;
-            $xeList.reFlag++;
+            $xeList.$nextTick(() => {
+                $xeList.bindScrollbarResize();
+                $xeList.$nextTick(() => {
+                    $xeList.reLayoutFlag++;
+                });
+            });
         },
         computeRowHeight() {
             const $xeList = this;
-            $xeList.reFlag++;
+            $xeList.reLayoutFlag++;
         },
         computeScrollYWidth() {
             const $xeList = this;
-            $xeList.reFlag++;
+            $xeList.reLayoutFlag++;
         },
         computeScrollXHeight() {
             const $xeList = this;
-            $xeList.reFlag++;
+            $xeList.reLayoutFlag++;
         },
         computeScrollXVisible() {
             const $xeList = this;
             $xeList.$nextTick(() => {
-                $xeList.reFlag++;
+                $xeList.reLayoutFlag++;
             });
         },
         computeScrollYVisible() {
             const $xeList = this;
             $xeList.$nextTick(() => {
-                $xeList.reFlag++;
+                $xeList.reLayoutFlag++;
             });
         },
-        reFlag() {
+        reLayoutFlag() {
             const $xeList = this;
             $xeList.recalculate().then(() => {
                 $xeList.recalculate();
             });
         },
+        reScrollFlag() {
+            const $xeList = this;
+            $xeList.updateScrollbar().then(() => {
+                $xeList.updateScrollbar();
+            });
+        },
         checkRowKey() {
             const $xeList = this;
             $xeList.updateRadioModeValue();
@@ -2606,7 +2475,7 @@ export default {
         const $xeList = this;
         const props = $xeList;
         const internalData = $xeList.internalData;
-        const { showSeq, showRadio, showCheckbox, autoResize, useScrollbar } = props;
+        const { showSeq, showRadio, showCheckbox, autoResize } = props;
         const rowOpts = $xeList.computeRowOpts;
         const { useKey, keyField } = rowOpts;
         const isDrag = $xeList.computeIsDrag;
@@ -2627,25 +2496,12 @@ export default {
         if (useKey && !keyField) {
             errLog('vxe.error.reqSupportProp', ['row-config.useKey', 'row-config.keyField']);
         }
-        const el = $xeList.$refs.refElem;
-        if (useScrollbar) {
-            const viewInnerEl = $xeList.$refs.refVirtualBody;
-            const scrollObserver = globalResize.create(() => {
-                $xeList.reFlag++;
-            });
-            if (el) {
-                scrollObserver.observe(el);
-            }
-            if (viewInnerEl) {
-                scrollObserver.observe(viewInnerEl);
-            }
-            internalData.scrollObserver = scrollObserver;
-        }
         if (autoResize) {
+            const el = $xeList.$refs.refElem;
             const parentEl = $xeList.getParentElem();
             const resizeObserver = globalResize.create(() => {
                 if (props.autoResize) {
-                    $xeList.reFlag++;
+                    $xeList.reLayoutFlag++;
                 }
             });
             if (el) {
@@ -2656,9 +2512,10 @@ export default {
             }
             internalData.resizeObserver = resizeObserver;
         }
-        $xeList.reFlag++;
+        $xeList.reLayoutFlag++;
+        $xeList.bindScrollbarResize();
         globalEvents.on($xeList, 'resize', () => {
-            $xeList.reFlag++;
+            $xeList.reLayoutFlag++;
         });
     },
     activated() {

package/es/menu/src/menu.js

@@ -34,6 +34,7 @@ export default {
     name: 'VxeMenu',
     mixins: [
         globalMixins.sizeMixin,
+        globalMixins.vScrollbarMixin,
         globalMixins.permissionMixin
     ],
     props: {

package/es/modal/src/modal.js

@@ -39,6 +39,7 @@ export default {
     name: 'VxeModal',
     mixins: [
         globalMixins.sizeMixin,
+        globalMixins.vScrollbarMixin,
         globalMixins.permissionMixin
     ],
     props: {