vxe-pc-ui 3.20.0 → 3.20.2

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

@@ -2,6 +2,7 @@ import { PropType, CreateElement, VNode } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import { toCssUnit } from '../../ui/src/dom'
 import { getConfig, createEvent, globalMixins } from '../../ui'
+import { getDefaultConfig } from '../../ui/src/utils'
 import XEUtils from 'xe-utils'
 import VxeLoadingComponent from '../../loading'
 import VxeScrollbarComponent from '../../scrollbar'
@@ -22,7 +23,7 @@ export default /* define-vxe-component start */ 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 /* define-vxe-component start */ defineVxeComponent({
       const vSize = $xeLayoutAside.computeSize
       const collapseOpts = $xeLayoutAside.computeCollapseOpts
       const scrollbarOpts = $xeLayoutAside.computeScrollbarOpts
-      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 /* define-vxe-component start */ defineVxeComponent({
         useScrollbar
           ? h(VxeScrollbarComponent, {
             props: {
-              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 { PropType, CreateElement, VNode } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import { getConfig, createEvent, globalMixins, 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'
@@ -31,7 +32,7 @@ export default /* define-vxe-component start */ 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: {
@@ -70,6 +71,30 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const props = $xeLayoutBody
 
       return Object.assign({}, getConfig().layoutBody.scrollbarConfig, props.scrollbarConfig)
+    },
+    computeScrollbarProps () {
+      const $xeLayoutBody = this
+      const props = $xeLayoutBody
+      const backtopId = ($xeLayoutBody as any).backtopId as string
+
+      const { showBacktop } = props
+      const scrollbarOpts = $xeLayoutBody.computeScrollbarOpts as VxeLayoutBodyPropTypes.ScrollbarConfig
+      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) : '')
+      }
     }
   },
   methods: {
@@ -91,8 +116,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       const { loading, padding, showBacktop, useScrollbar } = props
       const backtopOpts = $xeLayoutBody.computeBacktopOpts
-      const scrollbarOpts = $xeLayoutBody.computeScrollbarOpts
-      const { native, xConfig, yConfig, className, viewAttrs, viewClassName, viewInnerClassName } = scrollbarOpts
+      const scrollbarProps = $xeLayoutBody.computeScrollbarProps
       const vSize = $xeLayoutBody.computeSize
       const defaultSlot = slots.default
       const backtopSlot = slots.backtop
@@ -121,18 +145,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       }, [
         useScrollbar
           ? h(VxeScrollbarComponent, {
-            props: {
-              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) : '')
-            },
+            props: scrollbarProps,
             scopedSlots: {
               default: () => defaultSlot ? defaultSlot({}) : []
             }

package/packages/list/src/list.ts

@@ -4,7 +4,7 @@ import XEUtils, { XEBrowse } from 'xe-utils'
 import { VxeUI, getConfig, getIcon, getI18n, domUtils, menus, globalEvents, globalResize, createEvent, globalMixins, renderEmptyElement } from '../../ui'
 import { crossListDragRowGlobal, getCrossListDragRowInfo } from './store'
 import { addClass, getTpImg, hasClass, isScale, removeClass, toCssUnit } from '../../ui/src/dom'
-import { isEnableConf, getText, enModelValue, deModelValue } from '../../ui/src/utils'
+import { isEnableConf, getText, enModelValue, deModelValue, getDefaultConfig } from '../../ui/src/utils'
 import { getSlotVNs } from '../../ui/src/vn'
 import { createComponentLog } from '../../ui/src/log'
 import { moveRowAnimateToTb, clearRowAnimate } from '../../ui/src/anime'
@@ -73,8 +73,10 @@ function createInternalData (): ListInternalData {
     fullKeyMaps: {},
     rowMaps: {},
 
-    // 滚动条
     // resizeObserver: undefined,
+
+    // 滚动条
+    // scrollObserver: undefined,
     // isThumbDrag: false,
     thumbDragOffset: 0,
     yThumbTop: 0,
@@ -141,7 +143,7 @@ export default /* define-vxe-component start */ 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>
   },
@@ -226,17 +228,15 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const $xeList = this
 
       const rowHeight = $xeList.computeRowHeight
-      const scrollbarXOpts = $xeList.computeScrollbarXOpts as VxeScrollbarPropTypes.XConfig
-      const scrollbarYOpts = $xeList.computeScrollbarYOpts as VxeScrollbarPropTypes.YConfig
+      const barWidth = $xeList.computeScrollYWidth
+      const barHeight = $xeList.computeScrollXHeight
       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
     },
@@ -274,27 +274,64 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const scrollbarOpts = $xeList.computeScrollbarOpts as VxeListPropTypes.ScrollbarConfig
       return Object.assign({}, getConfig().scrollbar.yConfig, scrollbarOpts.yConfig)
     },
-    computeScrollbarWrapperClss () {
+    computeScrollXHeight () {
+      const $xeList = this
+
+      const scrollbarOpts = $xeList.computeScrollbarOpts as VxeListPropTypes.ScrollbarConfig
+      const scrollbarXOpts = $xeList.computeScrollbarXOpts as VxeScrollbarPropTypes.XConfig
+      return getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height)
+    },
+    computeScrollYWidth () {
+      const $xeList = this
+
+      const scrollbarOpts = $xeList.computeScrollbarOpts as VxeListPropTypes.ScrollbarConfig
+      const scrollbarYOpts = $xeList.computeScrollbarYOpts as VxeScrollbarPropTypes.YConfig
+      return getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width)
+    },
+    computeScrollXVisible () {
+      const $xeList = this
+
+      const scrollbarOpts = $xeList.computeScrollbarOpts as VxeListPropTypes.ScrollbarConfig
+      const scrollbarXOpts = $xeList.computeScrollbarXOpts as VxeScrollbarPropTypes.XConfig
+      return getDefaultConfig(scrollbarXOpts.visible, scrollbarOpts.visible)
+    },
+    computeScrollYVisible () {
+      const $xeList = this
+
+      const scrollbarOpts = $xeList.computeScrollbarOpts as VxeListPropTypes.ScrollbarConfig
+      const scrollbarYOpts = $xeList.computeScrollbarYOpts as VxeScrollbarPropTypes.YConfig
+      return getDefaultConfig(scrollbarYOpts.visible, scrollbarOpts.visible)
+    },
+    computeScrollXAutoHide () {
       const $xeList = this
-      const reactData = $xeList.reactData
 
       const scrollbarOpts = $xeList.computeScrollbarOpts as VxeListPropTypes.ScrollbarConfig
-      const { padding } = scrollbarOpts
-      const { yThumbHeight, xThumbWidth } = reactData
       const scrollbarXOpts = $xeList.computeScrollbarXOpts as VxeScrollbarPropTypes.XConfig
+      return getDefaultConfig(getDefaultConfig(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide)
+    },
+    computeScrollYAutoHide () {
+      const $xeList = this
+
+      const scrollbarOpts = $xeList.computeScrollbarOpts as VxeListPropTypes.ScrollbarConfig
       const scrollbarYOpts = $xeList.computeScrollbarYOpts as VxeScrollbarPropTypes.YConfig
+      return getDefaultConfig(getDefaultConfig(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide)
+    },
+    computeScrollbarWrapperClss () {
+      const $xeList = this
+      const reactData = $xeList.reactData
+
+      const { yThumbHeight, xThumbWidth } = reactData
       const scrollbarXToTop = $xeList.computeScrollbarXToTop
       const scrollbarYToLeft = $xeList.computeScrollbarYToLeft
+      const scrollXVisible = $xeList.computeScrollXVisible
+      const scrollYVisible = $xeList.computeScrollYVisible
       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
       })
@@ -472,6 +509,12 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const { fullData } = internalData
       return fullData
     },
+    getParentElem () {
+      const $xeList = this
+
+      const el = $xeList.$refs.refElem as HTMLDivElement
+      return el ? el.parentElement : null
+    },
     calcTableHeight (key: 'height' | 'maxHeight') {
       const $xeList = this
       const props = $xeList
@@ -2498,7 +2541,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const slots = $xeList.$scopedSlots
 
       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
@@ -2512,8 +2555,13 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const rowOpts = $xeList.computeRowOpts
       const { isHover, padding } = rowOpts
       const isDrag = $xeList.computeIsDrag
-      const scrollbarXOpts = $xeList.computeScrollbarXOpts
-      const scrollbarYOpts = $xeList.computeScrollbarYOpts
+      const scrollbarOpts = $xeList.computeScrollbarOpts
+      const scrollXVisible = $xeList.computeScrollXVisible
+      const scrollYVisible = $xeList.computeScrollYVisible
+      const scrollbarXToTop = $xeList.computeScrollbarXToTop
+      const scrollbarYToLeft = $xeList.computeScrollbarYToLeft
+      const scrollXAutoHide = $xeList.computeScrollXAutoHide
+      const scrollYAutoHide = $xeList.computeScrollYAutoHide
       const scrollbarWrapperClss = $xeList.computeScrollbarWrapperClss
       const showDefChekboxHead = showCheckbox && checkboxOpts.showHeader !== false
 
@@ -2525,14 +2573,25 @@ export default /* define-vxe-component start */ 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
+          }
+        ],
         on: leOns,
         style: wrapperStyles
       }, [
@@ -2593,17 +2652,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
             style: {
               marginTop: topSpaceHeight ? `${topSpaceHeight}px` : ''
             }
-          }, useScrollbar
-            ? (
-                defaultSlot ? defaultSlot({ items: rowList, $list: $xeList }) : rowList.map((row, i) => $xeList.renderRow(h, row, i))
-              )
-            : [
-                h('div', {
-                  key: 'vi',
-                  ref: 'refViewInnerElem',
-                  class: 'vxe-scrollbar--view-inner'
-                }, defaultSlot ? defaultSlot({ items: rowList, $list: $xeList }) : rowList.map((row, i) => $xeList.renderRow(h, row, i)))
-              ])
+          }, defaultSlot ? defaultSlot({ items: rowList, $list: $xeList }) : rowList.map((row, i) => $xeList.renderRow(h, row, i)))
         ]),
         footerSlot
           ? h('div', {
@@ -2618,7 +2667,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
           ? h('div', {
             class: scrollbarWrapperClss
           }, [
-            scrollbarXOpts.visible === 'hidden'
+            scrollXVisible === false
               ? renderEmptyElement($xeList)
               : h('div', {
                 ref: 'refTrackXElem',
@@ -2639,7 +2688,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
                   }
                 })
               ]),
-            scrollbarYOpts.visible === 'hidden'
+            scrollYVisible === false
               ? renderEmptyElement($xeList)
               : h('div', {
                 ref: 'refTrackYElem',
@@ -2700,15 +2749,44 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       $xeList.reFlag++
     },
+    useScrollbar () {
+      const $xeList = this
+
+      $xeList.reFlag++
+    },
     computeRowHeight () {
       const $xeList = this
 
       $xeList.reFlag++
     },
-    reFlag () {
+    computeScrollYWidth () {
+      const $xeList = this
+
+      $xeList.reFlag++
+    },
+    computeScrollXHeight () {
+      const $xeList = this
+
+      $xeList.reFlag++
+    },
+    computeScrollXVisible () {
       const $xeList = this
 
       $xeList.$nextTick(() => {
+        $xeList.reFlag++
+      })
+    },
+    computeScrollYVisible () {
+      const $xeList = this
+
+      $xeList.$nextTick(() => {
+        $xeList.reFlag++
+      })
+    },
+    reFlag () {
+      const $xeList = this
+
+      $xeList.recalculate().then(() => {
         $xeList.recalculate()
       })
     },
@@ -2758,20 +2836,33 @@ export default /* define-vxe-component start */ defineVxeComponent({
     if (useKey && !keyField) {
       errLog('vxe.error.reqSupportProp', ['row-config.useKey', 'row-config.keyField'])
     }
-    if (useScrollbar || autoResize) {
-      const el = $xeList.$refs.refElem as HTMLDivElement
-      const viewInnerEl = $xeList.$refs.refViewInnerElem as HTMLDivElement
-      const resizeObserver = globalResize.create(() => {
+    const el = $xeList.$refs.refElem as HTMLDivElement
+    if (useScrollbar) {
+      const viewInnerEl = $xeList.$refs.refVirtualBody as HTMLDivElement
+      const scrollObserver = globalResize.create(() => {
         $xeList.reFlag++
       })
-      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 = $xeList.getParentElem()
+      const resizeObserver = globalResize.create(() => {
+        if (props.autoResize) {
+          $xeList.reFlag++
+        }
+      })
+      if (el) {
+        resizeObserver.observe(el)
+      }
+
+      if (parentEl) {
+        resizeObserver.observe(parentEl)
       }
       internalData.resizeObserver = resizeObserver
     }
@@ -2792,10 +2883,13 @@ export default /* define-vxe-component start */ defineVxeComponent({
     const reactData = $xeList.reactData
     const internalData = $xeList.internalData
 
-    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, globalMixins, globalEvents, renderEmptyElement } from '../../ui'
 import { getPopupAppendElement, 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'
@@ -78,7 +78,7 @@ export default /* define-vxe-component start */ 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

@@ -3,12 +3,13 @@ import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { VxeUI, getConfig, getI18n, getIcon, createEvent, globalEvents, globalMixins, renderEmptyElement, GLOBAL_EVENT_KEYS } from '../../ui'
 import { getEventTargetNode, getPopupAppendElement, 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 { 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, VxeModalMethods, ModalEventTypes, VxeModalEmits, VxeComponentSizeType, VxeComponentPermissionInfo, ValueOf, VxeButtonConstructor, VxeDrawerConstructor, VxeDrawerMethods, VxeFormConstructor, VxeFormPrivateMethods } from '../../../types'
 import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types/components/table'
@@ -227,6 +228,11 @@ export default /* define-vxe-component start */ 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>,
 
     /**
      * 已废弃
@@ -316,23 +322,47 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       return props.type === 'modal'
     },
-    computeIsMinimizeStatus  () {
+    computeIsMinimizeStatus () {
       const $xeModal = this
       const reactData = $xeModal.reactData as ModalReactData
 
       return reactData.zoomStatus === 'minimize'
     },
-    computeIsMaximizeStatus  () {
+    computeIsMaximizeStatus () {
       const $xeModal = this
       const reactData = $xeModal.reactData as ModalReactData
 
       return reactData.zoomStatus === 'maximize'
     },
-    computeZoomOpts  () {
+    computeZoomOpts () {
       const $xeModal = this
       const props = $xeModal
 
       return Object.assign({}, getConfig().modal.zoomConfig, props.zoomConfig)
+    },
+    computeScrollbarOpts () {
+      const $xeModal = this
+      const props = $xeModal
+
+      return Object.assign({}, getConfig().modal.scrollbarConfig, props.scrollbarConfig)
+    },
+    computeScrollbarProps () {
+      const $xeModal = this
+
+      const scrollbarOpts = $xeModal.computeScrollbarOpts as VxeModalPropTypes.ScrollbarConfig
+      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) : '')
+      }
     }
   },
   watch: {
@@ -1539,9 +1569,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const props = $xeModal
       const slots = $xeModal.$scopedSlots
 
-      const { slots: propSlots = {}, status, message, iconStatus, useHtml } = props
+      const { slots: propSlots = {}, status, message, iconStatus, useScrollbar, useHtml } = props
       const content = props.content || message
       const isMsg = $xeModal.computeIsMsg
+      const scrollbarProps = $xeModal.computeScrollbarProps
       const defaultSlot = slots.default || propSlots.default
       const leftSlot = slots.left || propSlots.left
       const rightSlot = slots.right || propSlots.right
@@ -1557,20 +1588,53 @@ export default /* define-vxe-component start */ defineVxeComponent({
           ])
         )
       }
-      contVNs.push(
-        useHtml && !defaultSlot
-          ? h('div', {
-            key: 'hc',
-            class: 'vxe-modal--content',
-            domProps: {
-              innerHTML: getFuncText(content)
-            }
-          })
-          : h('div', {
-            key: 'dc',
-            class: 'vxe-modal--content'
-          }, defaultSlot ? $xeModal.callSlot(defaultSlot, { $modal: $xeModal }, h) : getFuncText(content))
-      )
+
+      if (useHtml && !defaultSlot) {
+        contVNs.push(
+          useScrollbar
+            ? h(VxeScrollbarComponent, {
+              key: 'shc',
+              class: 'vxe-modal--scrollbar-content',
+              props: scrollbarProps,
+              scopedSlots: {
+                default () {
+                  return [
+                    h('div', {
+                      class: 'vxe-modal--scrollbar-content-html',
+                      domProps: {
+                        innerHTML: getFuncText(content)
+                      }
+                    })
+                  ]
+                }
+              }
+            })
+            : h('div', {
+              key: 'hc',
+              class: 'vxe-modal--content',
+              domProps: {
+                innerHTML: getFuncText(content)
+              }
+            })
+        )
+      } else {
+        contVNs.push(
+          useScrollbar
+            ? h(VxeScrollbarComponent, {
+              key: 'sdc',
+              class: 'vxe-modal--scrollbar-content',
+              props: scrollbarProps,
+              scopedSlots: {
+                default: () => defaultSlot ? $xeModal.callSlot(defaultSlot, { $modal: $xeModal }, h) : getFuncText(content)
+              }
+            })
+            : h('div', {
+              key: 'dc',
+              class: 'vxe-modal--content'
+            }, defaultSlot ? $xeModal.callSlot(defaultSlot, { $modal: $xeModal }, h) : getFuncText(content))
+        )
+      }
+
       return h('div', {
         class: 'vxe-modal--body'
       }, [