vxe-pc-ui 3.20.1 → 3.20.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-pc-ui",
-  "version": "3.20.1",
+  "version": "3.20.5",
   "description": "A vue based PC component library",
   "scripts": {
     "update": "npm install --legacy-peer-deps",
@@ -25,7 +25,7 @@
   "style": "lib/style.css",
   "typings": "types/index.d.ts",
   "dependencies": {
-    "@vxe-ui/core": "^3.4.28"
+    "@vxe-ui/core": "^3.4.31"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^6.21.0",

package/packages/card/src/card.ts

@@ -3,6 +3,7 @@ import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { getConfig, createEvent, globalMixins, renderEmptyElement } from '../../ui'
 import { toCssUnit } from '../../ui/src/dom'
+import { getDefaultConfig } from '../../ui/src/utils'
 import { getSlotVNs } from '../../ui/src/vn'
 import VxeLoadingComponent from '../../loading'
 import VxeScrollbarComponent from '../../scrollbar'
@@ -41,7 +42,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
     },
     useScrollbar: {
       type: Boolean as PropType<VxeCardPropTypes.UseScrollbar>,
-      default: () => getConfig().card.useScrollbar
+      default: () => getDefaultConfig(getConfig().card.useScrollbar, getConfig().useScrollbar)
     },
     scrollbarConfig: Object as PropType<VxeCardPropTypes.ScrollbarConfig>
   },

package/packages/drawer/src/drawer.ts

@@ -2,12 +2,13 @@ import { PropType, CreateElement, VNode } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { globalMixins, getIcon, getConfig, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, renderEmptyElement } from '../../ui'
-import { getLastZIndex, nextZIndex, getFuncText } from '../../ui/src/utils'
+import { getLastZIndex, nextZIndex, getFuncText, getDefaultConfig } from '../../ui/src/utils'
 import { getPopupAppendElement, getPopupWrapperElement, toCssUnit } from '../../ui/src/dom'
 import { allActiveDrawers } from './store'
 import { getSlotVNs } from '../../ui/src/vn'
 import VxeButtonComponent from '../../button'
 import VxeLoadingComponent from '../../loading'
+import VxeScrollbarComponent from '../../scrollbar'
 
 import type { VxeDrawerPropTypes, DrawerReactData, VxeDrawerEmits, VxeDrawerMethods, ValueOf, VxeDrawerConstructor, VxeButtonConstructor, DrawerEventTypes, VxeModalConstructor, VxeModalMethods, VxeFormConstructor, VxeFormPrivateMethods } from '../../../types'
 import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types/components/table'
