vxe-pc-ui 4.20.8 → 4.20.10

package/es/list/src/list.js

@@ -1,7 +1,7 @@
 import { h, ref, computed, onBeforeUnmount, watch, reactive, nextTick, onActivated, onMounted } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
-import { VxeUI, useSize, createEvent, renderEmptyElement } from '../../ui';
+import { VxeUI, createEvent, renderEmptyElement } from '../../ui';
 import { getCrossListDragRowInfo } from './store';
 import { isScale, removeClass, addClass, getTpImg, toCssUnit, hasClass } from '../../ui/src/dom';
 import { isEnableConf, getText, enModelValue, deModelValue, getDefaultConfig } from '../../ui/src/utils';
@@ -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, useFns, menus, globalEvents, globalResize } = VxeUI;
 const { warnLog, errLog } = createComponentLog('tree');
 function getRowKeyByField(row, keyField) {
     return row ? ('' + (row[keyField] || '')) : '';
@@ -145,7 +144,6 @@ export default defineVxeComponent({
         const { slots, emit } = context;
         const xID = XEUtils.uniqueId();
         const browseObj = XEUtils.browse();
-        const { computeSize } = useSize(props);
         const reactData = reactive(createReactData());
         const internalData = createInternalData();
         const crossListDragRowInfo = getCrossListDragRowInfo();
@@ -153,13 +151,12 @@ export default defineVxeComponent({
         const refHeaderElem = ref();
         const refFooterElem = ref();
         const refVirtualWrapper = ref();
+        const refVirtualSpaceElem = ref();
         const refVirtualBody = ref();
-        const refTrackXElem = ref();
-        const refTrackYElem = ref();
-        const refThumbXElem = ref();
-        const refThumbYElem = ref();
         const refDragRowLineElem = ref();
         const refDragTipElem = ref();
+        const { computeSize } = useFns.useSize(props);
+        const { computeIsVScrollbar } = useFns.useVScrollbar(props);
         const refMaps = {
             refElem
         };
@@ -171,6 +168,7 @@ export default defineVxeComponent({
             internalData,
             getRefMaps: () => refMaps
         };
+        const { refTrackXElem, refTrackYElem, refThumbXElem, refThumbYElem, updateThumbSize, updateThumbOffset, clickTrackXEvent, clickTrackYEvent, pointerdownThumbXEvent, pointermoveThumbXEvent, cleatPointerThumbEvent, pointerdownThumbYEvent, pointermoveThumbYEvent } = useFns.useInitVScrollbar($xeList);
         const computeRowOpts = computed(() => {
             return Object.assign({}, getConfig().list.rowConfig, props.rowConfig);
         });
@@ -457,7 +455,6 @@ export default defineVxeComponent({
          */
         const refreshScroll = () => {
             const { lastScrollLeft, lastScrollTop } = internalData;
-            updateScrollbar();
             return clearScroll().then(() => {
                 if (lastScrollLeft || lastScrollTop) {
                     internalData.lastScrollLeft = 0;
@@ -467,8 +464,14 @@ export default defineVxeComponent({
             });
         };
         const updateScrollbar = () => {
-            updateThumbSize();
-            updateThumbOffset();
+            const isVScrollbar = computeIsVScrollbar.value;
+            if (isVScrollbar) {
+                return nextTick().then(() => {
+                    updateThumbSize();
+                    updateThumbOffset();
+                });
+            }
+            return Promise.resolve();
         };
         /**
          * 重新计算列表
@@ -487,10 +490,11 @@ export default defineVxeComponent({
                     parentHeight = parentEl.clientHeight - Math.ceil(XEUtils.toNumber(parentStyle.paddingLeft) + XEUtils.toNumber(parentStyle.paddingRight));
                 }
                 reactData.parentHeight = parentHeight;
-                updateScrollbar();
                 updateHeight();
                 if (el.clientWidth && el.clientHeight) {
-                    return computeScrollLoad();
+                    return computeScrollLoad().then(() => {
+                        updateScrollbar();
+                    });
                 }
             }
             return nextTick();
@@ -498,7 +502,7 @@ export default defineVxeComponent({
         const loadYData = (evnt) => {
             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);
@@ -512,7 +516,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;
@@ -1487,6 +1491,10 @@ export default defineVxeComponent({
         };
         const listMethods = {
             dispatchEvent,
+            getScrollViewElem() {
+                const viewEl = refVirtualWrapper.value;
+                return viewEl || null;
+            },
             loadData,
             /**
              * 重新加载数据
@@ -1814,160 +1822,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 { scrollObserver } = internalData;
+            const isVScrollbar = computeIsVScrollbar.value;
+            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($xeList, listMethods, listPrivateMethods);
@@ -2166,12 +2038,13 @@ export default defineVxeComponent({
                     }], rowid: hasKey && keyField ? rowid : undefined }, rowOns), ctVNs);
         };
         const renderVN = () => {
-            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 = computeSize.value;
+            const isVScrollbar = computeIsVScrollbar.value;
             const wrapperStyles = computeWrapperStyles.value;
             const virtualStyles = computeVirtualStyles.value;
             const radioOpts = computeRadioOpts.value;
@@ -2197,17 +2070,17 @@ export default defineVxeComponent({
             }
             return h('div', Object.assign({ 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,
@@ -2253,6 +2126,7 @@ export default defineVxeComponent({
                     onScroll: scrollEvent
                 }, [
                     h('div', {
+                        ref: refVirtualSpaceElem,
                         class: 'vxe-list--y-space',
                         style: {
                             height: bodyHeight ? `${bodyHeight}px` : ''
@@ -2281,7 +2155,7 @@ export default defineVxeComponent({
                 /**
                  * 滚动条
                  */
-                useScrollbar
+                isVScrollbar
                     ? h('div', {
                         class: scrollbarWrapperClss
                     }, [
@@ -2344,43 +2218,54 @@ export default defineVxeComponent({
         watch(dataFlag, () => {
             loadData(props.data || []);
         });
-        const reFlag = ref(0);
+        const reScrollFlag = ref(0);
+        const reLayoutFlag = ref(0);
         watch(() => props.height, () => {
-            reFlag.value++;
+            reLayoutFlag.value++;
         });
         watch(() => props.maxHeight, () => {
-            reFlag.value++;
+            reLayoutFlag.value++;
         });
         watch(() => props.syncResize, () => {
-            reFlag.value++;
+            reLayoutFlag.value++;
         });
-        watch(() => props.useScrollbar, () => {
-            reFlag.value++;
+        watch(computeIsVScrollbar, () => {
+            nextTick(() => {
+                bindScrollbarResize();
+                nextTick(() => {
+                    reLayoutFlag.value++;
+                });
+            });
         });
         watch(computeRowHeight, () => {
-            reFlag.value++;
+            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();
+            });
+        });
         watch(() => props.checkRowKey, () => {
             updateRadioModeValue();
         });
@@ -2403,7 +2288,7 @@ export default defineVxeComponent({
             loadData(props.data || []);
         });
         onMounted(() => {
-            const { showSeq, showRadio, showCheckbox, autoResize, useScrollbar } = props;
+            const { showSeq, showRadio, showCheckbox, autoResize } = props;
             const rowOpts = computeRowOpts.value;
             const { useKey } = rowOpts;
             const isDrag = computeIsDrag.value;
@@ -2425,25 +2310,12 @@ export default defineVxeComponent({
             if (useKey && !keyField) {
                 errLog('vxe.error.reqSupportProp', ['row-config.useKey', 'row-config.keyField']);
             }
-            const el = refElem.value;
-            if (useScrollbar) {
-                const viewInnerEl = refVirtualBody.value;
-                const scrollObserver = globalResize.create(() => {
-                    reFlag.value++;
-                });
-                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) {
@@ -2454,9 +2326,10 @@ export default defineVxeComponent({
                 }
                 internalData.resizeObserver = resizeObserver;
             }
-            reFlag.value++;
+            reLayoutFlag.value++;
+            bindScrollbarResize();
             globalEvents.on($xeList, 'resize', () => {
-                reFlag.value++;
+                reLayoutFlag.value++;
             });
         });
         onBeforeUnmount(() => {

package/es/menu/src/menu.js

@@ -1,7 +1,7 @@
 import { ref, h, reactive, Teleport, inject, resolveComponent, watch, computed, nextTick, onBeforeUnmount, onMounted } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
-import { VxeUI, createEvent, permission, useSize, globalEvents, renderEmptyElement } from '../../ui';
+import { VxeUI, createEvent, permission, globalEvents, renderEmptyElement } from '../../ui';
 import { getPopupContainer, scrollToView, toCssUnit } from '../../ui/src/dom';
 import { getLastZIndex, nextZIndex, isEnableConf, getDefaultConfig } from '../../ui/src/utils';
 import { getSlotVNs } from '../../ui/src/vn';
@@ -9,7 +9,7 @@ import { createComponentLog } from '../../ui/src/log';
 import VxeLoadingComponent from '../../loading';
 import VxeScrollbarComponent from '../../scrollbar';
 const { errLog } = createComponentLog('menu');
-const { menus, getConfig, getIcon } = VxeUI;
+const { menus, useFns, getConfig, getIcon } = VxeUI;
 function createInternalData() {
     return {
         lastActiveTime: 0,
@@ -88,7 +88,8 @@ export default defineVxeComponent({
         const refCollapseElem = ref();
         const refCollapseBodyElem = ref();
         const refCollapseBodyScrollbar = ref();
-        const { computeSize } = useSize(props);
+        const { computeSize } = useFns.useSize(props);
+        const { computeIsVScrollbar } = useFns.useVScrollbar(props);
         const reactData = reactive(createReactData());
         const internalData = createInternalData();
         const refMaps = {
@@ -619,9 +620,10 @@ export default defineVxeComponent({
             ]);
         };
         const renderVN = () => {
-            const { loading, collapseFixed, appendTo, useScrollbar } = props;
+            const { loading, collapseFixed, appendTo } = props;
             const { initialized, menuList, collapseStyle, isEnterCollapse } = reactData;
             const vSize = computeSize.value;
+            const isVScrollbar = computeIsVScrollbar.value;
             const isCollapsed = computeIsCollapsed.value;
             const currBorder = computeCurrBorder.value;
             const varStyle = computeVarStyle.value;
@@ -675,7 +677,7 @@ export default defineVxeComponent({
                                     class: 'vxe-menu--header'
                                 }, headerSlot(stParams))
                                 : renderEmptyElement($xeMenu),
-                            useScrollbar && isEnterCollapse
+                            isVScrollbar && isEnterCollapse
                                 ? h(VxeScrollbarComponent, Object.assign(Object.assign({ ref: refCollapseBodyScrollbar, class: 'vxe-menu--scrollbar-body' }, scrollbarOpts), { viewClassName: 'vxe-menu--scrollbar-body-view' + (viewClassName ? (' ' + viewClassName) : ''), viewInnerClassName: 'vxe-menu--scrollbar-body-inner' + (viewClassName ? (' ' + viewInnerClassName) : '') }), {
                                     default: () => menuList.map(child => renderDefaultChildren(child, menuList))
                                 })

package/es/modal/src/modal.js

@@ -3,7 +3,7 @@ import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
 import { getEventTargetNode, getPopupContainer, getPopupWrapperElement, isScale, toCssUnit } from '../../ui/src/dom';
 import { getLastZIndex, nextZIndex, getSubLastZIndex, nextSubZIndex, getFuncText, handleBooleanDefaultValue, getDefaultConfig } from '../../ui/src/utils';
-import { VxeUI, getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useSize, renderEmptyElement } from '../../ui';
+import { VxeUI, getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useFns, renderEmptyElement } from '../../ui';
 import { getSlotVNs } from '../../ui/src/vn';
 import { createComponentLog } from '../../ui/src/log';
 import { allActiveModals } from './store';
@@ -253,7 +253,8 @@ export default defineVxeComponent({
         const $xeDrawer = inject('$xeDrawer', null);
         const $xeTable = inject('$xeTable', null);
         const $xeForm = inject('$xeForm', null);
-        const { computeSize } = useSize(props);
+        const { computeSize } = useFns.useSize(props);
+        const { computeIsVScrollbar } = useFns.useVScrollbar(props);
         const reactData = reactive(createReactData());
         const internalData = createInternalData();
         const refElem = ref();
@@ -1330,8 +1331,9 @@ export default defineVxeComponent({
             return renderEmptyElement($xeModal);
         };
         const renderBody = () => {
-            const { slots: propSlots = {}, status, message, iconStatus, useScrollbar, useHtml } = props;
+            const { slots: propSlots = {}, status, message, iconStatus, useHtml } = props;
             const content = props.content || message;
+            const isVScrollbar = computeIsVScrollbar.value;
             const isMsg = computeIsMsg.value;
             const scrollbarProps = computeScrollbarProps.value;
             const defaultSlot = slots.default || propSlots.default;
@@ -1348,7 +1350,7 @@ export default defineVxeComponent({
                 ]));
             }
             if (useHtml && !defaultSlot) {
-                contVNs.push(useScrollbar
+                contVNs.push(isVScrollbar
                     ? h(VxeScrollbarComponent, Object.assign({ key: 'shc', class: 'vxe-modal--scrollbar-content' }, scrollbarProps), {
                         default() {
                             return [
@@ -1366,7 +1368,7 @@ export default defineVxeComponent({
                     }));
             }
             else {
-                contVNs.push(useScrollbar
+                contVNs.push(isVScrollbar
                     ? h(VxeScrollbarComponent, Object.assign({ key: 'sdc', class: 'vxe-modal--scrollbar-content' }, scrollbarProps), {
                         default: () => defaultSlot ? getSlotVNs(defaultSlot({ $modal: $xeModal })) : getFuncText(content)
                     })