vxe-pc-ui 4.20.0 → 4.20.2

package/es/layout-body/src/layout-body.js

@@ -2,6 +2,7 @@ import { ref, h, reactive, computed } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
 import { getConfig, useSize, createEvent, renderEmptyElement } from '../../ui';
 import XEUtils from 'xe-utils';
+import { getDefaultConfig } from '../../ui/src/utils';
 import VxeLoadingComponent from '../../loading';
 import VxeScrollbarComponent from '../../scrollbar';
 import VxeUIBacktopComponent from '../../backtop';
@@ -23,7 +24,7 @@ export default defineVxeComponent({
         backtopConfig: Object,
         useScrollbar: {
             type: Boolean,
-            default: () => getConfig().layoutBody.useScrollbar
+            default: () => getDefaultConfig(getConfig().layoutBody.useScrollbar, getConfig().useScrollbar)
         },
         scrollbarConfig: Object,
         size: {
@@ -51,6 +52,23 @@ export default defineVxeComponent({
         const computeScrollbarOpts = computed(() => {
             return Object.assign({}, getConfig().layoutBody.scrollbarConfig, props.scrollbarConfig);
         });
+        const computeScrollbarProps = computed(() => {
+            const { showBacktop } = props;
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const { className, viewClassName, viewInnerClassName } = scrollbarOpts;
+            return {
+                width: scrollbarOpts.width,
+                height: scrollbarOpts.height,
+                autoHide: scrollbarOpts.autoHide,
+                visible: scrollbarOpts.visible,
+                xConfig: scrollbarOpts.xConfig,
+                yConfig: scrollbarOpts.yConfig,
+                className: 'vxe-layout-body--scrollbar' + (className ? (' ' + className) : ''),
+                viewAttrs: Object.assign(Object.assign({}, scrollbarOpts.viewAttrs), { id: showBacktop ? (backtopId || null) : null }),
+                viewClassName: 'vxe-layout-body--scrollbar-view' + (viewClassName ? (' ' + viewClassName) : ''),
+                viewInnerClassName: 'vxe-layout-body--scrollbar-inner' + (viewInnerClassName ? (' ' + viewInnerClassName) : '')
+            };
+        });
         const computeMaps = {
             computeSize
         };
@@ -74,8 +92,7 @@ export default defineVxeComponent({
         const renderVN = () => {
             const { loading, padding, showBacktop, useScrollbar } = props;
             const backtopOpts = computeBacktopOpts.value;
-            const scrollbarOpts = computeScrollbarOpts.value;
-            const { native, xConfig, yConfig, className, viewAttrs, viewClassName, viewInnerClassName } = scrollbarOpts;
+            const scrollbarProps = computeScrollbarProps.value;
             const vSize = computeSize.value;
             const defaultSlot = slots.default;
             const backtopSlot = slots.backtop;
@@ -100,15 +117,7 @@ export default defineVxeComponent({
                     }]
             }, [
                 useScrollbar
-                    ? h(VxeScrollbarComponent, {
-                        native,
-                        xConfig,
-                        yConfig,
-                        className: 'vxe-layout-body--scrollbar' + (className ? (' ' + className) : ''),
-                        viewAttrs: Object.assign(Object.assign({}, viewAttrs), { id: showBacktop ? (backtopId || null) : null }),
-                        viewClassName: 'vxe-layout-body--scrollbar-view' + (viewClassName ? (' ' + viewClassName) : ''),
-                        viewInnerClassName: 'vxe-layout-body--scrollbar-inner' + (viewInnerClassName ? (' ' + viewInnerClassName) : '')
-                    }, {
+                    ? h(VxeScrollbarComponent, scrollbarProps, {
                         default: () => defaultSlot ? defaultSlot({}) : []
                     })
                     : h('div', {

package/es/list/src/list.js

@@ -4,7 +4,7 @@ import XEUtils from 'xe-utils';
 import { VxeUI, getConfig, getIcon, getI18n, domUtils, menus, globalEvents, globalResize, useSize, createEvent, renderEmptyElement } from '../../ui';
 import { getCrossListDragRowInfo } from './store';
 import { isScale, removeClass, addClass, getTpImg, toCssUnit, hasClass } from '../../ui/src/dom';
-import { isEnableConf, getText, enModelValue, deModelValue } from '../../ui/src/utils';
+import { isEnableConf, getText, enModelValue, deModelValue, getDefaultConfig } from '../../ui/src/utils';
 import { createComponentLog } from '../../ui/src/log';
 import { moveRowAnimateToTb, clearRowAnimate } from '../../ui/src/anime';
 import { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } from '../../scrollbar/src/util';
@@ -53,8 +53,9 @@ function createInternalData() {
         afterList: [],
         fullKeyMaps: {},
         rowMaps: {},
-        // 滚动条
         // resizeObserver: undefined,
+        // 滚动条
+        // scrollObserver: undefined,
         // isThumbDrag: false,
         thumbDragOffset: 0,
         yThumbTop: 0,
@@ -117,7 +118,7 @@ export default defineVxeComponent({
         scrollY: Object,
         useScrollbar: {
             type: Boolean,
-            default: () => getConfig().list.useScrollbar
+            default: () => getDefaultConfig(getConfig().list.useScrollbar, getConfig().useScrollbar)
         },
         scrollbarConfig: Object
     },
@@ -152,7 +153,6 @@ export default defineVxeComponent({
         const refFooterElem = ref();
         const refVirtualWrapper = ref();
         const refVirtualBody = ref();
-        const refViewInnerElem = ref();
         const refTrackXElem = ref();
         const refTrackYElem = ref();
         const refThumbXElem = ref();
@@ -205,17 +205,15 @@ export default defineVxeComponent({
         });
         const computeWrapperStyles = computed(() => {
             const rowHeight = computeRowHeight.value;
-            const scrollbarXOpts = computeScrollbarXOpts.value;
-            const scrollbarYOpts = computeScrollbarYOpts.value;
+            const barWidth = computeScrollYWidth.value;
+            const barHeight = computeScrollXHeight.value;
             const stys = {};
             if (rowHeight) {
                 stys['--vxe-ui-list-row-height'] = toCssUnit(rowHeight);
             }
-            if (scrollbarYOpts.width) {
-                stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(scrollbarYOpts.width);
-            }
-            if (scrollbarXOpts.height) {
-                stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(scrollbarXOpts.height);
+            if (barWidth || barHeight) {
+                stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(barWidth || barHeight);
+                stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(barHeight || barWidth);
             }
             return stys;
         });
@@ -243,24 +241,49 @@ export default defineVxeComponent({
             const scrollbarOpts = computeScrollbarOpts.value;
             return Object.assign({}, getConfig().scrollbar.yConfig, scrollbarOpts.yConfig);
         });
-        const computeScrollbarWrapperClss = computed(() => {
+        const computeScrollXHeight = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const scrollbarXOpts = computeScrollbarXOpts.value;
+            return getDefaultConfig(getDefaultConfig(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);
+        });
+        const computeScrollXVisible = computed(() => {
             const scrollbarOpts = computeScrollbarOpts.value;
-            const { padding } = scrollbarOpts;
-            const { yThumbHeight, xThumbWidth } = reactData;
             const scrollbarXOpts = computeScrollbarXOpts.value;
+            return getDefaultConfig(scrollbarXOpts.visible, scrollbarOpts.visible);
+        });
+        const computeScrollYVisible = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
             const scrollbarYOpts = computeScrollbarYOpts.value;
+            return getDefaultConfig(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);
+        });
+        const computeScrollYAutoHide = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const scrollbarYOpts = computeScrollbarYOpts.value;
+            return getDefaultConfig(getDefaultConfig(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+        });
+        const computeScrollbarWrapperClss = computed(() => {
+            const { yThumbHeight, xThumbWidth } = reactData;
             const scrollbarXToTop = computeScrollbarXToTop.value;
             const scrollbarYToLeft = computeScrollbarYToLeft.value;
+            const scrollXVisible = computeScrollXVisible.value;
+            const scrollYVisible = computeScrollYVisible.value;
             return domUtils.buildClass([
                 'vxe-scrollbar is--virtual',
-                `ov-x--${scrollbarXOpts.visible || 'visible'}`,
-                `ov-y--${scrollbarYOpts.visible || 'visible'}`,
+                `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}`,
+                `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}`,
                 `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`,
                 `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`
             ], {
-                'is--padding': padding,
-                'ov-x--auto-hide': scrollbarXOpts.autoHide,
-                'ov-y--auto-hide': scrollbarYOpts.autoHide,
                 'overflow-y': yThumbHeight,
                 'overflow-x': xThumbWidth
             });
@@ -286,6 +309,10 @@ export default defineVxeComponent({
             const keyField = computeKeyField.value;
             return getRowIdByField(row, keyField);
         };
+        const getParentElem = () => {
+            const el = refElem.value;
+            return el ? el.parentElement : null;
+        };
         const calcTableHeight = (key) => {
             const { parentHeight } = reactData;
             const val = props[key];
@@ -2139,7 +2166,7 @@ export default defineVxeComponent({
         };
         const renderVN = () => {
             const { showCheckbox, className, loading, useScrollbar } = props;
-            const { bodyHeight, topSpaceHeight, rowList, isAllChecked, isAllIndeterminate } = reactData;
+            const { bodyHeight, topSpaceHeight, rowList, isAllChecked, isAllIndeterminate, xThumbWidth, yThumbHeight } = reactData;
             const defaultSlot = slots.default;
             const headerSlot = slots.header;
             const footerSlot = slots.footer;
@@ -2154,22 +2181,38 @@ export default defineVxeComponent({
             const rowOpts = computeRowOpts.value;
             const { isHover, padding } = rowOpts;
             const isDrag = computeIsDrag.value;
-            const scrollbarXOpts = computeScrollbarXOpts.value;
-            const scrollbarYOpts = computeScrollbarYOpts.value;
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const scrollXVisible = computeScrollXVisible.value;
+            const scrollYVisible = computeScrollYVisible.value;
+            const scrollbarXToTop = computeScrollbarXToTop.value;
+            const scrollbarYToLeft = computeScrollbarYToLeft.value;
+            const scrollXAutoHide = computeScrollXAutoHide.value;
+            const scrollYAutoHide = computeScrollYAutoHide.value;
             const scrollbarWrapperClss = computeScrollbarWrapperClss.value;
             const showDefChekboxHead = showCheckbox && showHeader !== false;
             const leOns = {};
             if (isCrossListDrag && !rowList.length) {
                 leOns.onDragover = $xeList.handleCrossListRowDragoverEmptyEvent;
             }
-            return h('div', Object.assign({ ref: refElem, class: ['vxe-list', className ? (XEUtils.isFunction(className) ? className({ $list: $xeList }) : className) : '', {
+            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'}` : '',
+                    className ? (XEUtils.isFunction(className) ? className({ $list: $xeList }) : className) : '',
+                    {
                         [`size--${vSize}`]: vSize,
                         'is--virtual-scrollbar': useScrollbar,
-                        'ov-x--auto-hide': useScrollbar && scrollbarXOpts.autoHide,
-                        'ov-y--auto-hide': useScrollbar && scrollbarYOpts.autoHide,
+                        'ov-padding': useScrollbar && scrollbarOpts.padding,
+                        'ov-x--auto-hide': useScrollbar && scrollXAutoHide,
+                        'ov-y--auto-hide': useScrollbar && scrollYAutoHide,
+                        'overflow-y': yThumbHeight,
+                        'overflow-x': xThumbWidth,
                         'is--drag': isDrag,
                         'is--loading': loading
-                    }], style: wrapperStyles }, leOns), [
+                    }
+                ], style: wrapperStyles }, leOns), [
                 headerSlot || showDefChekboxHead
                     ? h('div', {
                         ref: refHeaderElem,
@@ -2226,15 +2269,7 @@ export default defineVxeComponent({
                         style: {
                             marginTop: topSpaceHeight ? `${topSpaceHeight}px` : ''
                         }
-                    }, useScrollbar
-                        ? (defaultSlot ? defaultSlot({ items: rowList, $list: $xeList }) : rowList.map((row, i) => renderRow(row, i)))
-                        : [
-                            h('div', {
-                                key: 'vi',
-                                ref: refViewInnerElem,
-                                class: 'vxe-scrollbar--view-inner'
-                            }, defaultSlot ? defaultSlot({ items: rowList, $list: $xeList }) : rowList.map((row, i) => renderRow(row, i)))
-                        ])
+                    }, defaultSlot ? defaultSlot({ items: rowList, $list: $xeList }) : rowList.map((row, i) => renderRow(row, i)))
                 ]),
                 footerSlot
                     ? h('div', {
@@ -2249,7 +2284,7 @@ export default defineVxeComponent({
                     ? h('div', {
                         class: scrollbarWrapperClss
                     }, [
-                        scrollbarXOpts.visible === 'hidden'
+                        scrollXVisible === false
                             ? renderEmptyElement($xeList)
                             : h('div', {
                                 ref: refTrackXElem,
@@ -2266,7 +2301,7 @@ export default defineVxeComponent({
                                     onLostpointercapture: cleatPointerThumbEvent
                                 })
                             ]),
-                        scrollbarYOpts.visible === 'hidden'
+                        scrollYVisible === false
                             ? renderEmptyElement($xeList)
                             : h('div', {
                                 ref: refTrackYElem,
@@ -2318,11 +2353,30 @@ export default defineVxeComponent({
         watch(() => props.syncResize, () => {
             reFlag.value++;
         });
+        watch(() => props.useScrollbar, () => {
+            reFlag.value++;
+        });
         watch(computeRowHeight, () => {
             reFlag.value++;
         });
-        watch(reFlag, () => {
+        watch(computeScrollYWidth, () => {
+            reFlag.value++;
+        });
+        watch(computeScrollXHeight, () => {
+            reFlag.value++;
+        });
+        watch(computeScrollXVisible, () => {
+            nextTick(() => {
+                reFlag.value++;
+            });
+        });
+        watch(computeScrollYVisible, () => {
             nextTick(() => {
+                reFlag.value++;
+            });
+        });
+        watch(reFlag, () => {
+            recalculate().then(() => {
                 recalculate();
             });
         });
@@ -2370,20 +2424,32 @@ export default defineVxeComponent({
             if (useKey && !keyField) {
                 errLog('vxe.error.reqSupportProp', ['row-config.useKey', 'row-config.keyField']);
             }
-            if (useScrollbar || autoResize) {
-                const el = refElem.value;
-                const viewInnerEl = refViewInnerElem.value;
-                const resizeObserver = globalResize.create(() => {
+            const el = refElem.value;
+            if (useScrollbar) {
+                const viewInnerEl = refVirtualBody.value;
+                const scrollObserver = globalResize.create(() => {
                     reFlag.value++;
                 });
-                resizeObserver.observe(el);
-                if (autoResize) {
-                    if (el) {
-                        resizeObserver.observe(el.parentElement);
-                    }
+                if (el) {
+                    scrollObserver.observe(el);
                 }
                 if (viewInnerEl) {
-                    resizeObserver.observe(viewInnerEl);
+                    scrollObserver.observe(viewInnerEl);
+                }
+                internalData.scrollObserver = scrollObserver;
+            }
+            if (autoResize) {
+                const parentEl = getParentElem();
+                const resizeObserver = globalResize.create(() => {
+                    if (props.autoResize) {
+                        reFlag.value++;
+                    }
+                });
+                if (el) {
+                    resizeObserver.observe(el);
+                }
+                if (parentEl) {
+                    resizeObserver.observe(parentEl);
                 }
                 internalData.resizeObserver = resizeObserver;
             }
@@ -2393,10 +2459,13 @@ export default defineVxeComponent({
             });
         });
         onBeforeUnmount(() => {
-            const { resizeObserver } = internalData;
+            const { scrollObserver, resizeObserver } = internalData;
             if (resizeObserver) {
                 resizeObserver.disconnect();
             }
+            if (scrollObserver) {
+                scrollObserver.disconnect();
+            }
             globalEvents.off($xeList, 'resize');
             XEUtils.assign(reactData, createReactData());
             XEUtils.assign(internalData, createInternalData());

package/es/list/style.css

@@ -376,17 +376,24 @@
   vertical-align: middle;
 }
 
-.vxe-list > .vxe-scrollbar {
-  position: unset;
+.vxe-list.ov-padding.overflow-x.sx-pos--top {
+  padding-top: var(--vxe-ui-scrollbar-x-height);
 }
-.vxe-list.is--virtual-scrollbar > .vxe-list--virtual-wrapper {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+.vxe-list.ov-padding.overflow-x.sx-pos--bottom {
+  padding-bottom: var(--vxe-ui-scrollbar-x-height);
 }
-.vxe-list.is--virtual-scrollbar > .vxe-list--virtual-wrapper::-webkit-scrollbar {
-  display: none;
+.vxe-list.ov-padding.overflow-y.sy-pos--left {
+  padding-left: var(--vxe-ui-scrollbar-y-width);
+}
+.vxe-list.ov-padding.overflow-y.sy-pos--right {
+  padding-right: var(--vxe-ui-scrollbar-y-width);
+}
+.vxe-list.ov-x--hidden > .vxe-list--virtual-wrapper {
+  overflow-x: hidden;
+}
+.vxe-list.ov-y--hidden > .vxe-list--virtual-wrapper {
+  overflow-y: hidden;
 }
-
 .vxe-list.is--virtual-scrollbar.ov-x--auto-hide:hover > .vxe-scrollbar > .vxe-scrollbar--track-x {
   opacity: 1;
 }
@@ -400,4 +407,14 @@
 .vxe-list.is--virtual-scrollbar.ov-y--auto-hide > .vxe-scrollbar > .vxe-scrollbar--track-y {
   opacity: 0;
   transition: opacity 0.8s ease-in-out;
+}
+.vxe-list > .vxe-scrollbar {
+  position: unset;
+}
+.vxe-list.is--virtual-scrollbar > .vxe-list--virtual-wrapper {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.vxe-list.is--virtual-scrollbar > .vxe-list--virtual-wrapper::-webkit-scrollbar {
+  display: none;
 }

package/es/list/style.min.css

@@ -1 +1 @@
-@charset "UTF-8";.vxe-list{--vxe-ui-list-current-font-size:var(--vxe-ui-font-size-default);--vxe-ui-list-current-padding:var(--vxe-ui-layout-padding-default)}.vxe-list.size--medium{--vxe-ui-list-current-font-size:var(--vxe-ui-font-size-medium);--vxe-ui-list-current-padding:var(--vxe-ui-layout-padding-medium)}.vxe-list.size--small{--vxe-ui-list-current-font-size:var(--vxe-ui-font-size-small);--vxe-ui-list-current-padding:var(--vxe-ui-layout-padding-small)}.vxe-list.size--mini{--vxe-ui-list-current-font-size:var(--vxe-ui-font-size-mini);--vxe-ui-list-current-padding:var(--vxe-ui-layout-padding-mini)}.vxe-list{position:relative;display:block;padding:0;font-size:var(--vxe-ui-list-current-font-size);color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family);direction:ltr}.vxe-list .vxe-list--virtual-wrapper{position:relative;overflow-x:auto;overflow-y:auto;outline:0}.vxe-list .vxe-list--y-space{width:0;float:left}.vxe-list .vxe-list--body,.vxe-list .vxe-list--virtual-wrapper{padding:0;margin:0;border:0;outline:0}.vxe-list--header-wrapper{display:flex;flex-direction:row;align-items:center;min-height:var(--vxe-ui-list-row-height)}.vxe-list--header-left{display:flex;flex-direction:row;align-items:center;flex-shrink:0}.vxe-list--header-content{flex-grow:1;overflow:auto}.vxe-list--body.trigger--row>.vxe-list--row:not(.is--drag-disabled):active{cursor:grabbing}.vxe-list--body.is--padding>.vxe-list--row{padding:0 var(--vxe-ui-list-current-padding)}.vxe-list--body.checkbox--highlight .vxe-list--row.is-checkbox--checked{background-color:var(--vxe-ui-list-row-checkbox-checked-background-color)}.vxe-list--body.radio--highlight .vxe-list--row.is-radio--checked{background-color:var(--vxe-ui-list-row-radio-checked-background-color)}.vxe-list--body.row--hover .vxe-list--row:hover{background-color:var(--vxe-ui-list-row-hover-background-color)}.vxe-list--body.row--hover .vxe-list--row:hover.is--current{background-color:var(--vxe-ui-list-row-hover-current-background-color)}.vxe-list--body.row--hover.radio--highlight .vxe-list--row.is-radio--checked:hover{background-color:var(--vxe-ui-list-row-hover-radio-checked-background-color)}.vxe-list--body.row--hover.checkbox--highlight .vxe-list--row.is-checkbox--checked:hover{background-color:var(--vxe-ui-list-row-hover-checkbox-checked-background-color)}.vxe-list--row.is--current{background-color:var(--vxe-ui-list-row-current-background-color)}.vxe-list--virtual-wrapper{height:100px}.vxe-list--row{display:flex;flex-direction:row;align-items:center}.vxe-list--row-content,.vxe-list--row-drag,.vxe-list--row-extra{display:flex;flex-direction:row;align-items:center}.vxe-list--row-drag{flex-shrink:0;padding-right:var(--vxe-ui-list-current-padding)}.vxe-list--row-content{flex-grow:1;height:var(--vxe-ui-list-row-height);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-list--row-extra{flex-shrink:0}.vxe-list--drag-handle:not(.is--disabled){cursor:grab}.vxe-list--drag-handle:not(.is--disabled):active{cursor:grabbing}.vxe-list--drag-handle:not(.is--disabled):hover{color:var(--vxe-ui-font-primary-color)}.vxe-list--drag-handle.is--disabled{color:var(--vxe-ui-input-disabled-color);cursor:not-allowed}.vxe-list--row.row--drag-move{transition:transform .5s ease}.vxe-list--row.row--drag-origin{opacity:.3}.vxe-list--drag-row-line{display:none;position:absolute;top:0;left:0;z-index:11;pointer-events:none}.vxe-list--drag-row-line{width:100%;height:1px;border:2px solid transparent}.vxe-list--drag-row-line[drag-pos=top]{border-top-color:var(--vxe-ui-font-primary-color)}.vxe-list--drag-row-line[drag-pos=bottom]{border-bottom-color:var(--vxe-ui-font-primary-color)}.vxe-list--drag-row-line[drag-to-child=y]{border-top-color:transparent;border-bottom-color:transparent;border-left-color:var(--vxe-ui-status-success-color)}.vxe-list--drag-row-line.is--guides{background-color:var(--vxe-ui-list-drag-over-background-color)}.vxe-body--row-list-move{transition-property:transform;transition-duration:.35s}.vxe-list--drag-sort-tip{display:none;position:absolute;top:0;left:0;padding:.6em 1.4em;max-width:50%;min-width:100px;border-radius:var(--vxe-ui-border-radius);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;background-color:var(--vxe-ui-layout-background-color);box-shadow:0 0 10px 0 rgba(0,0,0,.2);z-index:33}.vxe-list--drag-sort-tip[drag-status=normal] .vxe-list--drag-sort-tip-normal-status{display:block}.vxe-list--drag-sort-tip[drag-status=sub] .vxe-list--drag-sort-tip-sub-status{display:block}.vxe-list--drag-sort-tip[drag-status=disabled] .vxe-list--drag-sort-tip-disabled-status{display:block}.vxe-list--drag-sort-tip-wrapper{display:flex;flex-direction:row;align-items:center}.vxe-list--drag-sort-tip-status{padding-right:.4em}.vxe-list--drag-sort-tip-disabled-status{display:none;flex-shrink:0;color:var(--vxe-ui-status-error-color)}.vxe-list--drag-sort-tip-normal-status,.vxe-list--drag-sort-tip-sub-status{display:none}.vxe-list--drag-sort-tip-content{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-list--checkbox-header{padding-right:var(--vxe-ui-list-current-padding);-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-list--checkbox-header{cursor:pointer}.vxe-list--checkbox-header .vxe-checkbox--icon{font-size:1.22em;transition:all .2s ease-in-out}.vxe-list--checkbox-header .vxe-checkbox--icon{color:var(--vxe-ui-input-border-color);vertical-align:middle;font-weight:700;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-list--checkbox-header.is--checked,.vxe-list--checkbox-header.is--indeterminate{color:var(--vxe-ui-font-primary-color)}.vxe-list--checkbox-header.is--checked .vxe-checkbox--icon,.vxe-list--checkbox-header.is--indeterminate .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-list--checkbox-header:not(.is--disabled):hover .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-list--checkbox-header.is--hidden{cursor:default}.vxe-list--checkbox-header.is--readonly{cursor:auto}.vxe-list--checkbox-header.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:not-allowed}.vxe-list--checkbox-header.is--disabled .vxe-checkbox--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-list--checkbox-header .vxe-checkbox--label{padding-left:.4em;vertical-align:middle}.vxe-list--checkbox-option{padding-right:var(--vxe-ui-list-current-padding)}.vxe-list--checkbox-option{cursor:pointer}.vxe-list--checkbox-option .vxe-checkbox--icon{font-size:1.22em;transition:all .2s ease-in-out}.vxe-list--checkbox-option .vxe-checkbox--icon{color:var(--vxe-ui-input-border-color);vertical-align:middle;font-weight:700;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-list--checkbox-option.is--checked,.vxe-list--checkbox-option.is--indeterminate{color:var(--vxe-ui-font-primary-color)}.vxe-list--checkbox-option.is--checked .vxe-checkbox--icon,.vxe-list--checkbox-option.is--indeterminate .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-list--checkbox-option:not(.is--disabled):hover .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-list--checkbox-option.is--hidden{cursor:default}.vxe-list--checkbox-option.is--readonly{cursor:auto}.vxe-list--checkbox-option.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:not-allowed}.vxe-list--checkbox-option.is--disabled .vxe-checkbox--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-list--checkbox-option .vxe-checkbox--label{padding-left:.4em;vertical-align:middle}.vxe-list--radio-option{padding-right:var(--vxe-ui-list-current-padding)}.vxe-list--radio-option{cursor:pointer}.vxe-list--radio-option .vxe-radio--icon{font-size:1.26em;transition:all .2s ease-in-out}.vxe-list--radio-option .vxe-radio--icon{color:var(--vxe-ui-input-border-color);border-radius:50%;vertical-align:middle;font-weight:700;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-list--radio-option.is--checked{color:var(--vxe-ui-font-primary-color)}.vxe-list--radio-option.is--checked .vxe-radio--icon{color:var(--vxe-ui-font-primary-color)}.vxe-list--radio-option:not(.is--disabled):hover .vxe-radio--icon{color:var(--vxe-ui-font-primary-color)}.vxe-list--radio-option.is--readonly{cursor:auto}.vxe-list--radio-option.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:not-allowed}.vxe-list--radio-option.is--disabled .vxe-radio--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-list--radio-option .vxe-radio--label{padding-left:.4em;vertical-align:middle}.vxe-list>.vxe-scrollbar{position:unset}.vxe-list.is--virtual-scrollbar>.vxe-list--virtual-wrapper{scrollbar-width:none;-ms-overflow-style:none}.vxe-list.is--virtual-scrollbar>.vxe-list--virtual-wrapper::-webkit-scrollbar{display:none}.vxe-list.is--virtual-scrollbar.ov-x--auto-hide:hover>.vxe-scrollbar>.vxe-scrollbar--track-x{opacity:1}.vxe-list.is--virtual-scrollbar.ov-x--auto-hide>.vxe-scrollbar>.vxe-scrollbar--track-x{opacity:0;transition:opacity .8s ease-in-out}.vxe-list.is--virtual-scrollbar.ov-y--auto-hide:hover>.vxe-scrollbar>.vxe-scrollbar--track-y{opacity:1}.vxe-list.is--virtual-scrollbar.ov-y--auto-hide>.vxe-scrollbar>.vxe-scrollbar--track-y{opacity:0;transition:opacity .8s ease-in-out}
+@charset "UTF-8";.vxe-list{--vxe-ui-list-current-font-size:var(--vxe-ui-font-size-default);--vxe-ui-list-current-padding:var(--vxe-ui-layout-padding-default)}.vxe-list.size--medium{--vxe-ui-list-current-font-size:var(--vxe-ui-font-size-medium);--vxe-ui-list-current-padding:var(--vxe-ui-layout-padding-medium)}.vxe-list.size--small{--vxe-ui-list-current-font-size:var(--vxe-ui-font-size-small);--vxe-ui-list-current-padding:var(--vxe-ui-layout-padding-small)}.vxe-list.size--mini{--vxe-ui-list-current-font-size:var(--vxe-ui-font-size-mini);--vxe-ui-list-current-padding:var(--vxe-ui-layout-padding-mini)}.vxe-list{position:relative;display:block;padding:0;font-size:var(--vxe-ui-list-current-font-size);color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family);direction:ltr}.vxe-list .vxe-list--virtual-wrapper{position:relative;overflow-x:auto;overflow-y:auto;outline:0}.vxe-list .vxe-list--y-space{width:0;float:left}.vxe-list .vxe-list--body,.vxe-list .vxe-list--virtual-wrapper{padding:0;margin:0;border:0;outline:0}.vxe-list--header-wrapper{display:flex;flex-direction:row;align-items:center;min-height:var(--vxe-ui-list-row-height)}.vxe-list--header-left{display:flex;flex-direction:row;align-items:center;flex-shrink:0}.vxe-list--header-content{flex-grow:1;overflow:auto}.vxe-list--body.trigger--row>.vxe-list--row:not(.is--drag-disabled):active{cursor:grabbing}.vxe-list--body.is--padding>.vxe-list--row{padding:0 var(--vxe-ui-list-current-padding)}.vxe-list--body.checkbox--highlight .vxe-list--row.is-checkbox--checked{background-color:var(--vxe-ui-list-row-checkbox-checked-background-color)}.vxe-list--body.radio--highlight .vxe-list--row.is-radio--checked{background-color:var(--vxe-ui-list-row-radio-checked-background-color)}.vxe-list--body.row--hover .vxe-list--row:hover{background-color:var(--vxe-ui-list-row-hover-background-color)}.vxe-list--body.row--hover .vxe-list--row:hover.is--current{background-color:var(--vxe-ui-list-row-hover-current-background-color)}.vxe-list--body.row--hover.radio--highlight .vxe-list--row.is-radio--checked:hover{background-color:var(--vxe-ui-list-row-hover-radio-checked-background-color)}.vxe-list--body.row--hover.checkbox--highlight .vxe-list--row.is-checkbox--checked:hover{background-color:var(--vxe-ui-list-row-hover-checkbox-checked-background-color)}.vxe-list--row.is--current{background-color:var(--vxe-ui-list-row-current-background-color)}.vxe-list--virtual-wrapper{height:100px}.vxe-list--row{display:flex;flex-direction:row;align-items:center}.vxe-list--row-content,.vxe-list--row-drag,.vxe-list--row-extra{display:flex;flex-direction:row;align-items:center}.vxe-list--row-drag{flex-shrink:0;padding-right:var(--vxe-ui-list-current-padding)}.vxe-list--row-content{flex-grow:1;height:var(--vxe-ui-list-row-height);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-list--row-extra{flex-shrink:0}.vxe-list--drag-handle:not(.is--disabled){cursor:grab}.vxe-list--drag-handle:not(.is--disabled):active{cursor:grabbing}.vxe-list--drag-handle:not(.is--disabled):hover{color:var(--vxe-ui-font-primary-color)}.vxe-list--drag-handle.is--disabled{color:var(--vxe-ui-input-disabled-color);cursor:not-allowed}.vxe-list--row.row--drag-move{transition:transform .5s ease}.vxe-list--row.row--drag-origin{opacity:.3}.vxe-list--drag-row-line{display:none;position:absolute;top:0;left:0;z-index:11;pointer-events:none}.vxe-list--drag-row-line{width:100%;height:1px;border:2px solid transparent}.vxe-list--drag-row-line[drag-pos=top]{border-top-color:var(--vxe-ui-font-primary-color)}.vxe-list--drag-row-line[drag-pos=bottom]{border-bottom-color:var(--vxe-ui-font-primary-color)}.vxe-list--drag-row-line[drag-to-child=y]{border-top-color:transparent;border-bottom-color:transparent;border-left-color:var(--vxe-ui-status-success-color)}.vxe-list--drag-row-line.is--guides{background-color:var(--vxe-ui-list-drag-over-background-color)}.vxe-body--row-list-move{transition-property:transform;transition-duration:.35s}.vxe-list--drag-sort-tip{display:none;position:absolute;top:0;left:0;padding:.6em 1.4em;max-width:50%;min-width:100px;border-radius:var(--vxe-ui-border-radius);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;background-color:var(--vxe-ui-layout-background-color);box-shadow:0 0 10px 0 rgba(0,0,0,.2);z-index:33}.vxe-list--drag-sort-tip[drag-status=normal] .vxe-list--drag-sort-tip-normal-status{display:block}.vxe-list--drag-sort-tip[drag-status=sub] .vxe-list--drag-sort-tip-sub-status{display:block}.vxe-list--drag-sort-tip[drag-status=disabled] .vxe-list--drag-sort-tip-disabled-status{display:block}.vxe-list--drag-sort-tip-wrapper{display:flex;flex-direction:row;align-items:center}.vxe-list--drag-sort-tip-status{padding-right:.4em}.vxe-list--drag-sort-tip-disabled-status{display:none;flex-shrink:0;color:var(--vxe-ui-status-error-color)}.vxe-list--drag-sort-tip-normal-status,.vxe-list--drag-sort-tip-sub-status{display:none}.vxe-list--drag-sort-tip-content{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-list--checkbox-header{padding-right:var(--vxe-ui-list-current-padding);-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-list--checkbox-header{cursor:pointer}.vxe-list--checkbox-header .vxe-checkbox--icon{font-size:1.22em;transition:all .2s ease-in-out}.vxe-list--checkbox-header .vxe-checkbox--icon{color:var(--vxe-ui-input-border-color);vertical-align:middle;font-weight:700;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-list--checkbox-header.is--checked,.vxe-list--checkbox-header.is--indeterminate{color:var(--vxe-ui-font-primary-color)}.vxe-list--checkbox-header.is--checked .vxe-checkbox--icon,.vxe-list--checkbox-header.is--indeterminate .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-list--checkbox-header:not(.is--disabled):hover .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-list--checkbox-header.is--hidden{cursor:default}.vxe-list--checkbox-header.is--readonly{cursor:auto}.vxe-list--checkbox-header.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:not-allowed}.vxe-list--checkbox-header.is--disabled .vxe-checkbox--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-list--checkbox-header .vxe-checkbox--label{padding-left:.4em;vertical-align:middle}.vxe-list--checkbox-option{padding-right:var(--vxe-ui-list-current-padding)}.vxe-list--checkbox-option{cursor:pointer}.vxe-list--checkbox-option .vxe-checkbox--icon{font-size:1.22em;transition:all .2s ease-in-out}.vxe-list--checkbox-option .vxe-checkbox--icon{color:var(--vxe-ui-input-border-color);vertical-align:middle;font-weight:700;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-list--checkbox-option.is--checked,.vxe-list--checkbox-option.is--indeterminate{color:var(--vxe-ui-font-primary-color)}.vxe-list--checkbox-option.is--checked .vxe-checkbox--icon,.vxe-list--checkbox-option.is--indeterminate .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-list--checkbox-option:not(.is--disabled):hover .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-list--checkbox-option.is--hidden{cursor:default}.vxe-list--checkbox-option.is--readonly{cursor:auto}.vxe-list--checkbox-option.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:not-allowed}.vxe-list--checkbox-option.is--disabled .vxe-checkbox--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-list--checkbox-option .vxe-checkbox--label{padding-left:.4em;vertical-align:middle}.vxe-list--radio-option{padding-right:var(--vxe-ui-list-current-padding)}.vxe-list--radio-option{cursor:pointer}.vxe-list--radio-option .vxe-radio--icon{font-size:1.26em;transition:all .2s ease-in-out}.vxe-list--radio-option .vxe-radio--icon{color:var(--vxe-ui-input-border-color);border-radius:50%;vertical-align:middle;font-weight:700;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-list--radio-option.is--checked{color:var(--vxe-ui-font-primary-color)}.vxe-list--radio-option.is--checked .vxe-radio--icon{color:var(--vxe-ui-font-primary-color)}.vxe-list--radio-option:not(.is--disabled):hover .vxe-radio--icon{color:var(--vxe-ui-font-primary-color)}.vxe-list--radio-option.is--readonly{cursor:auto}.vxe-list--radio-option.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:not-allowed}.vxe-list--radio-option.is--disabled .vxe-radio--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-list--radio-option .vxe-radio--label{padding-left:.4em;vertical-align:middle}.vxe-list.ov-padding.overflow-x.sx-pos--top{padding-top:var(--vxe-ui-scrollbar-x-height)}.vxe-list.ov-padding.overflow-x.sx-pos--bottom{padding-bottom:var(--vxe-ui-scrollbar-x-height)}.vxe-list.ov-padding.overflow-y.sy-pos--left{padding-left:var(--vxe-ui-scrollbar-y-width)}.vxe-list.ov-padding.overflow-y.sy-pos--right{padding-right:var(--vxe-ui-scrollbar-y-width)}.vxe-list.ov-x--hidden>.vxe-list--virtual-wrapper{overflow-x:hidden}.vxe-list.ov-y--hidden>.vxe-list--virtual-wrapper{overflow-y:hidden}.vxe-list.is--virtual-scrollbar.ov-x--auto-hide:hover>.vxe-scrollbar>.vxe-scrollbar--track-x{opacity:1}.vxe-list.is--virtual-scrollbar.ov-x--auto-hide>.vxe-scrollbar>.vxe-scrollbar--track-x{opacity:0;transition:opacity .8s ease-in-out}.vxe-list.is--virtual-scrollbar.ov-y--auto-hide:hover>.vxe-scrollbar>.vxe-scrollbar--track-y{opacity:1}.vxe-list.is--virtual-scrollbar.ov-y--auto-hide>.vxe-scrollbar>.vxe-scrollbar--track-y{opacity:0;transition:opacity .8s ease-in-out}.vxe-list>.vxe-scrollbar{position:unset}.vxe-list.is--virtual-scrollbar>.vxe-list--virtual-wrapper{scrollbar-width:none;-ms-overflow-style:none}.vxe-list.is--virtual-scrollbar>.vxe-list--virtual-wrapper::-webkit-scrollbar{display:none}

package/es/menu/src/menu.js

@@ -3,7 +3,7 @@ import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
 import { VxeUI, createEvent, permission, useSize, globalEvents, renderEmptyElement } from '../../ui';
 import { getPopupContainer, scrollToView, toCssUnit } from '../../ui/src/dom';
-import { getLastZIndex, nextZIndex, isEnableConf } from '../../ui/src/utils';
+import { getLastZIndex, nextZIndex, isEnableConf, getDefaultConfig } from '../../ui/src/utils';
 import { getSlotVNs } from '../../ui/src/vn';
 import { createComponentLog } from '../../ui/src/log';
 import VxeLoadingComponent from '../../loading';
@@ -66,7 +66,7 @@ export default defineVxeComponent({
         menuConfig: Object,
         useScrollbar: {
             type: Boolean,
-            default: () => getConfig().menu.useScrollbar
+            default: () => getDefaultConfig(getConfig().menu.useScrollbar, getConfig().useScrollbar)
         },
         scrollbarConfig: Object,
         appendTo: {

package/es/modal/src/modal.js

@@ -2,13 +2,14 @@ import { h, Teleport, ref, inject, computed, reactive, provide, nextTick, watch,
 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 } from '../../ui/src/utils';
+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 { getSlotVNs } from '../../ui/src/vn';
 import { createComponentLog } from '../../ui/src/log';
 import { allActiveModals } from './store';
 import VxeButtonComponent from '../../button';
 import VxeLoadingComponent from '../../loading';
+import VxeScrollbarComponent from '../../scrollbar';
 const { warnLog, errLog } = createComponentLog('modal');
 function createInternalData() {
     return {
@@ -214,6 +215,11 @@ export default defineVxeComponent({
         },
         beforeHideMethod: Function,
         slots: Object,
+        useScrollbar: {
+            type: Boolean,
+            default: () => getDefaultConfig(getConfig().modal.useScrollbar, getConfig().useScrollbar)
+        },
+        scrollbarConfig: Object,
         /**
          * 已废弃
          * @deprecated
@@ -287,6 +293,25 @@ export default defineVxeComponent({
         const computeZoomOpts = computed(() => {
             return Object.assign({}, getConfig().modal.zoomConfig, props.zoomConfig);
         });
+        const computeScrollbarOpts = computed(() => {
+            return Object.assign({}, getConfig().modal.scrollbarConfig, props.scrollbarConfig);
+        });
+        const computeScrollbarProps = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const { viewClassName, viewInnerClassName } = scrollbarOpts;
+            return {
+                width: scrollbarOpts.width,
+                height: scrollbarOpts.height,
+                autoHide: scrollbarOpts.autoHide,
+                visible: scrollbarOpts.visible,
+                xConfig: scrollbarOpts.xConfig,
+                yConfig: scrollbarOpts.yConfig,
+                className: scrollbarOpts.className,
+                viewAttrs: scrollbarOpts.viewAttrs,
+                viewClassName: 'vxe-modal--scrollbar-content-view' + (viewClassName ? (' ' + viewClassName) : ''),
+                viewInnerClassName: 'vxe-modal--scrollbar-content-inner' + (viewClassName ? (' ' + viewInnerClassName) : '')
+            };
+        });
         const computeMaps = {
             computeSize,
             computeZoomOpts
@@ -1305,9 +1330,10 @@ export default defineVxeComponent({
             return renderEmptyElement($xeModal);
         };
         const renderBody = () => {
-            const { slots: propSlots = {}, status, message, iconStatus, useHtml } = props;
+            const { slots: propSlots = {}, status, message, iconStatus, useScrollbar, useHtml } = props;
             const content = props.content || message;
             const isMsg = computeIsMsg.value;
+            const scrollbarProps = computeScrollbarProps.value;
             const defaultSlot = slots.default || propSlots.default;
             const leftSlot = slots.left || propSlots.left;
             const rightSlot = slots.right || propSlots.right;
@@ -1321,16 +1347,34 @@ export default defineVxeComponent({
                     })
                 ]));
             }
-            contVNs.push(useHtml && !defaultSlot
-                ? h('div', {
-                    key: 'hc',
-                    class: 'vxe-modal--content',
-                    innerHTML: getFuncText(content)
-                })
-                : h('div', {
-                    key: 'dc',
-                    class: 'vxe-modal--content'
-                }, defaultSlot ? getSlotVNs(defaultSlot({ $modal: $xeModal })) : getFuncText(content)));
+            if (useHtml && !defaultSlot) {
+                contVNs.push(useScrollbar
+                    ? h(VxeScrollbarComponent, Object.assign({ key: 'shc', class: 'vxe-modal--scrollbar-content' }, scrollbarProps), {
+                        default() {
+                            return [
+                                h('div', {
+                                    class: 'vxe-modal--scrollbar-content-html',
+                                    innerHTML: getFuncText(content)
+                                })
+                            ];
+                        }
+                    })
+                    : h('div', {
+                        key: 'hc',
+                        class: 'vxe-modal--content',
+                        innerHTML: getFuncText(content)
+                    }));
+            }
+            else {
+                contVNs.push(useScrollbar
+                    ? h(VxeScrollbarComponent, Object.assign({ key: 'sdc', class: 'vxe-modal--scrollbar-content' }, scrollbarProps), {
+                        default: () => defaultSlot ? getSlotVNs(defaultSlot({ $modal: $xeModal })) : getFuncText(content)
+                    })
+                    : h('div', {
+                        key: 'dc',
+                        class: 'vxe-modal--content'
+                    }, defaultSlot ? getSlotVNs(defaultSlot({ $modal: $xeModal })) : getFuncText(content)));
+            }
             return h('div', {
                 class: 'vxe-modal--body'
             }, [

package/es/modal/style.css

@@ -50,7 +50,8 @@ html[data-vxe-lock-scroll] body {
 .vxe-modal--box.is--drag .vxe-modal--body {
   overflow: hidden;
 }
-.vxe-modal--box.is--drag .vxe-modal--body .vxe-modal--content {
+.vxe-modal--box.is--drag .vxe-modal--body .vxe-modal--content,
+.vxe-modal--box.is--drag .vxe-modal--body .vxe-modal--scrollbar-content {
   overflow: hidden;
 }
 
@@ -73,7 +74,8 @@ html[data-vxe-lock-scroll] body {
   font-size: 1.6em;
 }
 
-.vxe-modal--content {
+.vxe-modal--content,
+.vxe-modal--scrollbar-content {
   flex-grow: 1;
   white-space: pre-line;
 }
@@ -390,7 +392,9 @@ html[data-vxe-lock-scroll] body {
   overflow: hidden;
   visibility: hidden;
 }
-.vxe-modal--wrapper.type--message .vxe-modal--box .vxe-modal--content, .vxe-modal--wrapper.type--notification .vxe-modal--box .vxe-modal--content {
+.vxe-modal--wrapper.type--message .vxe-modal--box .vxe-modal--content,
+.vxe-modal--wrapper.type--message .vxe-modal--box .vxe-modal--scrollbar-content, .vxe-modal--wrapper.type--notification .vxe-modal--box .vxe-modal--content,
+.vxe-modal--wrapper.type--notification .vxe-modal--box .vxe-modal--scrollbar-content {
   max-width: 800px;
   float: left;
 }
@@ -413,7 +417,10 @@ html[data-vxe-lock-scroll] body {
 .vxe-modal--wrapper.type--modal .vxe-modal--body, .vxe-modal--wrapper.type--alert .vxe-modal--body, .vxe-modal--wrapper.type--confirm .vxe-modal--body {
   overflow: auto;
 }
-.vxe-modal--wrapper.type--modal .vxe-modal--body .vxe-modal--content, .vxe-modal--wrapper.type--alert .vxe-modal--body .vxe-modal--content, .vxe-modal--wrapper.type--confirm .vxe-modal--body .vxe-modal--content {
+.vxe-modal--wrapper.type--modal .vxe-modal--body .vxe-modal--content,
+.vxe-modal--wrapper.type--modal .vxe-modal--body .vxe-modal--scrollbar-content, .vxe-modal--wrapper.type--alert .vxe-modal--body .vxe-modal--content,
+.vxe-modal--wrapper.type--alert .vxe-modal--body .vxe-modal--scrollbar-content, .vxe-modal--wrapper.type--confirm .vxe-modal--body .vxe-modal--content,
+.vxe-modal--wrapper.type--confirm .vxe-modal--body .vxe-modal--scrollbar-content {
   overflow: auto;
 }
 .vxe-modal--wrapper.status--info .vxe-modal--status-wrapper {
@@ -449,4 +456,8 @@ html[data-vxe-lock-scroll] body {
 
 .vxe-modal--wrapper[data-effect] {
   overflow: hidden;
+}
+
+.vxe-modal--scrollbar-content {
+  width: 100%;
 }