@@ -148,7 +149,12 @@ export default /* define-vxe-component start */ defineVxeComponent({
       default: () => getConfig().drawer.size || getConfig().size
     },
     beforeHideMethod: Function as PropType<VxeDrawerPropTypes.BeforeHideMethod>,
-    slots: Object as PropType<VxeDrawerPropTypes.Slots>
+    slots: Object as PropType<VxeDrawerPropTypes.Slots>,
+    useScrollbar: {
+      type: Boolean as PropType<VxeDrawerPropTypes.UseScrollbar>,
+      default: () => getDefaultConfig(getConfig().drawer.useScrollbar, getConfig().useScrollbar)
+    },
+    scrollbarConfig: Object as PropType<VxeDrawerPropTypes.ScrollbarConfig>
   },
   inject: {
     $xeModal: {
@@ -230,6 +236,30 @@ export default /* define-vxe-component start */ defineVxeComponent({
           return 'wr'
       }
       return 'wl'
+    },
+    computeScrollbarOpts () {
+      const $xeDrawer = this
+      const props = $xeDrawer
+
+      return Object.assign({}, getConfig().modal.scrollbarConfig, props.scrollbarConfig)
+    },
+    computeScrollbarProps () {
+      const $xeDrawer = this
+
+      const scrollbarOpts = $xeDrawer.computeScrollbarOpts as VxeDrawerPropTypes.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-drawer--scrollbar-content-view' + (viewClassName ? (' ' + viewClassName) : ''),
+        viewInnerClassName: 'vxe-drawer--scrollbar-content-inner' + (viewClassName ? (' ' + viewInnerClassName) : '')
+      }
     }
   },
   methods: {
@@ -619,10 +649,56 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const props = $xeDrawer
       const slots = $xeDrawer.$scopedSlots
 
-      const { slots: propSlots = {}, content, useHtml } = props
+      const { slots: propSlots = {}, content, useScrollbar, useHtml } = props
+      const scrollbarProps = $xeDrawer.computeScrollbarProps
       const defaultSlot = slots.default || propSlots.default
       const leftSlot = slots.left || propSlots.left
       const rightSlot = slots.right || propSlots.right
+      const contVNs: VNode[] = []
+      if (useHtml && !defaultSlot) {
+        contVNs.push(
+          useScrollbar
+            ? h(VxeScrollbarComponent, {
+              key: 'shc',
+              class: 'vxe-drawer--scrollbar-content',
+              props: scrollbarProps,
+              scopedSlots: {
+                default () {
+                  return [
+                    h('div', {
+                      class: 'vxe-drawer--scrollbar-content-html',
+                      domProps: {
+                        innerHTML: getFuncText(content)
+                      }
+                    })
+                  ]
+                }
+              }
+            })
+            : h('div', {
+              key: 'hc',
+              class: 'vxe-drawer--content',
+              domProps: {
+                innerHTML: getFuncText(content)
+              }
+            })
+        )
+      } else {
+        contVNs.push(
+          useScrollbar
+            ? h(VxeScrollbarComponent, {
+              key: 'sdc',
+              class: 'vxe-drawer--scrollbar-content',
+              props: scrollbarProps,
+              scopedSlots: {
+                default: () => defaultSlot ? $xeDrawer.callSlot(defaultSlot, { $drawer: $xeDrawer }, h) : getFuncText(content)
+              }
+            })
+            : h('div', {
+              class: 'vxe-drawer--content'
+            }, defaultSlot ? $xeDrawer.callSlot(defaultSlot, { $drawer: $xeDrawer }, h) : getFuncText(content))
+        )
+      }
       return h('div', {
         class: 'vxe-drawer--body'
       }, [
@@ -633,19 +709,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
           : renderEmptyElement($xeDrawer),
         h('div', {
           class: 'vxe-drawer--body-default'
-        }, [
-          useHtml && !defaultSlot
-            ? h('div', {
-              key: 'hc',
-              class: 'vxe-drawer--content',
-              domProps: {
-                innerHTML: getFuncText(content)
-              }
-            })
-            : h('div', {
-              class: 'vxe-drawer--content'
-            }, defaultSlot ? $xeDrawer.callSlot(defaultSlot, { $drawer: $xeDrawer }, h) : getFuncText(content))
-        ]),
+        }, contVNs),
         rightSlot
           ? h('div', {
             class: 'vxe-drawer--body-right'

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: {

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: {

package/packages/list/src/list.ts

@@ -1,19 +1,22 @@
 import { PropType, CreateElement, VNode } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils, { XEBrowse } from 'xe-utils'
-import { VxeUI, getConfig, getIcon, getI18n, domUtils, menus, globalEvents, globalResize, createEvent, globalMixins, renderEmptyElement } from '../../ui'
+import { VxeUI, 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, getDefaultConfig } from '../../ui/src/utils'
 import { getSlotVNs } from '../../ui/src/vn'
 import { createComponentLog } from '../../ui/src/log'
 import { moveRowAnimateToTb, clearRowAnimate } from '../../ui/src/anime'
-import { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } from '../../scrollbar/src/util'
 import { getItemCacheObj } from './util'
 import VxeLoadingComponent from '../../loading'
 
 import type { VxeListPropTypes, VxeListEmits, VxeComponentSizeType, ListReactData, VxeListDefines, ValueOf, ListInternalData, VxeListConstructor, VxeListPrivateMethods, VxeComponentStyleType, VxeScrollbarPropTypes } from '../../../types'
 
+const { getConfig, getIcon, getI18n, domUtils, scrollbarUtils, menus, globalEvents, globalResize } = VxeUI
+
+const { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } = scrollbarUtils
+
 const { warnLog, errLog } = createComponentLog('tree')
 
 let crossListDragRowObj: {
@@ -73,8 +76,10 @@ function createInternalData (): ListInternalData {
     fullKeyMaps: {},
     rowMaps: {},
 
-    // 滚动条
     // resizeObserver: undefined,
+
+    // 滚动条
+    // scrollObserver: undefined,
     // isThumbDrag: false,
     thumbDragOffset: 0,
     yThumbTop: 0,
@@ -141,7 +146,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,11 +231,8 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const $xeList = this
 
       const rowHeight = $xeList.computeRowHeight
-      const scrollbarOpts = $xeList.computeScrollbarOpts
-      const scrollbarXOpts = $xeList.computeScrollbarXOpts as VxeScrollbarPropTypes.XConfig
-      const scrollbarYOpts = $xeList.computeScrollbarYOpts as VxeScrollbarPropTypes.YConfig
-      const barWidth = getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width)
-      const barHeight = getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height)
+      const barWidth = $xeList.computeScrollYWidth
+      const barHeight = $xeList.computeScrollXHeight
       const stys: VxeComponentStyleType = {}
       if (rowHeight) {
         stys['--vxe-ui-list-row-height'] = toCssUnit(rowHeight)
@@ -275,6 +277,20 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const scrollbarOpts = $xeList.computeScrollbarOpts as VxeListPropTypes.ScrollbarConfig
       return Object.assign({}, getConfig().scrollbar.yConfig, scrollbarOpts.yConfig)
     },
+    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
 
@@ -307,15 +323,11 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const $xeList = this
       const reactData = $xeList.reactData
 
-      const scrollbarOpts = $xeList.computeScrollbarOpts as VxeListPropTypes.ScrollbarConfig
-      const { padding } = scrollbarOpts
       const { yThumbHeight, xThumbWidth } = reactData
       const scrollbarXToTop = $xeList.computeScrollbarXToTop
       const scrollbarYToLeft = $xeList.computeScrollbarYToLeft
       const scrollXVisible = $xeList.computeScrollXVisible
       const scrollYVisible = $xeList.computeScrollYVisible
-      const scrollXAutoHide = $xeList.computeScrollXAutoHide as boolean
-      const scrollYAutoHide = $xeList.computeScrollYAutoHide as boolean
       return domUtils.buildClass([
         'vxe-scrollbar is--virtual',
         `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}`,
@@ -323,9 +335,6 @@ export default /* define-vxe-component start */ defineVxeComponent({
         `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`,
         `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`
       ], {
-        'is--padding': padding,
-        'ov-x--auto-hide': scrollXAutoHide,
-        'ov-y--auto-hide': scrollYAutoHide,
         'overflow-y': yThumbHeight,
         'overflow-x': xThumbWidth
       })
@@ -503,6 +512,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
@@ -2747,6 +2762,16 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       $xeList.reFlag++
     },
+    computeScrollYWidth () {
+      const $xeList = this
+
+      $xeList.reFlag++
+    },
+    computeScrollXHeight () {
+      const $xeList = this
+
+      $xeList.reFlag++
+    },
     computeScrollXVisible () {
       const $xeList = this
 
@@ -2814,20 +2839,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 el = $xeList.$refs.refElem as HTMLDivElement
+    if (useScrollbar) {
       const viewInnerEl = $xeList.$refs.refVirtualBody as HTMLDivElement
-      const resizeObserver = globalResize.create(() => {
+      const scrollObserver = globalResize.create(() => {
         $xeList.reFlag++
       })
       if (el) {
-        resizeObserver.observe(el)
-        if (autoResize) {
-          resizeObserver.observe(el.parentElement as HTMLDivElement)
-        }
+        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
     }
@@ -2848,10 +2886,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'
       }, [

package/packages/scrollbar/src/scrollbar.ts

@@ -3,14 +3,15 @@ import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { VxeUI } from '../../ui'
 import { toCssUnit } from '../../ui/src/dom'
-import { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } from './util'
 import { getDefaultConfig } from '../../ui/src/utils'
 
 import VxeLoadingComponent from '../../loading'
 
 import type { ScrollbarReactData, ScrollbarInternalData, VxeScrollbarEmits, ValueOf, VxeScrollbarPropTypes, VxeComponentStyleType } from '../../../types'
 
-const { getConfig, createEvent, domUtils, globalResize, globalEvents, renderEmptyElement } = VxeUI
+const { getConfig, createEvent, domUtils, scrollbarUtils, globalResize, globalEvents, renderEmptyElement } = VxeUI
+
+const { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } = scrollbarUtils
 
 function createReactData (): ScrollbarReactData {
   return {
@@ -103,10 +104,8 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const props = $xeScrollbar
 
       const { width, height, minWidth, minHeight, maxWidth, maxHeight } = props
-      const xOpts = $xeScrollbar.computeXOpts
-      const yOpts = $xeScrollbar.computeYOpts
-      const barWidth = yOpts.width
-      const barHeight = xOpts.height
+      const barWidth = $xeScrollbar.computeYWidth
+      const barHeight = $xeScrollbar.computeXHeight
       const stys: VxeComponentStyleType = {}
       if (width) {
         stys.width = toCssUnit(width)
@@ -132,6 +131,18 @@ export default /* define-vxe-component start */ defineVxeComponent({
       }
       return stys
     },
+    computeXHeight () {
+      const $xeScrollbar = this
+
+      const xOpts = ($xeScrollbar as any).computeXOpts as VxeScrollbarPropTypes.XConfig
+      return xOpts.height
+    },
+    computeYWidth () {
+      const $xeScrollbar = this
+
+      const yOpts = ($xeScrollbar as any).computeYOpts as VxeScrollbarPropTypes.YConfig
+      return yOpts.width
+    },
     computeXVisible () {
       const $xeScrollbar = this
       const props = $xeScrollbar
@@ -710,6 +721,16 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       $xeScrollbar.reFlag++
     },
+    computeYWidth () {
+      const $xeScrollbar = this
+
+      $xeScrollbar.reFlag++
+    },
+    computeXHeight () {
+      const $xeScrollbar = this
+
+      $xeScrollbar.reFlag++
+    },
     computeXVisible () {
       const $xeScrollbar = this
 

package/packages/tabs/src/tabs.ts

@@ -4,7 +4,7 @@ import XEUtils from 'xe-utils'
 import { createEvent, getConfig, getIcon, globalEvents, globalMixins, permission, renderEmptyElement } from '../../ui'
 import { getSlotVNs } from '../../ui/src/vn'
 import { toCssUnit, addClass, removeClass } from '../../ui/src/dom'
-import { isEnableConf } from '../../ui/src/utils'
+import { getDefaultConfig, isEnableConf } from '../../ui/src/utils'
 import { createComponentLog } from '../../ui/src/log'
 import VxeLoadingComponent from '../../loading'
 import VxeScrollbarComponent from '../../scrollbar'
@@ -58,7 +58,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
     },
     useScrollbar: {
       type: Boolean as PropType<VxeTabsPropTypes.UseScrollbar>,
-      default: () => getConfig().tabs.useScrollbar
+      default: () => getDefaultConfig(getConfig().tabs.useScrollbar, getConfig().useScrollbar)
     },
     scrollbarConfig: Object as PropType<VxeTabsPropTypes.ScrollbarConfig>,
     // 已废弃