vxe-pc-ui 4.20.8 → 4.20.10

package/es/tabs/src/tabs.js

@@ -1,6 +1,6 @@
 import { ref, h, reactive, inject, provide, computed, onUnmounted, watch, nextTick, onMounted } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
-import { VxeUI, useSize } from '../../ui';
+import { VxeUI, useFns } from '../../ui';
 import { getSlotVNs } from '../../ui/src/vn';
 import { toCssUnit, addClass, removeClass } from '../../ui/src/dom';
 import { isEnableConf } from '../../ui/src/utils';
@@ -72,7 +72,8 @@ export default defineVxeComponent({
         const { slots, emit } = context;
         const xID = XEUtils.uniqueId();
         const $xeParentTabs = inject('$xeTabs', null);
-        const { computeSize } = useSize(props);
+        const { computeSize } = useFns.useSize(props);
+        const { computeIsVScrollbar } = useFns.useVScrollbar(props);
         const refElem = ref();
         const refHeadWrapperElem = ref();
         const refHeadPrevElem = ref();
@@ -744,13 +745,13 @@ export default defineVxeComponent({
             ]);
         };
         const renderTabPane = (item) => {
-            const { useScrollbar } = props;
             const { initNames, activeName } = reactData;
             const { name, slots } = item;
             const defaultSlot = slots ? slots.default : null;
             const scrollbarProps = computeScrollbarProps.value;
+            const isVScrollbar = computeIsVScrollbar.value;
             if (name && initNames.includes(name)) {
-                return useScrollbar
+                return isVScrollbar
                     ? h(VxeScrollbarComponent, Object.assign({ key: `${name}`, class: ['vxe-tabs-pane--scrollbar-item', {
                                 'is--visible': activeName === name
                             }] }, scrollbarProps), {

package/es/tooltip/src/tooltip.js

@@ -1,7 +1,7 @@
 import { h, ref, nextTick, onBeforeUnmount, onMounted, computed, reactive, watch } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
-import { VxeUI, useSize } from '../../ui';
+import { VxeUI, useFns } from '../../ui';
 import { getLastZIndex, nextZIndex } from '../../ui/src/utils';
 import { getPopupAppendElement, toCssUnit, updatePanelPlacement } from '../../ui/src/dom';
 import { getSlotVNs } from '../../ui/src/vn';
@@ -129,7 +129,8 @@ export default defineVxeComponent({
     setup(props, context) {
         const { slots, emit } = context;
         const xID = XEUtils.uniqueId();
-        const { computeSize } = useSize(props);
+        const { computeSize } = useFns.useSize(props);
+        const { computeIsVScrollbar } = useFns.useVScrollbar(props);
         const reactData = reactive(createReactData());
         const internalData = createInternalData();
         const refElem = ref();
@@ -402,8 +403,9 @@ export default defineVxeComponent({
         };
         Object.assign($xeTooltip, tooltipMethods, tooltipPrivateMethods);
         const renderContent = () => {
-            const { useScrollbar, theme, useHtml, useHTML } = props;
+            const { theme, useHtml, useHTML } = props;
             const { tipContent } = reactData;
+            const isVScrollbar = computeIsVScrollbar.value;
             const wrapperStyle = computeWrapperStyle.value;
             const contentSlot = slots.content;
             const contVNs = [];
@@ -423,7 +425,7 @@ export default defineVxeComponent({
                     key: 'cd'
                 }, `${tipContent}`));
             }
-            if (useScrollbar) {
+            if (isVScrollbar) {
                 return h(VxeScrollbarComponent, {
                     key: 5,
                     ref: contentScrollbar,
@@ -497,7 +499,7 @@ export default defineVxeComponent({
         onMounted(() => {
             const $scrollbar = contentScrollbar.value;
             if ($scrollbar) {
-                const viewEl = $scrollbar.getViewElem();
+                const viewEl = $scrollbar.getScrollViewElem();
                 if (viewEl) {
                     viewEl.addEventListener('wheel', 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

@@ -1,19 +1,19 @@
 import { ref, h, reactive, computed, watch, onBeforeUnmount, nextTick, onMounted, provide } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
-import { VxeUI, domUtils, createEvent, useSize, globalEvents, globalResize, renderEmptyElement } from '../../ui';
+import { VxeUI, domUtils, createEvent, useFns, globalEvents, globalResize, renderEmptyElement } from '../../ui';
 import { calcTreeLine, getItemCacheObj } from './util';
 import { createComponentLog } from '../../ui/src/log';
 import { getCrossTreeDragNodeInfo } from './store';
 import XEUtils from 'xe-utils';
 import { getSlotVNs } from '../../ui/src/vn';
 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;
 /**
  * 生成节点的唯一主键
  */
@@ -218,7 +218,7 @@ export default defineVxeComponent({
         virtualYConfig: Object,
         useScrollbar: {
             type: Boolean,
-            default: () => getDefaultConfig(getConfig().tree.useScrollbar, getConfig().useScrollbar)
+            default: () => getDefVal(getConfig().tree.useScrollbar, getConfig().useScrollbar)
         },
         scrollbarConfig: Object
     },
@@ -246,22 +246,20 @@ export default defineVxeComponent({
     setup(props, context) {
         const { emit, slots } = context;
         const xID = XEUtils.uniqueId();
-        const { computeSize } = useSize(props);
         const refElem = ref();
         const refHeaderWrapperElem = ref();
         const refFooterWrapperElem = ref();
         const refVirtualWrapper = ref();
+        const refVirtualSpaceElem = ref();
         const refVirtualBody = ref();
-        const refTrackXElem = ref();
-        const refTrackYElem = ref();
-        const refThumbXElem = ref();
-        const refThumbYElem = ref();
         const refDragNodeLineElem = ref();
         const refDragTipElem = ref();
         const refTooltip = ref();
         const crossTreeDragNodeInfo = getCrossTreeDragNodeInfo();
         const internalData = createInternalData();
         const reactData = reactive(createReactData());
+        const { computeSize } = useFns.useSize(props);
+        const { computeIsVScrollbar } = useFns.useVScrollbar(props);
         const refMaps = {
             refElem
         };
@@ -385,32 +383,32 @@ export default defineVxeComponent({
         const computeScrollXHeight = computed(() => {
             const scrollbarOpts = computeScrollbarOpts.value;
             const scrollbarXOpts = computeScrollbarXOpts.value;
-            return getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height);
+            return getDefVal(getDefVal(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height);
         });
         const computeScrollYWidth = computed(() => {
             const scrollbarOpts = computeScrollbarOpts.value;
             const scrollbarYOpts = computeScrollbarYOpts.value;
-            return getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width);
+            return getDefVal(getDefVal(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width);
         });
         const computeScrollXVisible = computed(() => {
             const scrollbarOpts = computeScrollbarOpts.value;
             const scrollbarXOpts = computeScrollbarXOpts.value;
-            return getDefaultConfig(scrollbarXOpts.visible, scrollbarOpts.visible);
+            return getDefVal(scrollbarXOpts.visible, scrollbarOpts.visible);
         });
         const computeScrollYVisible = computed(() => {
             const scrollbarOpts = computeScrollbarOpts.value;
             const scrollbarYOpts = computeScrollbarYOpts.value;
-            return getDefaultConfig(scrollbarYOpts.visible, scrollbarOpts.visible);
+            return getDefVal(scrollbarYOpts.visible, scrollbarOpts.visible);
         });
         const computeScrollXAutoHide = computed(() => {
             const scrollbarOpts = computeScrollbarOpts.value;
             const scrollbarXOpts = computeScrollbarXOpts.value;
-            return getDefaultConfig(getDefaultConfig(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+            return getDefVal(getDefVal(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
         });
         const computeScrollYAutoHide = computed(() => {
             const scrollbarOpts = computeScrollbarOpts.value;
             const scrollbarYOpts = computeScrollbarYOpts.value;
-            return getDefaultConfig(getDefaultConfig(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+            return getDefVal(getDefVal(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
         });
         const computeScrollbarWrapperClss = computed(() => {
             const { yThumbHeight, xThumbWidth } = reactData;
@@ -456,6 +454,7 @@ export default defineVxeComponent({
             getRefMaps: () => refMaps,
             getComputeMaps: () => computeMaps
         };
+        const { refTrackXElem, refTrackYElem, refThumbXElem, refThumbYElem, updateThumbSize, updateThumbOffset, clickTrackXEvent, clickTrackYEvent, pointerdownThumbXEvent, pointermoveThumbXEvent, cleatPointerThumbEvent, pointerdownThumbYEvent, pointermoveThumbYEvent } = useFns.useInitVScrollbar($xeTree);
         const getNodeId = (node) => {
             if (!node) {
                 return '';
@@ -955,8 +954,14 @@ export default defineVxeComponent({
             });
         };
         const updateScrollbar = () => {
-            updateThumbSize();
-            updateThumbOffset();
+            const isVScrollbar = computeIsVScrollbar.value;
+            if (isVScrollbar) {
+                return nextTick().then(() => {
+                    updateThumbSize();
+                    updateThumbOffset();
+                });
+            }
+            return Promise.resolve();
         };
         /**
          * 重新计算列表
@@ -979,11 +984,11 @@ export default defineVxeComponent({
                     const parentPaddingSize = getPaddingTopBottomSize(parentEl);
                     reactData.parentHeight = Math.max(headHeight + footHeight + rowHeight, parentEl.clientHeight - parentPaddingSize - headHeight - footHeight);
                 }
-                updateScrollbar();
                 updateHeight();
                 return computeScrollLoad().then(() => {
                     updateHeight();
                     updateYSpace();
+                    updateScrollbar();
                 });
             }
             return nextTick();
@@ -1008,7 +1013,7 @@ export default defineVxeComponent({
             }
         };
         const scrollEvent = (evnt) => {
-            const scrollBodyElem = evnt.target;
+            const scrollBodyElem = evnt.currentTarget;
             const scrollTop = scrollBodyElem.scrollTop;
             const scrollLeft = scrollBodyElem.scrollLeft;
             const isX = scrollLeft !== internalData.lastScrollLeft;
@@ -1742,6 +1747,10 @@ export default defineVxeComponent({
         };
         const treeMethods = {
             dispatchEvent,
+            getScrollViewElem() {
+                const viewEl = refVirtualWrapper.value;
+                return viewEl || null;
+            },
             getNodeId,
             getNodeById(nodeid) {
                 const { nodeMaps } = internalData;
@@ -2996,160 +3005,24 @@ export default defineVxeComponent({
                 hideDropTip();
             }
         };
-        const updateThumbSize = () => {
-            const viewEl = refVirtualWrapper.value;
-            if (!viewEl) {
-                return;
-            }
-            if (!viewEl.clientHeight || !viewEl.clientHeight) {
-                return;
-            }
-            const trackXEl = refTrackXElem.value;
-            const xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
-            const thumbXElem = refThumbXElem.value;
-            if (thumbXElem) {
-                thumbXElem.style.width = xThumbWidth + 'px';
-            }
-            reactData.xThumbWidth = xThumbWidth;
-            const trackYEl = refTrackYElem.value;
-            const yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
-            const thumbYElem = refThumbYElem.value;
-            if (thumbYElem) {
-                thumbYElem.style.height = yThumbHeight + 'px';
-            }
-            reactData.yThumbHeight = yThumbHeight;
-        };
-        const updateThumbOffset = () => {
-            const viewEl = refVirtualWrapper.value;
-            if (!viewEl) {
-                return;
-            }
-            if (!viewEl.clientHeight || !viewEl.clientHeight) {
-                return;
-            }
-            const { xThumbWidth, yThumbHeight } = reactData;
-            const trackXEl = refTrackXElem.value;
-            const thumbXElem = refThumbXElem.value;
-            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 = refTrackYElem.value;
-            const thumbYElem = refThumbYElem.value;
-            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)`;
-            }
-        };
-        const clickTrackXEvent = (evnt) => {
-            const trackEl = evnt.currentTarget;
-            if (trackEl !== evnt.target) {
-                return;
-            }
-            const viewEl = refVirtualWrapper.value;
-            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'
-            });
-        };
-        const clickTrackYEvent = (evnt) => {
-            const trackEl = evnt.currentTarget;
-            if (trackEl !== evnt.target) {
-                return;
-            }
-            const viewEl = refVirtualWrapper.value;
-            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'
-            });
-        };
-        const pointerdownThumbXEvent = (evnt) => {
-            const thumbEl = evnt.currentTarget;
-            internalData.isThumbDrag = true;
-            thumbEl.setPointerCapture(evnt.pointerId);
-            const viewEl = refVirtualWrapper.value;
-            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;
-        };
-        const pointermoveThumbXEvent = (evnt) => {
-            const thumbEl = evnt.currentTarget;
-            if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
-                return;
-            }
-            const { isThumbDrag, thumbDragOffset } = internalData;
-            if (isThumbDrag) {
-                const viewEl = refVirtualWrapper.value;
-                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);
-            }
-        };
-        const cleatPointerThumbEvent = (evnt) => {
-            const thumbEl = evnt.currentTarget;
-            thumbEl.releasePointerCapture(evnt.pointerId);
-            internalData.isThumbDrag = false;
-        };
-        const pointerdownThumbYEvent = (evnt) => {
-            const thumbEl = evnt.currentTarget;
-            internalData.isThumbDrag = true;
-            thumbEl.setPointerCapture(evnt.pointerId);
-            const viewEl = refVirtualWrapper.value;
-            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;
-        };
-        const pointermoveThumbYEvent = (evnt) => {
-            const thumbEl = evnt.currentTarget;
-            if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
-                return;
-            }
-            const { isThumbDrag, thumbDragOffset } = internalData;
-            if (isThumbDrag) {
-                const viewEl = refVirtualWrapper.value;
-                if (!viewEl) {
-                    return;
+        const bindScrollbarResize = () => {
+            const isVScrollbar = computeIsVScrollbar.value;
+            const { scrollObserver } = internalData;
+            if (isVScrollbar) {
+                if (!scrollObserver) {
+                    const el = refElem.value;
+                    const viewInnerEl = refVirtualSpaceElem.value;
+                    const scrollObserver = globalResize.create(() => {
+                        reScrollFlag.value++;
+                    });
+                    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);
             }
         };
         Object.assign($xeTree, treeMethods, treePrivateMethods);
@@ -3461,9 +3334,10 @@ export default defineVxeComponent({
             return renderEmptyElement($xeTree);
         };
         const renderVN = () => {
-            const { loading, trigger, showLine, useScrollbar } = props;
+            const { loading, trigger, showLine } = props;
             const { bodyHeight, topSpaceHeight, treeList, tooltipStore, xThumbWidth, yThumbHeight } = reactData;
             const vSize = computeSize.value;
+            const isVScrollbar = computeIsVScrollbar.value;
             const radioOpts = computeRadioOpts.value;
             const checkboxOpts = computeCheckboxOpts.value;
             const loadingOpts = computeLoadingOpts.value;
@@ -3490,17 +3364,17 @@ export default defineVxeComponent({
             }
             return h('div', Object.assign({ 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,
@@ -3523,6 +3397,7 @@ export default defineVxeComponent({
                     onScroll: scrollEvent
                 }, [
                     h('div', {
+                        ref: refVirtualSpaceElem,
                         class: 'vxe-tree--y-space',
                         style: {
                             height: bodyHeight ? `${bodyHeight}px` : ''
@@ -3545,7 +3420,7 @@ export default defineVxeComponent({
                 /**
                  * 滚动条
                  */
-                useScrollbar
+                isVScrollbar
                     ? h('div', {
                         class: scrollbarWrapperClss
                     }, [
@@ -3668,42 +3543,53 @@ export default defineVxeComponent({
         watch(() => props.filterValue, () => {
             triggerSearchEvent(new Event('filter'));
         });
-        const reFlag = ref(0);
+        const reScrollFlag = ref(0);
+        const reLayoutFlag = ref(0);
         watch(() => props.height, () => {
-            reFlag.value++;
+            reLayoutFlag.value++;
         });
         watch(() => props.minHeight, () => {
-            reFlag.value++;
+            reLayoutFlag.value++;
         });
         watch(() => props.maxHeight, () => {
-            reFlag.value++;
+            reLayoutFlag.value++;
         });
-        watch(() => props.useScrollbar, () => {
-            reFlag.value++;
+        watch(computeIsVScrollbar, () => {
+            nextTick(() => {
+                bindScrollbarResize();
+                nextTick(() => {
+                    reLayoutFlag.value++;
+                });
+            });
         });
         watch(computeScrollYWidth, () => {
-            reFlag.value++;
+            reLayoutFlag.value++;
         });
         watch(computeScrollXHeight, () => {
-            reFlag.value++;
+            reLayoutFlag.value++;
         });
         watch(computeScrollXVisible, () => {
             nextTick(() => {
-                reFlag.value++;
+                reLayoutFlag.value++;
             });
         });
         watch(computeScrollYVisible, () => {
             nextTick(() => {
-                reFlag.value++;
+                reLayoutFlag.value++;
             });
         });
-        watch(reFlag, () => {
+        watch(reLayoutFlag, () => {
             recalculate().then(() => {
                 recalculate();
             });
         });
+        watch(reScrollFlag, () => {
+            updateScrollbar().then(() => {
+                updateScrollbar();
+            });
+        });
         onMounted(() => {
-            const { transform, drag, menuConfig, showOverflow, lazy, loadMethod, autoResize, useScrollbar } = props;
+            const { transform, drag, menuConfig, showOverflow, lazy, loadMethod, autoResize } = props;
             const dragOpts = computeDragOpts.value;
             if (!showOverflow) {
                 errLog('vxe.error.errProp', ['show-overflow=false', 'show-overflow=true']);
@@ -3724,25 +3610,12 @@ export default defineVxeComponent({
             if (menuConfig && !VxeUIContextMenu) {
                 errLog('vxe.error.reqComp', ['vxe-context-menu']);
             }
-            const el = refElem.value;
-            if (useScrollbar || autoResize) {
-                const viewInnerEl = refVirtualBody.value;
-                const scrollObserver = globalResize.create(() => {
-                    updateScrollbar();
-                });
-                if (el) {
-                    scrollObserver.observe(el);
-                }
-                if (viewInnerEl) {
-                    scrollObserver.observe(viewInnerEl);
-                }
-                internalData.scrollObserver = scrollObserver;
-            }
             if (autoResize) {
+                const el = refElem.value;
                 const parentEl = getParentElem();
                 const resizeObserver = globalResize.create(() => {
                     if (props.autoResize) {
-                        reFlag.value++;
+                        reLayoutFlag.value++;
                     }
                 });
                 if (el) {
@@ -3753,9 +3626,10 @@ export default defineVxeComponent({
                 }
                 internalData.resizeObserver = resizeObserver;
             }
-            reFlag.value++;
+            reLayoutFlag.value++;
+            bindScrollbarResize();
             globalEvents.on($xeTree, 'resize', () => {
-                reFlag.value++;
+                reLayoutFlag.value++;
             });
         });
         onBeforeUnmount(() => {

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.20.8";
+export const version = "4.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${"4.20.8"}`;
+const uiVersion = `ui v${"4.20.10"}`;
 export function createComponentLog(name) {
     const tableVersion = VxeUI.tableVersion ? `table v${VxeUI.tableVersion}` : '';
     const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';