vxe-pc-ui 4.20.1 → 4.20.2

package/lib/index.umd.js

@@ -3072,6 +3072,7 @@ __webpack_require__.d(__webpack_exports__, {
   renderGlobalIcon: function() { return /* reexport */ renderGlobalIcon; },
   renderer: function() { return /* reexport */ renderer; },
   saveFile: function() { return /* reexport */ saveFile; },
+  scrollbarUtils: function() { return /* reexport */ scrollbarUtils; },
   setConfig: function() { return /* reexport */ setConfig; },
   setI18n: function() { return /* reexport */ setI18n; },
   setIcon: function() { return /* reexport */ setIcon; },
@@ -3328,6 +3329,7 @@ __webpack_require__.d(components_namespaceObject, {
   renderGlobalIcon: function() { return renderGlobalIcon; },
   renderer: function() { return renderer; },
   saveFile: function() { return saveFile; },
+  scrollbarUtils: function() { return scrollbarUtils; },
   setConfig: function() { return setConfig; },
   setI18n: function() { return setI18n; },
   setIcon: function() { return setIcon; },
@@ -3364,7 +3366,7 @@ if (typeof window !== 'undefined') {
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.push.js
 var es_array_push = __webpack_require__(4114);
 ;// ./node_modules/@vxe-ui/core/es/src/core.js
-const coreVersion = "4.4.27";
+const coreVersion = "4.4.31";
 const VxeCore = {
   coreVersion,
   uiVersion: '',
@@ -3992,7 +3994,7 @@ function createLog(type, name) {
     return msg;
   };
 }
-const version = "4.4.27";
+const version = "4.4.31";
 const log = {
   create: createLog,
   warn: createLog('warn', `v${version}`),
@@ -4452,6 +4454,12 @@ const baseUtils = {
    */
   isEmpty(value) {
     return value === null || value === undefined || value === '';
+  },
+  /**
+   * 获取配置值，如果存在则返回，如果不存在则使用默认值
+   */
+  getDefVal(value, defVal) {
+    return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(value) ? defVal : value;
   }
 };
 ;// ./node_modules/@vxe-ui/core/es/src/dom-utils.js
@@ -4467,7 +4475,7 @@ const domUtils = {
       for (let i = 0; i < staticClassNames.length; i++) {
         const val = staticClassNames[i];
         if (val) {
-          parts.push(val);
+          parts.push('' + val);
         }
       }
     }
@@ -4479,6 +4487,63 @@ const domUtils = {
     return parts.join(' ');
   }
 };
+;// ./node_modules/@vxe-ui/core/es/src/scrollbar-utils.js
+const scrollbarUtils = {
+  /**
+   * 计算滚动条滑块的长度
+   */
+  getThumbSize(viewportSize, contentSize, trackSize) {
+    if (contentSize <= viewportSize) {
+      return 0;
+    }
+    const ratio = viewportSize / contentSize;
+    const ideal = trackSize * ratio;
+    return Math.max(20, Math.min(ideal, trackSize));
+  },
+  /**
+   * 计算滚动条滑块的偏移位置
+   */
+  getThumbOffsetSize(offsetSize, viewportSize, contentSize, trackSize, thumbSize) {
+    const maxScroll = contentSize - viewportSize;
+    if (maxScroll <= 0) {
+      return 0;
+    }
+    const maxThumbOffset = trackSize - thumbSize;
+    if (maxThumbOffset <= 0) {
+      return 0;
+    }
+    const clamped = Math.min(Math.max(offsetSize, 0), maxScroll);
+    const ratio = clamped / maxScroll;
+    return ratio * maxThumbOffset;
+  },
+  /**
+   * 根据点击轨道的位置，计算滑块的偏移位置
+   */
+  getScrollFromClick(clickPosition, viewportSize, contentSize, trackSize, thumbSize) {
+    const maxThumbOffset = trackSize - thumbSize;
+    const maxScroll = contentSize - viewportSize;
+    if (maxScroll <= 0 || maxThumbOffset <= 0) {
+      return 0;
+    }
+    let thumbOffset = clickPosition - thumbSize / 2;
+    thumbOffset = Math.min(Math.max(thumbOffset, 0), maxThumbOffset);
+    const scrollOffset = thumbOffset / maxThumbOffset * maxScroll;
+    return scrollOffset;
+  },
+  /**
+   * 拖拽 thumb 时，根据鼠标位置计算滑块的偏移位置
+   */
+  getScrollFromDrag(pointerPosition, dragOffset, viewportSize, contentSize, trackSize, thumbSize) {
+    const maxScroll = contentSize - viewportSize;
+    const maxThumbOffset = trackSize - thumbSize;
+    if (maxScroll <= 0 || maxThumbOffset <= 0) {
+      return 0;
+    }
+    let thumbOffset = pointerPosition - dragOffset;
+    thumbOffset = Math.min(Math.max(thumbOffset, 0), maxThumbOffset);
+    return thumbOffset / maxThumbOffset * maxScroll;
+  }
+};
 ;// ./node_modules/@vxe-ui/core/es/src/hooks.js
 
 const hooks = new store();
@@ -4532,6 +4597,7 @@ const useFns = {
 
 
 
+
 
 
 const installedPlugins = [];
@@ -4604,6 +4670,7 @@ const VxeUI = Object.assign(VxeCore, {
   permission: permission,
   baseUtils: baseUtils,
   domUtils: domUtils,
+  scrollbarUtils: scrollbarUtils,
   globalStore: globalStore,
   hooks: hooks,
   component,
@@ -4635,6 +4702,7 @@ setTheme();
 
 
 
+
 
 
 /* harmony default export */ var es_index_esm = ((/* unused pure expression or super */ null && (VxeUI)));
@@ -4745,7 +4813,7 @@ function checkDynamic() {
 const {
   log: log_log
 } = VxeUI;
-const uiVersion = `ui v${"4.20.1"}`;
+const uiVersion = `ui v${"4.20.2"}`;
 function createComponentLog(name) {
   const tableVersion = VxeUI.tableVersion ? `table v${VxeUI.tableVersion}` : '';
   const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';
@@ -4763,7 +4831,7 @@ const errLog = log_log.create('error', uiVersion);
 
 
 
-const ui_version = "4.20.1";
+const ui_version = "4.20.2";
 VxeUI.uiVersion = ui_version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -11801,10 +11869,8 @@ function scrollbar_createInternalData() {
         maxWidth,
         maxHeight
       } = props;
-      const xOpts = computeXOpts.value;
-      const yOpts = computeYOpts.value;
-      const barWidth = yOpts.width;
-      const barHeight = xOpts.height;
+      const barWidth = computeYWidth.value;
+      const barHeight = computeXHeight.value;
       const stys = {};
       if (width) {
         stys.width = toCssUnit(width);
@@ -11830,6 +11896,14 @@ function scrollbar_createInternalData() {
       }
       return stys;
     });
+    const computeXHeight = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const xOpts = computeXOpts.value;
+      return xOpts.height;
+    });
+    const computeYWidth = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const yOpts = computeYOpts.value;
+      return yOpts.width;
+    });
     const computeXVisible = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const {
         visible
@@ -12331,6 +12405,12 @@ function scrollbar_createInternalData() {
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.syncResize, () => {
       reFlag.value++;
     });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeYWidth, () => {
+      reFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeXHeight, () => {
+      reFlag.value++;
+    });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeXVisible, () => {
       (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
         reFlag.value++;
@@ -12409,6 +12489,7 @@ const Scrollbar = VxeScrollbar;
 
 
 
+
 /* harmony default export */ var card = (defineVxeComponent({
   name: 'VxeCard',
   props: {
@@ -12438,7 +12519,7 @@ const Scrollbar = VxeScrollbar;
     },
     useScrollbar: {
       type: Boolean,
-      default: () => getConfig().card.useScrollbar
+      default: () => getDefaultConfig(getConfig().card.useScrollbar, getConfig().useScrollbar)
     },
     scrollbarConfig: Object
   },
@@ -13278,8 +13359,9 @@ function list_createInternalData() {
     afterList: [],
     fullKeyMaps: {},
     rowMaps: {},
-    // 滚动条
     // resizeObserver: undefined,
+    // 滚动条
+    // scrollObserver: undefined,
     // isThumbDrag: false,
     thumbDragOffset: 0,
     yThumbTop: 0,
@@ -13342,7 +13424,7 @@ let crossListDragRowObj = null;
     scrollY: Object,
     useScrollbar: {
       type: Boolean,
-      default: () => getConfig().list.useScrollbar
+      default: () => getDefaultConfig(getConfig().list.useScrollbar, getConfig().useScrollbar)
     },
     scrollbarConfig: Object
   },
@@ -13427,11 +13509,8 @@ let crossListDragRowObj = null;
     });
     const computeWrapperStyles = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const rowHeight = computeRowHeight.value;
-      const scrollbarOpts = computeScrollbarOpts.value;
-      const scrollbarXOpts = computeScrollbarXOpts.value;
-      const scrollbarYOpts = computeScrollbarYOpts.value;
-      const barWidth = getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width);
-      const barHeight = getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height);
+      const barWidth = computeScrollYWidth.value;
+      const barHeight = computeScrollXHeight.value;
       const stys = {};
       if (rowHeight) {
         stys['--vxe-ui-list-row-height'] = toCssUnit(rowHeight);
@@ -13473,6 +13552,16 @@ let crossListDragRowObj = null;
       const scrollbarOpts = computeScrollbarOpts.value;
       return Object.assign({}, getConfig().scrollbar.yConfig, scrollbarOpts.yConfig);
     });
+    const computeScrollXHeight = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarXOpts = computeScrollbarXOpts.value;
+      return getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height);
+    });
+    const computeScrollYWidth = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarYOpts = computeScrollbarYOpts.value;
+      return getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width);
+    });
     const computeScrollXVisible = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const scrollbarOpts = computeScrollbarOpts.value;
       const scrollbarXOpts = computeScrollbarXOpts.value;
