vxe-pc-ui 4.20.0 → 4.20.2

package/packages/layout-aside/src/layout-aside.ts

@@ -2,6 +2,7 @@ import { ref, h, reactive, computed, provide, PropType } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import { toCssUnit } from '../../ui/src/dom'
 import { getConfig, useSize, createEvent } from '../../ui'
+import { getDefaultConfig } from '../../ui/src/utils'
 import XEUtils from 'xe-utils'
 import VxeLoadingComponent from '../../loading'
 import VxeScrollbarComponent from '../../scrollbar'
@@ -19,7 +20,7 @@ export default defineVxeComponent({
     collapseConfig: Object as PropType<VxeLayoutAsidePropTypes.CollapseConfig>,
     useScrollbar: {
       type: Boolean as PropType<VxeLayoutAsidePropTypes.UseScrollbar>,
-      default: () => getConfig().layoutAside.useScrollbar
+      default: () => getDefaultConfig(getConfig().layoutAside.useScrollbar, getConfig().useScrollbar)
     },
     scrollbarConfig: Object as PropType<VxeLayoutAsidePropTypes.ScrollbarConfig>,
     size: {
@@ -97,7 +98,7 @@ export default defineVxeComponent({
       const vSize = computeSize.value
       const collapseOpts = computeCollapseOpts.value
       const scrollbarOpts = computeScrollbarOpts.value
-      const { native, yConfig, className, viewAttrs, viewClassName, viewInnerClassName } = scrollbarOpts
+      const { className, viewClassName, viewInnerClassName } = scrollbarOpts
       const defaultSlot = slots.default
 
       return h('aside', {
@@ -113,13 +114,16 @@ export default defineVxeComponent({
       }, [
         useScrollbar
           ? h(VxeScrollbarComponent, {
-            native,
+            width: scrollbarOpts.width,
+            height: scrollbarOpts.height,
+            autoHide: scrollbarOpts.autoHide,
+            visible: scrollbarOpts.visible,
             xConfig: {
-              visible: 'hidden'
+              visible: false
             },
-            yConfig,
+            yConfig: scrollbarOpts.yConfig,
             className: 'vxe-layout-aside--scrollbar' + (className ? (' ' + className) : ''),
-            viewAttrs,
+            viewAttrs: scrollbarOpts.viewAttrs,
             viewClassName: 'vxe-layout-aside--scrollbar-view' + (viewClassName ? (' ' + viewClassName) : ''),
             viewInnerClassName: 'vxe-layout-aside--scrollbar-inner' + (viewInnerClassName ? (' ' + viewInnerClassName) : '')
           }, {

package/packages/layout-body/src/layout-body.ts

@@ -2,6 +2,7 @@ import { ref, h, reactive, PropType, 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'
@@ -28,7 +29,7 @@ export default defineVxeComponent({
     backtopConfig: Object as PropType<VxeLayoutBodyPropTypes.BacktopConfig>,
     useScrollbar: {
       type: Boolean as PropType<VxeLayoutBodyPropTypes.UseScrollbar>,
-      default: () => getConfig().layoutBody.useScrollbar
+      default: () => getDefaultConfig(getConfig().layoutBody.useScrollbar, getConfig().useScrollbar)
     },
     scrollbarConfig: Object as PropType<VxeLayoutBodyPropTypes.ScrollbarConfig>,
     size: {
@@ -64,6 +65,27 @@ export default defineVxeComponent({
       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: {
+          ...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: VxeLayoutBodyPrivateComputed = {
       computeSize
     }
@@ -95,8 +117,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
@@ -125,18 +146,7 @@ export default defineVxeComponent({
         }]
       }, [
         useScrollbar
-          ? h(VxeScrollbarComponent, {
-            native,
-            xConfig,
-            yConfig,
-            className: 'vxe-layout-body--scrollbar' + (className ? (' ' + className) : ''),
-            viewAttrs: {
-              ...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/packages/list/src/list.ts

@@ -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'
@@ -63,8 +63,10 @@ function createInternalData (): ListInternalData {
     fullKeyMaps: {},
     rowMaps: {},
 
-    // 滚动条
     // resizeObserver: undefined,
+
+    // 滚动条
+    // scrollObserver: undefined,
     // isThumbDrag: false,
     thumbDragOffset: 0,
     yThumbTop: 0,
@@ -133,7 +135,7 @@ export default defineVxeComponent({
     scrollY: Object as PropType<VxeListPropTypes.ScrollY>,
     useScrollbar: {
       type: Boolean as PropType<VxeListPropTypes.UseScrollbar>,
-      default: () => getConfig().list.useScrollbar
+      default: () => getDefaultConfig(getConfig().list.useScrollbar, getConfig().useScrollbar)
     },
     scrollbarConfig: Object as PropType<VxeListPropTypes.ScrollbarConfig>
   },
@@ -176,7 +178,6 @@ export default defineVxeComponent({
     const refVirtualWrapper = ref() as Ref<HTMLDivElement>
     const refVirtualBody = ref() as Ref<HTMLDivElement>
 
-    const refViewInnerElem = ref<HTMLDivElement>()
     const refTrackXElem = ref<HTMLDivElement>()
     const refTrackYElem = ref<HTMLDivElement>()
     const refThumbXElem = ref<HTMLDivElement>()
@@ -242,17 +243,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: VxeComponentStyleType = {}
       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
     })
@@ -284,24 +283,55 @@ export default defineVxeComponent({
       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 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 { padding } = scrollbarOpts
-      const { yThumbHeight, xThumbWidth } = reactData
       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
       })
@@ -334,6 +364,11 @@ export default defineVxeComponent({
       return getRowIdByField(row, keyField)
     }
 
+    const getParentElem = () => {
+      const el = refElem.value
+      return el ? el.parentElement : null
+    }
+
     const calcTableHeight = (key: 'height' | 'maxHeight') => {
       const { parentHeight } = reactData
       const val = props[key]
@@ -2311,7 +2346,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
@@ -2326,8 +2361,13 @@ 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
 
@@ -2339,14 +2379,25 @@ export default defineVxeComponent({
       }
       return h('div', {
         ref: refElem,
-        class: ['vxe-list', 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,
-          'is--drag': isDrag,
-          'is--loading': loading
-        }],
+        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-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
       }, [
@@ -2406,17 +2457,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', {
@@ -2431,7 +2472,7 @@ export default defineVxeComponent({
           ? h('div', {
             class: scrollbarWrapperClss
           }, [
-            scrollbarXOpts.visible === 'hidden'
+            scrollXVisible === false
               ? renderEmptyElement($xeList)
               : h('div', {
                 ref: refTrackXElem,
@@ -2448,7 +2489,7 @@ export default defineVxeComponent({
                   onLostpointercapture: cleatPointerThumbEvent
                 })
               ]),
-            scrollbarYOpts.visible === 'hidden'
+            scrollYVisible === false
               ? renderEmptyElement($xeList)
               : h('div', {
                 ref: refTrackYElem,
@@ -2502,11 +2543,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()
       })
     })
@@ -2560,20 +2620,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 as HTMLDivElement)
-          }
+        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
       }
@@ -2584,10 +2656,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/packages/menu/src/menu.ts

@@ -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'
@@ -74,7 +74,7 @@ export default defineVxeComponent({
     menuConfig: Object as PropType<VxeMenuPropTypes.MenuConfig>,
     useScrollbar: {
       type: Boolean as PropType<VxeMenuPropTypes.UseScrollbar>,
-      default: () => getConfig().menu.useScrollbar
+      default: () => getDefaultConfig(getConfig().menu.useScrollbar, getConfig().useScrollbar)
     },
     scrollbarConfig: Object as PropType<VxeMenuPropTypes.ScrollbarConfig>,
     appendTo: {

package/packages/modal/src/modal.ts

@@ -2,13 +2,14 @@ import { h, Teleport, ref, Ref, inject, computed, reactive, provide, nextTick, w
 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'
 
 import type { VxeModalConstructor, VxeModalPropTypes, ModalReactData, ModalInternalData, VxeModalEmits, VxeModalPrivateComputed, ModalEventTypes, VxeButtonInstance, ModalMethods, ModalPrivateRef, VxeModalMethods, ValueOf, VxeDrawerConstructor, VxeDrawerMethods, VxeFormConstructor, VxeFormPrivateMethods } from '../../../types'
 import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types/components/table'
@@ -223,6 +224,11 @@ export default defineVxeComponent({
     },
     beforeHideMethod: Function as PropType<VxeModalPropTypes.BeforeHideMethod>,
     slots: Object as PropType<VxeModalPropTypes.Slots>,
+    useScrollbar: {
+      type: Boolean as PropType<VxeModalPropTypes.UseScrollbar>,
+      default: () => getDefaultConfig(getConfig().modal.useScrollbar, getConfig().useScrollbar)
+    },
+    scrollbarConfig: Object as PropType<VxeModalPropTypes.ScrollbarConfig>,
 
     /**
      * 已废弃
@@ -310,6 +316,27 @@ export default defineVxeComponent({
       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: VxeModalPrivateComputed = {
       computeSize,
       computeZoomOpts
@@ -1371,9 +1398,10 @@ export default defineVxeComponent({
     }
 
     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
@@ -1389,18 +1417,47 @@ 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, {
+              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, {
+              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'
       }, [