vxe-pc-ui 3.20.8 → 3.20.10

package/es/tabs/src/tabs.js

@@ -14,7 +14,8 @@ const scrollbarOffsetSize = 20;
 export default {
     name: 'VxeTabs',
     mixins: [
-        globalMixins.sizeMixin
+        globalMixins.sizeMixin,
+        globalMixins.vScrollbarMixin
     ],
     props: {
         value: [String, Number, Boolean],

package/es/tooltip/src/tooltip.js

@@ -33,7 +33,8 @@ function createInternalData() {
 export default {
     name: 'VxeTooltip',
     mixins: [
-        globalMixins.sizeMixin
+        globalMixins.sizeMixin,
+        globalMixins.vScrollbarMixin
     ],
     props: {
         value: Boolean,
@@ -265,8 +266,7 @@ export default {
         },
         updatePlacement() {
             const $xeTooltip = this;
-            $xeTooltip.updateTipStyle();
-            return $xeTooltip.$nextTick().then(() => {
+            return $xeTooltip.updateTipStyle().then(() => {
                 return $xeTooltip.updateTipStyle();
             }).then(() => {
                 return $xeTooltip.updateTipStyle();
@@ -460,8 +460,9 @@ export default {
             const props = $xeTooltip;
             const slots = $xeTooltip.$scopedSlots;
             const reactData = $xeTooltip.reactData;
-            const { useHtml, theme, useScrollbar, useHTML } = props;
+            const { useHtml, theme, useHTML } = props;
             const { tipContent } = reactData;
+            const isVScrollbar = $xeTooltip.computeIsVScrollbar;
             const wrapperStyle = $xeTooltip.computeWrapperStyle;
             const contentSlot = slots.content;
             const contVNs = [];
@@ -483,7 +484,7 @@ export default {
                     key: 'cd'
                 }, `${tipContent}`));
             }
-            if (useScrollbar) {
+            if (isVScrollbar) {
                 return h(VxeScrollbarComponent, {
                     key: 5,
                     ref: 'contentScrollbar',
@@ -588,7 +589,7 @@ export default {
         const internalData = $xeTooltip.internalData;
         const $scrollbar = $xeTooltip.$refs.contentScrollbar;
         if ($scrollbar) {
-            const viewEl = $scrollbar.getViewElem();
+            const viewEl = $scrollbar.getScrollViewElem();
             if (viewEl) {
                 viewEl.addEventListener('wheel', $xeTooltip.wheelEvent, { passive: false });
                 internalData.scrollbarViewEl = viewEl;

package/es/tooltip/style.css

@@ -28,6 +28,8 @@
 .vxe-tooltip--wrapper .vxe-tooltip--content,
 .vxe-tooltip--wrapper .vxe-tooltip--scrollbar-content-view {
   padding: 8px 12px;
+  width: -moz-max-content;
+  width: max-content;
   max-width: 600px;
   max-height: 800px;
   white-space: pre-line;

package/es/tooltip/style.min.css

@@ -1 +1 @@
-.vxe-tooltip--wrapper{display:none;position:absolute;top:-100%;left:-100%;font-size:12px;color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family);pointer-events:none}.vxe-tooltip--wrapper.is--visible{display:inline-block}.vxe-tooltip--wrapper.is--arrow .vxe-tooltip--arrow{display:block}.vxe-tooltip--wrapper.is--enterable:after{content:"";position:absolute;left:0;width:100%;height:6px;background-color:transparent}.vxe-tooltip--wrapper.is--enterable .vxe-tooltip--body{pointer-events:all}.vxe-tooltip--wrapper .vxe-tooltip--content,.vxe-tooltip--wrapper .vxe-tooltip--scrollbar-content-view{padding:8px 12px;max-width:600px;max-height:800px;white-space:pre-line;border-radius:var(--vxe-ui-base-border-radius);overflow:auto}.vxe-tooltip--wrapper .vxe-tooltip--arrow{display:none;position:absolute;border-color:transparent;border-width:6px;border-style:solid;left:50%;transform:translateX(-6px)}.vxe-tooltip--wrapper .vxe-tooltip--arrow:before{content:"";position:absolute;border-color:transparent;border-width:5px;border-style:solid;left:-5px}.vxe-tooltip--wrapper.placement--top.is--arrow{padding-bottom:6px}.vxe-tooltip--wrapper.placement--top.is--enterable:after{bottom:-6px}.vxe-tooltip--wrapper.placement--top .vxe-tooltip--arrow{bottom:-11px}.vxe-tooltip--wrapper.placement--top .vxe-tooltip--arrow:before{top:-7px}.vxe-tooltip--wrapper.placement--bottom.is--arrow{padding-top:6px}.vxe-tooltip--wrapper.placement--bottom.is--enterable:after{top:-6px}.vxe-tooltip--wrapper.placement--bottom .vxe-tooltip--arrow{top:-11px}.vxe-tooltip--wrapper.placement--bottom .vxe-tooltip--arrow:before{top:-3px}.vxe-tooltip--body{position:relative;border-radius:var(--vxe-ui-base-border-radius);white-space:normal;word-break:break-word;box-shadow:2px 2px 4px -2px rgba(0,0,0,.2)}.vxe-tooltip--wrapper.theme--light .vxe-tooltip--body{background-color:var(--vxe-ui-layout-background-color);border:1px solid var(--vxe-ui-input-border-color)}.vxe-tooltip--wrapper.theme--light.placement--top .vxe-tooltip--arrow{border-top-color:var(--vxe-ui-input-border-color)}.vxe-tooltip--wrapper.theme--light.placement--top .vxe-tooltip--arrow:before{border-top-color:var(--vxe-ui-layout-background-color)}.vxe-tooltip--wrapper.theme--light.placement--bottom .vxe-tooltip--arrow{border-bottom-color:var(--vxe-ui-input-border-color)}.vxe-tooltip--wrapper.theme--light.placement--bottom .vxe-tooltip--arrow:before{border-bottom-color:var(--vxe-ui-layout-background-color)}.vxe-tooltip--wrapper.theme--dark .vxe-tooltip--body{background:var(--vxe-ui-tooltip-dark-background-color);color:var(--vxe-ui-tooltip-dark-color)}.vxe-tooltip--wrapper.theme--dark.placement--top .vxe-tooltip--arrow{border-top-color:var(--vxe-ui-tooltip-dark-background-color)}.vxe-tooltip--wrapper.theme--dark.placement--top .vxe-tooltip--arrow:before{border-top-color:var(--vxe-ui-tooltip-dark-background-color)}.vxe-tooltip--wrapper.theme--dark.placement--bottom .vxe-tooltip--arrow{border-bottom-color:var(--vxe-ui-tooltip-dark-background-color)}.vxe-tooltip--wrapper.theme--dark.placement--bottom .vxe-tooltip--arrow:before{border-bottom-color:var(--vxe-ui-tooltip-dark-background-color)}
+.vxe-tooltip--wrapper{display:none;position:absolute;top:-100%;left:-100%;font-size:12px;color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family);pointer-events:none}.vxe-tooltip--wrapper.is--visible{display:inline-block}.vxe-tooltip--wrapper.is--arrow .vxe-tooltip--arrow{display:block}.vxe-tooltip--wrapper.is--enterable:after{content:"";position:absolute;left:0;width:100%;height:6px;background-color:transparent}.vxe-tooltip--wrapper.is--enterable .vxe-tooltip--body{pointer-events:all}.vxe-tooltip--wrapper .vxe-tooltip--content,.vxe-tooltip--wrapper .vxe-tooltip--scrollbar-content-view{padding:8px 12px;width:-moz-max-content;width:max-content;max-width:600px;max-height:800px;white-space:pre-line;border-radius:var(--vxe-ui-base-border-radius);overflow:auto}.vxe-tooltip--wrapper .vxe-tooltip--arrow{display:none;position:absolute;border-color:transparent;border-width:6px;border-style:solid;left:50%;transform:translateX(-6px)}.vxe-tooltip--wrapper .vxe-tooltip--arrow:before{content:"";position:absolute;border-color:transparent;border-width:5px;border-style:solid;left:-5px}.vxe-tooltip--wrapper.placement--top.is--arrow{padding-bottom:6px}.vxe-tooltip--wrapper.placement--top.is--enterable:after{bottom:-6px}.vxe-tooltip--wrapper.placement--top .vxe-tooltip--arrow{bottom:-11px}.vxe-tooltip--wrapper.placement--top .vxe-tooltip--arrow:before{top:-7px}.vxe-tooltip--wrapper.placement--bottom.is--arrow{padding-top:6px}.vxe-tooltip--wrapper.placement--bottom.is--enterable:after{top:-6px}.vxe-tooltip--wrapper.placement--bottom .vxe-tooltip--arrow{top:-11px}.vxe-tooltip--wrapper.placement--bottom .vxe-tooltip--arrow:before{top:-3px}.vxe-tooltip--body{position:relative;border-radius:var(--vxe-ui-base-border-radius);white-space:normal;word-break:break-word;box-shadow:2px 2px 4px -2px rgba(0,0,0,.2)}.vxe-tooltip--wrapper.theme--light .vxe-tooltip--body{background-color:var(--vxe-ui-layout-background-color);border:1px solid var(--vxe-ui-input-border-color)}.vxe-tooltip--wrapper.theme--light.placement--top .vxe-tooltip--arrow{border-top-color:var(--vxe-ui-input-border-color)}.vxe-tooltip--wrapper.theme--light.placement--top .vxe-tooltip--arrow:before{border-top-color:var(--vxe-ui-layout-background-color)}.vxe-tooltip--wrapper.theme--light.placement--bottom .vxe-tooltip--arrow{border-bottom-color:var(--vxe-ui-input-border-color)}.vxe-tooltip--wrapper.theme--light.placement--bottom .vxe-tooltip--arrow:before{border-bottom-color:var(--vxe-ui-layout-background-color)}.vxe-tooltip--wrapper.theme--dark .vxe-tooltip--body{background:var(--vxe-ui-tooltip-dark-background-color);color:var(--vxe-ui-tooltip-dark-color)}.vxe-tooltip--wrapper.theme--dark.placement--top .vxe-tooltip--arrow{border-top-color:var(--vxe-ui-tooltip-dark-background-color)}.vxe-tooltip--wrapper.theme--dark.placement--top .vxe-tooltip--arrow:before{border-top-color:var(--vxe-ui-tooltip-dark-background-color)}.vxe-tooltip--wrapper.theme--dark.placement--bottom .vxe-tooltip--arrow{border-bottom-color:var(--vxe-ui-tooltip-dark-background-color)}.vxe-tooltip--wrapper.theme--dark.placement--bottom .vxe-tooltip--arrow:before{border-bottom-color:var(--vxe-ui-tooltip-dark-background-color)}

package/es/tree/src/tree.js

@@ -6,13 +6,13 @@ import { createComponentLog } from '../../ui/src/log';
 import { getSlotVNs } from '../../ui/src/vn';
 import { crossTreeDragNodeGlobal, getCrossTreeDragNodeInfo } from './store';
 import { toCssUnit, isScale, getPaddingTopBottomSize, addClass, removeClass, getTpImg, hasControlKey, getEventTargetNode, hasClass } from '../../ui/src/dom';
-import { isEnableConf, enModelValue, deModelValue, getText, getDefaultConfig } from '../../ui/src/utils';
+import { isEnableConf, enModelValue, deModelValue, getText } from '../../ui/src/utils';
 import { moveRowAnimateToTb, clearRowAnimate } from '../../ui/src/anime';
 import VxeLoadingComponent from '../../loading';
 import VxeTooltipComponent from '../../tooltip';
 const { warnLog, errLog } = createComponentLog('tree');
-const { menus, scrollbarUtils, getConfig, getI18n, getIcon } = VxeUI;
-const { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } = scrollbarUtils;
+const { menus, getConfig, getI18n, getIcon, baseUtils } = VxeUI;
+const { getDefVal } = baseUtils;
 let crossTreeDragNodeObj = null;
 /**
  * 生成节点的唯一主键
@@ -567,7 +567,9 @@ function createInternalData() {
 export default {
     name: 'VxeTree',
     mixins: [
-        globalMixins.sizeMixin
+        globalMixins.sizeMixin,
+        globalMixins.vScrollbarMixin,
+        globalMixins.initVScrollbarMixin
     ],
     props: {
         data: Array,
@@ -699,7 +701,7 @@ export default {
         virtualYConfig: Object,
         useScrollbar: {
             type: Boolean,
-            default: () => getDefaultConfig(getConfig().tree.useScrollbar, getConfig().useScrollbar)
+            default: () => getDefVal(getConfig().tree.useScrollbar, getConfig().useScrollbar)
         },
         scrollbarConfig: Object
     },
@@ -713,7 +715,7 @@ export default {
         const xID = XEUtils.uniqueId();
         const reactData = createReactData();
         return Object.assign(Object.assign({}, {}), { xID,
-            reactData, crossTreeDragNodeInfo: crossTreeDragNodeGlobal, reFlag: 0, dataFlag: 0 });
+            reactData, crossTreeDragNodeInfo: crossTreeDragNodeGlobal, reLayoutFlag: 0, reScrollFlag: 0, dataFlag: 0 });
     },
     computed: Object.assign(Object.assign({}, {}), { computeTitleField() {
             const $xeTree = this;
@@ -880,37 +882,37 @@ export default {
             const $xeTree = this;
             const scrollbarOpts = $xeTree.computeScrollbarOpts;
             const scrollbarXOpts = $xeTree.computeScrollbarXOpts;
-            return getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height);
+            return getDefVal(getDefVal(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height);
         },
         computeScrollYWidth() {
             const $xeTree = this;
             const scrollbarOpts = $xeTree.computeScrollbarOpts;
             const scrollbarYOpts = $xeTree.computeScrollbarYOpts;
-            return getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width);
+            return getDefVal(getDefVal(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width);
         },
         computeScrollXVisible() {
             const $xeTree = this;
             const scrollbarOpts = $xeTree.computeScrollbarOpts;
             const scrollbarXOpts = $xeTree.computeScrollbarXOpts;
-            return getDefaultConfig(scrollbarXOpts.visible, scrollbarOpts.visible);
+            return getDefVal(scrollbarXOpts.visible, scrollbarOpts.visible);
         },
         computeScrollYVisible() {
             const $xeTree = this;
             const scrollbarOpts = $xeTree.computeScrollbarOpts;
             const scrollbarYOpts = $xeTree.computeScrollbarYOpts;
-            return getDefaultConfig(scrollbarYOpts.visible, scrollbarOpts.visible);
+            return getDefVal(scrollbarYOpts.visible, scrollbarOpts.visible);
         },
         computeScrollXAutoHide() {
             const $xeTree = this;
             const scrollbarOpts = $xeTree.computeScrollbarOpts;
             const scrollbarXOpts = $xeTree.computeScrollbarXOpts;
-            return getDefaultConfig(getDefaultConfig(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+            return getDefVal(getDefVal(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
         },
         computeScrollYAutoHide() {
             const $xeTree = this;
             const scrollbarOpts = $xeTree.computeScrollbarOpts;
             const scrollbarYOpts = $xeTree.computeScrollbarYOpts;
-            return getDefaultConfig(getDefaultConfig(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+            return getDefVal(getDefVal(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
         },
         computeScrollbarWrapperClss() {
             const $xeTree = this;
@@ -949,6 +951,11 @@ export default {
             const $xeTree = this;
             $xeTree.$emit(type, createEvent(evnt, { $tree: $xeTree }, params));
         },
+        getScrollViewElem() {
+            const $xeTree = this;
+            const viewEl = $xeTree.$refs.refVirtualWrapper;
+            return viewEl || null;
+        },
         getNodeId(node) {
             const $xeTree = this;
             if (!node) {
@@ -1566,8 +1573,14 @@ export default {
         },
         updateScrollbar() {
             const $xeTree = this;
-            $xeTree.updateThumbSize();
-            $xeTree.updateThumbOffset();
+            const isVScrollbar = $xeTree.computeIsVScrollbar;
+            if (isVScrollbar) {
+                return $xeTree.$nextTick().then(() => {
+                    $xeTree.updateThumbSize();
+                    $xeTree.updateThumbOffset();
+                });
+            }
+            return Promise.resolve();
         },
         /**
          * 重新计算列表
@@ -1593,11 +1606,11 @@ export default {
                     const parentPaddingSize = getPaddingTopBottomSize(parentEl);
                     reactData.parentHeight = Math.max(headHeight + footHeight + rowHeight, parentEl.clientHeight - parentPaddingSize - headHeight - footHeight);
                 }
-                $xeTree.updateScrollbar();
                 $xeTree.updateHeight();
                 return $xeTree.computeScrollLoad().then(() => {
                     $xeTree.updateHeight();
                     $xeTree.updateYSpace();
+                    $xeTree.updateScrollbar();
                 });
             }
             return $xeTree.$nextTick();
@@ -1633,7 +1646,7 @@ export default {
             const $xeTree = this;
             const reactData = $xeTree.reactData;
             const internalData = $xeTree.internalData;
-            const scrollBodyElem = evnt.target;
+            const scrollBodyElem = evnt.currentTarget;
             const scrollTop = scrollBodyElem.scrollTop;
             const scrollLeft = scrollBodyElem.scrollLeft;
             const isX = scrollLeft !== internalData.lastScrollLeft;
@@ -3274,183 +3287,26 @@ export default {
             }
         },
         // 滚动条
-        updateThumbSize() {
-            const $xeTree = this;
-            const reactData = $xeTree.reactData;
-            const viewEl = $xeTree.$refs.refVirtualWrapper;
-            if (!viewEl) {
-                return;
-            }
-            if (!viewEl.clientHeight || !viewEl.clientHeight) {
-                return;
-            }
-            const trackXEl = $xeTree.$refs.refTrackXElem;
-            const xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
-            const thumbXElem = $xeTree.$refs.refThumbXElem;
-            if (thumbXElem) {
-                thumbXElem.style.width = xThumbWidth + 'px';
-            }
-            reactData.xThumbWidth = xThumbWidth;
-            const trackYEl = $xeTree.$refs.refTrackYElem;
-            const yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
-            const thumbYElem = $xeTree.$refs.refThumbYElem;
-            if (thumbYElem) {
-                thumbYElem.style.height = yThumbHeight + 'px';
-            }
-            reactData.yThumbHeight = yThumbHeight;
-        },
-        updateThumbOffset() {
-            const $xeTree = this;
-            const reactData = $xeTree.reactData;
-            const internalData = $xeTree.internalData;
-            const viewEl = $xeTree.$refs.refVirtualWrapper;
-            if (!viewEl) {
-                return;
-            }
-            if (!viewEl.clientHeight || !viewEl.clientHeight) {
-                return;
-            }
-            const { xThumbWidth, yThumbHeight } = reactData;
-            const trackXEl = $xeTree.$refs.refTrackXElem;
-            const thumbXElem = $xeTree.$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 = $xeTree.$refs.refTrackYElem;
-            const thumbYElem = $xeTree.$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 $xeTree = this;
-            const reactData = $xeTree.reactData;
-            const trackEl = evnt.currentTarget;
-            if (trackEl !== evnt.target) {
-                return;
-            }
-            const viewEl = $xeTree.$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 $xeTree = this;
-            const reactData = $xeTree.reactData;
-            const trackEl = evnt.currentTarget;
-            if (trackEl !== evnt.target) {
-                return;
-            }
-            const viewEl = $xeTree.$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 $xeTree = this;
-            const reactData = $xeTree.reactData;
-            const internalData = $xeTree.internalData;
-            const thumbEl = evnt.currentTarget;
-            internalData.isThumbDrag = true;
-            thumbEl.setPointerCapture(evnt.pointerId);
-            const viewEl = $xeTree.$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 $xeTree = this;
-            const reactData = $xeTree.reactData;
-            const internalData = $xeTree.internalData;
-            const thumbEl = evnt.currentTarget;
-            if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
-                return;
-            }
-            const { isThumbDrag, thumbDragOffset } = internalData;
-            if (isThumbDrag) {
-                const viewEl = $xeTree.$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 $xeTree = this;
-            const internalData = $xeTree.internalData;
-            const thumbEl = evnt.currentTarget;
-            thumbEl.releasePointerCapture(evnt.pointerId);
-            internalData.isThumbDrag = false;
-        },
-        pointerdownThumbYEvent(evnt) {
+        bindScrollbarResize() {
             const $xeTree = this;
-            const reactData = $xeTree.reactData;
             const internalData = $xeTree.internalData;
-            const thumbEl = evnt.currentTarget;
-            internalData.isThumbDrag = true;
-            thumbEl.setPointerCapture(evnt.pointerId);
-            const viewEl = $xeTree.$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 $xeTree = this;
-            const reactData = $xeTree.reactData;
-            const internalData = $xeTree.internalData;
-            const thumbEl = evnt.currentTarget;
-            if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
-                return;
-            }
-            const { isThumbDrag, thumbDragOffset } = internalData;
-            if (isThumbDrag) {
-                const viewEl = $xeTree.$refs.refVirtualWrapper;
-                if (!viewEl) {
-                    return;
+            const isVScrollbar = $xeTree.computeIsVScrollbar;
+            const { scrollObserver } = internalData;
+            if (isVScrollbar) {
+                if (!scrollObserver) {
+                    const el = $xeTree.$refs.refElem;
+                    const viewInnerEl = $xeTree.$refs.refVirtualSpaceElem;
+                    const scrollObserver = globalResize.create(() => {
+                        $xeTree.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);
             }
         },
         //
@@ -3793,9 +3649,10 @@ export default {
             const props = $xeTree;
             const slots = $xeTree.$scopedSlots;
             const reactData = $xeTree.reactData;
-            const { loading, trigger, showLine, useScrollbar } = props;
+            const { loading, trigger, showLine } = props;
             const { bodyHeight, topSpaceHeight, treeList, tooltipStore, xThumbWidth, yThumbHeight } = reactData;
             const vSize = $xeTree.computeSize;
+            const isVScrollbar = $xeTree.computeIsVScrollbar;
             const radioOpts = $xeTree.computeRadioOpts;
             const checkboxOpts = $xeTree.computeCheckboxOpts;
             const loadingOpts = $xeTree.computeLoadingOpts;
@@ -3824,17 +3681,17 @@ export default {
                 ref: 'refElem',
                 class: [
                     'vxe-tree',
-                    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'}` : '',
                     {
                         [`size--${vSize}`]: vSize,
                         'show--line': showLine,
-                        '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,
                         'checkbox--highlight': checkboxOpts.highlight,
@@ -3862,6 +3719,7 @@ export default {
                     }
                 }, [
                     h('div', {
+                        ref: 'refVirtualSpaceElem',
                         class: 'vxe-tree--y-space',
                         style: {
                             height: bodyHeight ? `${bodyHeight}px` : ''
@@ -3884,7 +3742,7 @@ export default {
                 /**
                  * 滚动条
                  */
-                useScrollbar
+                isVScrollbar
                     ? h('div', {
                         class: scrollbarWrapperClss
                     }, [
@@ -4021,45 +3879,56 @@ export default {
         },
         height() {
             const $xeTree = this;
-            $xeTree.reFlag++;
+            $xeTree.reLayoutFlag++;
         },
         minHeight() {
             const $xeTree = this;
-            $xeTree.reFlag++;
+            $xeTree.reLayoutFlag++;
         },
         maxHeight() {
             const $xeTree = this;
-            $xeTree.reFlag++;
+            $xeTree.reLayoutFlag++;
         },
-        useScrollbar() {
+        computeIsVScrollbar() {
             const $xeTree = this;
-            $xeTree.reFlag++;
+            $xeTree.$nextTick(() => {
+                $xeTree.bindScrollbarResize();
+                $xeTree.$nextTick(() => {
+                    $xeTree.reLayoutFlag++;
+                });
+            });
         },
         computeScrollYWidth() {
             const $xeTree = this;
-            $xeTree.reFlag++;
+            $xeTree.reLayoutFlag++;
         },
         computeScrollXHeight() {
             const $xeTree = this;
-            $xeTree.reFlag++;
+            $xeTree.reLayoutFlag++;
         },
         computeScrollXVisible() {
             const $xeTree = this;
             $xeTree.$nextTick(() => {
-                $xeTree.reFlag++;
+                $xeTree.reLayoutFlag++;
             });
         },
         computeScrollYVisible() {
             const $xeTree = this;
             $xeTree.$nextTick(() => {
-                $xeTree.reFlag++;
+                $xeTree.reLayoutFlag++;
             });
         },
-        reFlag() {
+        reLayoutFlag() {
             const $xeTree = this;
             $xeTree.recalculate().then(() => {
                 $xeTree.recalculate();
             });
+        },
+        reScrollFlag() {
+            const $xeTree = this;
+            $xeTree.updateScrollbar().then(() => {
+                $xeTree.updateScrollbar();
+            });
         }
     },
     created() {
@@ -4074,7 +3943,7 @@ export default {
         const $xeTree = this;
         const props = $xeTree;
         const internalData = $xeTree.internalData;
-        const { transform, drag, menuConfig, showOverflow, lazy, loadMethod, autoResize, useScrollbar } = props;
+        const { transform, drag, menuConfig, showOverflow, lazy, loadMethod, autoResize } = props;
         const dragOpts = $xeTree.computeDragOpts;
         if (!showOverflow) {
             errLog('vxe.error.errProp', ['show-overflow=false', 'show-overflow=true']);
@@ -4095,25 +3964,12 @@ export default {
         if (menuConfig && !VxeUIContextMenu) {
             errLog('vxe.error.reqComp', ['vxe-context-menu']);
         }
-        const el = $xeTree.$refs.refElem;
-        if (useScrollbar) {
-            const viewInnerEl = $xeTree.$refs.refVirtualBody;
-            const scrollObserver = globalResize.create(() => {
-                $xeTree.updateScrollbar();
-            });
-            if (el) {
-                scrollObserver.observe(el);
-            }
-            if (viewInnerEl) {
-                scrollObserver.observe(viewInnerEl);
-            }
-            internalData.scrollObserver = scrollObserver;
-        }
         if (autoResize) {
+            const el = $xeTree.$refs.refElem;
             const parentEl = $xeTree.getParentElem();
             const resizeObserver = globalResize.create(() => {
                 if (props.autoResize) {
-                    $xeTree.reFlag++;
+                    $xeTree.reLayoutFlag++;
                 }
             });
             if (el) {
@@ -4124,9 +3980,10 @@ export default {
             }
             internalData.resizeObserver = resizeObserver;
         }
-        $xeTree.reFlag++;
+        $xeTree.reLayoutFlag++;
+        $xeTree.bindScrollbarResize();
         globalEvents.on($xeTree, 'resize', () => {
-            $xeTree.reFlag++;
+            $xeTree.reLayoutFlag++;
         });
     },
     beforeDestroy() {

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 = "3.20.8";
+export const version = "3.20.10";
 VxeUI.uiVersion = version;
 VxeUI.dynamicApp = dynamicApp;
 export function config(options) {

package/es/ui/src/log.js

@@ -1,6 +1,6 @@
 import { VxeUI } from '@vxe-ui/core';
 const { log } = VxeUI;
-const uiVersion = `ui v${"3.20.8"}`;
+const uiVersion = `ui v${"3.20.10"}`;
 export function createComponentLog(name) {
     const tableVersion = VxeUI.tableVersion ? `table v${VxeUI.tableVersion}` : '';
     const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';