@@ -13494,10 +13583,6 @@ let crossListDragRowObj = null;
       return getDefaultConfig(getDefaultConfig(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
     });
     const computeScrollbarWrapperClss = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
-      const scrollbarOpts = computeScrollbarOpts.value;
-      const {
-        padding
-      } = scrollbarOpts;
       const {
         yThumbHeight,
         xThumbWidth
@@ -13506,12 +13591,7 @@ let crossListDragRowObj = null;
       const scrollbarYToLeft = computeScrollbarYToLeft.value;
       const scrollXVisible = computeScrollXVisible.value;
       const scrollYVisible = computeScrollYVisible.value;
-      const scrollXAutoHide = computeScrollXAutoHide.value;
-      const scrollYAutoHide = computeScrollYAutoHide.value;
       return domUtils.buildClass(['vxe-scrollbar is--virtual', `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': scrollXAutoHide,
-        'ov-y--auto-hide': scrollYAutoHide,
         'overflow-y': yThumbHeight,
         'overflow-x': xThumbWidth
       });
@@ -13539,6 +13619,10 @@ let crossListDragRowObj = null;
       const keyField = computeKeyField.value;
       return getRowIdByField(row, keyField);
     };
+    const getParentElem = () => {
+      const el = refElem.value;
+      return el ? el.parentElement : null;
+    };
     const calcTableHeight = key => {
       const {
         parentHeight
@@ -15872,6 +15956,12 @@ let crossListDragRowObj = null;
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeRowHeight, () => {
       reFlag.value++;
     });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeScrollYWidth, () => {
+      reFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeScrollXHeight, () => {
+      reFlag.value++;
+    });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeScrollXVisible, () => {
       (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
         reFlag.value++;
@@ -15939,20 +16029,32 @@ let crossListDragRowObj = null;
       if (useKey && !keyField) {
         list_errLog('vxe.error.reqSupportProp', ['row-config.useKey', 'row-config.keyField']);
       }
-      if (useScrollbar || autoResize) {
-        const el = refElem.value;
+      const el = refElem.value;
+      if (useScrollbar) {
         const viewInnerEl = refVirtualBody.value;
-        const resizeObserver = globalResize.create(() => {
+        const scrollObserver = globalResize.create(() => {
           reFlag.value++;
         });
         if (el) {
-          resizeObserver.observe(el);
-          if (autoResize) {
-            resizeObserver.observe(el.parentElement);
-          }
+          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;
       }
@@ -15963,11 +16065,15 @@ let crossListDragRowObj = null;
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onBeforeUnmount)(() => {
       const {
+        scrollObserver,
         resizeObserver
       } = internalData;
       if (resizeObserver) {
         resizeObserver.disconnect();
       }
+      if (scrollObserver) {
+        scrollObserver.disconnect();
+      }
       globalEvents.off($xeList, 'resize');
       external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().assign(reactData, list_createReactData());
       external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().assign(internalData, list_createInternalData());
@@ -31971,6 +32077,7 @@ const allActiveDrawers = [];
 
 
 
+
 /* harmony default export */ var drawer = (defineVxeComponent({
   name: 'VxeDrawer',
   props: {
@@ -32103,7 +32210,12 @@ const allActiveDrawers = [];
       default: () => getConfig().drawer.size || getConfig().size
     },
     beforeHideMethod: Function,
-    slots: Object
+    slots: Object,
+    useScrollbar: {
+      type: Boolean,
+      default: () => getDefaultConfig(getConfig().drawer.useScrollbar, getConfig().useScrollbar)
+    },
+    scrollbarConfig: Object
   },
   emits: ['update:modelValue', 'show', 'hide', 'before-hide', 'close', 'confirm', 'cancel', 'resize'],
   setup(props, context) {
@@ -32162,6 +32274,28 @@ const allActiveDrawers = [];
       }
       return 'wl';
     });
+    const computeScrollbarOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      return Object.assign({}, getConfig().modal.scrollbarConfig, props.scrollbarConfig);
+    });
+    const computeScrollbarProps = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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-drawer--scrollbar-content-view' + (viewClassName ? ' ' + viewClassName : ''),
+        viewInnerClassName: 'vxe-drawer--scrollbar-content-inner' + (viewClassName ? ' ' + viewInnerClassName : '')
+      };
+    });
     const computeMaps = {};
     const $xeDrawer = {
       xID,
@@ -32505,11 +32639,47 @@ const allActiveDrawers = [];
       const {
         slots: propSlots = {},
         content,
+        useScrollbar,
         useHtml
       } = props;
+      const scrollbarProps = computeScrollbarProps.value;
       const defaultSlot = slots.default || propSlots.default;
       const leftSlot = slots.left || propSlots.left;
       const rightSlot = slots.right || propSlots.right;
+      const contVNs = [];
+      if (useHtml && !defaultSlot) {
+        contVNs.push(useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
+          key: 'shc',
+          class: 'vxe-drawer--scrollbar-content',
+          ...scrollbarProps
+        }, {
+          default() {
+            return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+              class: 'vxe-drawer--scrollbar-content-html',
+              innerHTML: getFuncText(content)
+            })];
+          }
+        }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          key: 'hc',
+          class: 'vxe-drawer--content',
+          innerHTML: getFuncText(content)
+        }));
+      } else {
+        contVNs.push(useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
+          key: 'sdc',
+          class: 'vxe-drawer--scrollbar-content',
+          ...scrollbarProps
+        }, {
+          default: () => defaultSlot ? vn_getSlotVNs(defaultSlot({
+            $drawer: $xeDrawer
+          })) : getFuncText(content)
+        }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          key: 'dc',
+          class: 'vxe-drawer--content'
+        }, defaultSlot ? vn_getSlotVNs(defaultSlot({
+          $drawer: $xeDrawer
+        })) : getFuncText(content)));
+      }
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-drawer--body'
       }, [leftSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
@@ -32518,16 +32688,7 @@ const allActiveDrawers = [];
         $drawer: $xeDrawer
       }))) : renderEmptyElement($xeDrawer), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-drawer--body-default'
-      }, [useHtml && !defaultSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        key: 'hc',
-        class: 'vxe-drawer--content',
-        innerHTML: getFuncText(content)
-      }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        key: 'dc',
-        class: 'vxe-drawer--content'
-      }, defaultSlot ? vn_getSlotVNs(defaultSlot({
-        $drawer: $xeDrawer
-      })) : getFuncText(content))]), rightSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+      }, contVNs), rightSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-drawer--body-right'
       }, vn_getSlotVNs(rightSlot({
         $drawer: $xeDrawer
@@ -37758,6 +37919,7 @@ const ImagePreview = VxeImagePreview;
 
 
 
+
 /* harmony default export */ var layout_aside = (defineVxeComponent({
   name: 'VxeLayoutAside',
   props: {
@@ -37769,7 +37931,7 @@ const ImagePreview = VxeImagePreview;
     collapseConfig: Object,
     useScrollbar: {
       type: Boolean,
-      default: () => getConfig().layoutAside.useScrollbar
+      default: () => getDefaultConfig(getConfig().layoutAside.useScrollbar, getConfig().useScrollbar)
     },
     scrollbarConfig: Object,
     size: {
@@ -37916,6 +38078,7 @@ const LayoutAside = VxeLayoutAside;
 
 
 
+
 function layout_body_createInternalData() {
   return {};
 }
@@ -37934,7 +38097,7 @@ function layout_body_createReactData() {
     backtopConfig: Object,
     useScrollbar: {
       type: Boolean,
-      default: () => getConfig().layoutBody.useScrollbar
+      default: () => getDefaultConfig(getConfig().layoutBody.useScrollbar, getConfig().useScrollbar)
     },
     scrollbarConfig: Object,
     size: {
@@ -38552,7 +38715,7 @@ let nemuUniqueKey = 100000000;
     menuConfig: Object,
     useScrollbar: {
       type: Boolean,
-      default: () => menu_getConfig().menu.useScrollbar
+      default: () => getDefaultConfig(menu_getConfig().menu.useScrollbar, menu_getConfig().useScrollbar)
     },
     scrollbarConfig: Object,
     appendTo: {
@@ -39371,6 +39534,7 @@ const allActiveModals = [];
 
 
 
+
 const {
   warnLog: modal_warnLog,
   errLog: modal_errLog
@@ -39579,6 +39743,11 @@ const lockScrollCssWidthKey = '--vxe-ui-modal-lock-scroll-view-width';
     },
     beforeHideMethod: Function,
     slots: Object,
+    useScrollbar: {
+      type: Boolean,
+      default: () => getDefaultConfig(getConfig().modal.useScrollbar, getConfig().useScrollbar)
+    },
+    scrollbarConfig: Object,
     /**
      * 已废弃
      * @deprecated
@@ -39650,6 +39819,28 @@ const lockScrollCssWidthKey = '--vxe-ui-modal-lock-scroll-view-width';
     const computeZoomOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       return Object.assign({}, getConfig().modal.zoomConfig, props.zoomConfig);
     });
+    const computeScrollbarOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      return Object.assign({}, getConfig().modal.scrollbarConfig, props.scrollbarConfig);
+    });
+    const computeScrollbarProps = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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
@@ -40771,10 +40962,12 @@ const lockScrollCssWidthKey = '--vxe-ui-modal-lock-scroll-view-width';
         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;
@@ -40786,16 +40979,39 @@ const lockScrollCssWidthKey = '--vxe-ui-modal-lock-scroll-view-width';
           class: ['vxe-modal--status-icon', iconStatus || getIcon()[`MODAL_${status}`.toLocaleUpperCase()]]
         })]));
       }
-      contVNs.push(useHtml && !defaultSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        key: 'hc',
-        class: 'vxe-modal--content',
-        innerHTML: getFuncText(content)
-      }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        key: 'dc',
-        class: 'vxe-modal--content'
-      }, defaultSlot ? vn_getSlotVNs(defaultSlot({
-        $modal: $xeModal
-      })) : getFuncText(content)));
+      if (useHtml && !defaultSlot) {
+        contVNs.push(useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
+          key: 'shc',
+          class: 'vxe-modal--scrollbar-content',
+          ...scrollbarProps
+        }, {
+          default() {
+            return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+              class: 'vxe-modal--scrollbar-content-html',
+              innerHTML: getFuncText(content)
+            })];
+          }
+        }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          key: 'hc',
+          class: 'vxe-modal--content',
+          innerHTML: getFuncText(content)
+        }));
+      } else {
+        contVNs.push(useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
+          key: 'sdc',
+          class: 'vxe-modal--scrollbar-content',
+          ...scrollbarProps
+        }, {
+          default: () => defaultSlot ? vn_getSlotVNs(defaultSlot({
+            $modal: $xeModal
+          })) : getFuncText(content)
+        }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          key: 'dc',
+          class: 'vxe-modal--content'
+        }, defaultSlot ? vn_getSlotVNs(defaultSlot({
+          $modal: $xeModal
+        })) : getFuncText(content)));
+      }
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-modal--body'
       }, [leftSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
@@ -50624,7 +50840,7 @@ const scrollbarOffsetSize = 20;
     },
     useScrollbar: {
       type: Boolean,
-      default: () => getConfig().tabs.useScrollbar
+      default: () => getDefaultConfig(getConfig().tabs.useScrollbar, getConfig().useScrollbar)
     },
     scrollbarConfig: Object,
     // 已废弃
@@ -53179,8 +53395,9 @@ function tree_createInternalData() {
     indeterminateNodeMaps: {},
     treeExpandedMaps: {},
     treeExpandLazyLoadedMaps: {},
-    // 滚动条
     // resizeObserver: undefined,
+    // 滚动条
+    // scrollObserver: undefined,
     // isThumbDrag: false,
     thumbDragOffset: 0,
     yThumbTop: 0,
@@ -53336,7 +53553,7 @@ let crossTreeDragNodeObj = null;
     virtualYConfig: Object,
     useScrollbar: {
       type: Boolean,
-      default: () => tree_getConfig().tree.useScrollbar
+      default: () => getDefaultConfig(tree_getConfig().tree.useScrollbar, tree_getConfig().useScrollbar)
     },
     scrollbarConfig: Object
   },
@@ -53439,11 +53656,8 @@ let crossTreeDragNodeObj = null;
       return Object.assign({}, tree_getConfig().tree.menuConfig, props.menuConfig);
     });
     const computeWrapperStyles = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
-      const scrollbarOpts = computeScrollbarOpts.value;
-      const scrollbarXOpts = computeScrollbarXOpts.value;
-      const scrollbarYOpts = computeScrollbarYOpts.value;
-      const barWidth = getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), tree_getConfig().scrollbar.width);
-      const barHeight = getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), tree_getConfig().scrollbar.height);
+      const barWidth = computeScrollYWidth.value;
+      const barHeight = computeScrollXHeight.value;
       const stys = {};
       if (barWidth || barHeight) {
         stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(barWidth || barHeight);
@@ -53507,6 +53721,16 @@ let crossTreeDragNodeObj = null;
       const scrollbarOpts = computeScrollbarOpts.value;
       return Object.assign({}, tree_getConfig().scrollbar.yConfig, scrollbarOpts.yConfig);
     });
+    const computeScrollXHeight = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarXOpts = computeScrollbarXOpts.value;
+      return getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), tree_getConfig().scrollbar.height);
+    });
+    const computeScrollYWidth = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarYOpts = computeScrollbarYOpts.value;
+      return getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), tree_getConfig().scrollbar.width);
+    });
     const computeScrollXVisible = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const scrollbarOpts = computeScrollbarOpts.value;
       const scrollbarXOpts = computeScrollbarXOpts.value;
@@ -53528,10 +53752,6 @@ let crossTreeDragNodeObj = null;
       return getDefaultConfig(getDefaultConfig(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), tree_getConfig().scrollbar.autoHide);
     });
     const computeScrollbarWrapperClss = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
-      const scrollbarOpts = computeScrollbarOpts.value;
-      const {
-        padding
-      } = scrollbarOpts;
       const {
         yThumbHeight,
         xThumbWidth
@@ -53540,12 +53760,7 @@ let crossTreeDragNodeObj = null;
       const scrollbarYToLeft = computeScrollbarYToLeft.value;
       const scrollXVisible = computeScrollXVisible.value;
       const scrollYVisible = computeScrollYVisible.value;
-      const scrollXAutoHide = computeScrollXAutoHide.value;
-      const scrollYAutoHide = computeScrollYAutoHide.value;
       return domUtils.buildClass(['vxe-scrollbar is--virtual', `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': scrollXAutoHide,
-        'ov-y--auto-hide': scrollYAutoHide,
         'overflow-y': yThumbHeight,
         'overflow-x': xThumbWidth
       });
@@ -57292,6 +57507,12 @@ let crossTreeDragNodeObj = null;
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.useScrollbar, () => {
       reFlag.value++;
     });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeScrollYWidth, () => {
+      reFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeScrollXHeight, () => {
+      reFlag.value++;
+    });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeScrollXVisible, () => {
       (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
         reFlag.value++;
@@ -57338,23 +57559,32 @@ let crossTreeDragNodeObj = null;
       if (menuConfig && !VxeUIContextMenu) {
         tree_errLog('vxe.error.reqComp', ['vxe-context-menu']);
       }
+      const el = refElem.value;
       if (useScrollbar || autoResize) {
-        const el = refElem.value;
         const viewInnerEl = refVirtualBody.value;
+        const scrollObserver = globalResize.create(() => {
+          updateScrollbar();
+        });
+        if (el) {
+          scrollObserver.observe(el);
+        }
+        if (viewInnerEl) {
+          scrollObserver.observe(viewInnerEl);
+        }
+        internalData.scrollObserver = scrollObserver;
+      }
+      if (autoResize) {
         const parentEl = getParentElem();
         const resizeObserver = globalResize.create(() => {
-          reFlag.value++;
+          if (props.autoResize) {
+            reFlag.value++;
+          }
         });
         if (el) {
           resizeObserver.observe(el);
-          if (autoResize) {
-            if (parentEl) {
-              resizeObserver.observe(parentEl);
-            }
-          }
         }
-        if (viewInnerEl) {
-          resizeObserver.observe(viewInnerEl);
+        if (parentEl) {
+          resizeObserver.observe(parentEl);
         }
         internalData.resizeObserver = resizeObserver;
       }
@@ -57365,11 +57595,15 @@ let crossTreeDragNodeObj = null;
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onBeforeUnmount)(() => {
       const {
+        scrollObserver,
         resizeObserver
       } = internalData;
       if (resizeObserver) {
         resizeObserver.disconnect();
       }
+      if (scrollObserver) {
+        scrollObserver.disconnect();
+      }
       globalEvents.off($xeTree, 'resize');
       external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().assign(reactData, tree_createReactData());
       external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().assign(internalData, tree_createInternalData());