vxe-pc-ui 3.20.0 → 3.20.2

package/lib/index.umd.js

@@ -11392,6 +11392,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; },
@@ -11647,6 +11648,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; },
@@ -11698,7 +11700,7 @@ var es_regexp_exec = __webpack_require__(7495);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.string.match.js
 var es_string_match = __webpack_require__(1761);
 ;// ./node_modules/@vxe-ui/core/es/src/core.js
-var coreVersion = "3.4.27";
+var coreVersion = "3.4.31";
 var VxeCore = {
   coreVersion: coreVersion,
   uiVersion: '',
@@ -12459,7 +12461,7 @@ function createLog(type, name) {
     return msg;
   };
 }
-var version = "3.4.27";
+var version = "3.4.31";
 var log = {
   create: createLog,
   warn: createLog('warn', "v".concat(version)),
@@ -13013,6 +13015,12 @@ var baseUtils = {
    */
   isEmpty: function isEmpty(value) {
     return value === null || value === undefined || value === '';
+  },
+  /**
+   * 获取配置值，如果存在则返回，如果不存在则使用默认值
+   */
+  getDefVal: function getDefVal(value, defVal) {
+    return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(value) ? defVal : value;
   }
 };
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.join.js
@@ -13031,7 +13039,7 @@ var domUtils = {
       for (var i = 0; i < staticClassNames.length; i++) {
         var val = staticClassNames[i];
         if (val) {
-          parts.push(val);
+          parts.push('' + val);
         }
       }
     }
@@ -13043,6 +13051,63 @@ var domUtils = {
     return parts.join(' ');
   }
 };
+;// ./node_modules/@vxe-ui/core/es/src/scrollbar-utils.js
+var scrollbarUtils = {
+  /**
+   * 计算滚动条滑块的长度
+   */
+  getThumbSize: function getThumbSize(viewportSize, contentSize, trackSize) {
+    if (contentSize <= viewportSize) {
+      return 0;
+    }
+    var ratio = viewportSize / contentSize;
+    var ideal = trackSize * ratio;
+    return Math.max(20, Math.min(ideal, trackSize));
+  },
+  /**
+   * 计算滚动条滑块的偏移位置
+   */
+  getThumbOffsetSize: function getThumbOffsetSize(offsetSize, viewportSize, contentSize, trackSize, thumbSize) {
+    var maxScroll = contentSize - viewportSize;
+    if (maxScroll <= 0) {
+      return 0;
+    }
+    var maxThumbOffset = trackSize - thumbSize;
+    if (maxThumbOffset <= 0) {
+      return 0;
+    }
+    var clamped = Math.min(Math.max(offsetSize, 0), maxScroll);
+    var ratio = clamped / maxScroll;
+    return ratio * maxThumbOffset;
+  },
+  /**
+   * 根据点击轨道的位置，计算滑块的偏移位置
+   */
+  getScrollFromClick: function getScrollFromClick(clickPosition, viewportSize, contentSize, trackSize, thumbSize) {
+    var maxThumbOffset = trackSize - thumbSize;
+    var maxScroll = contentSize - viewportSize;
+    if (maxScroll <= 0 || maxThumbOffset <= 0) {
+      return 0;
+    }
+    var thumbOffset = clickPosition - thumbSize / 2;
+    thumbOffset = Math.min(Math.max(thumbOffset, 0), maxThumbOffset);
+    var scrollOffset = thumbOffset / maxThumbOffset * maxScroll;
+    return scrollOffset;
+  },
+  /**
+   * 拖拽 thumb 时，根据鼠标位置计算滑块的偏移位置
+   */
+  getScrollFromDrag: function getScrollFromDrag(pointerPosition, dragOffset, viewportSize, contentSize, trackSize, thumbSize) {
+    var maxScroll = contentSize - viewportSize;
+    var maxThumbOffset = trackSize - thumbSize;
+    if (maxScroll <= 0 || maxThumbOffset <= 0) {
+      return 0;
+    }
+    var thumbOffset = pointerPosition - dragOffset;
+    thumbOffset = Math.min(Math.max(thumbOffset, 0), maxThumbOffset);
+    return thumbOffset / maxThumbOffset * maxScroll;
+  }
+};
 ;// ./node_modules/@vxe-ui/core/es/src/mixins.js
 
 
@@ -13107,6 +13172,7 @@ var globalMixins = {
 
 
 
+
 
 
 var installedPlugins = [];
@@ -13180,6 +13246,7 @@ var VxeUI = Object.assign(VxeCore, {
   permission: permission,
   baseUtils: baseUtils,
   domUtils: domUtils,
+  scrollbarUtils: scrollbarUtils,
   globalStore: globalStore,
   component: component,
   getComponent: getComponent,
@@ -13209,6 +13276,7 @@ setTheme();
 
 
 
+
 
 
 /* harmony default export */ var es_index_esm = ((/* unused pure expression or super */ null && (VxeUI)));
@@ -13347,7 +13415,7 @@ var es_array_filter = __webpack_require__(2008);
 
 
 var log_log = VxeUI.log;
-var uiVersion = "ui v".concat("3.20.0");
+var uiVersion = "ui v".concat("3.20.2");
 function createComponentLog(name) {
   var tableVersion = VxeUI.tableVersion ? "table v".concat(VxeUI.tableVersion) : '';
   var ganttVersion = VxeUI.ganttVersion ? "gantt v".concat(VxeUI.ganttVersion) : '';
@@ -13367,7 +13435,7 @@ var errLog = log_log.create('error', uiVersion);
 
 
 
-var ui_version = "3.20.0";
+var ui_version = "3.20.2";
 VxeUI.uiVersion = ui_version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -16243,6 +16311,9 @@ function enModelValue(nodeid) {
 function deModelValue(nodeid) {
   return nodeid ? decodeURIComponent("".concat(nodeid)) : nodeid;
 }
+function getDefaultConfig(val1, def1) {
+  return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(val1) ? def1 : val1;
+}
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.promise.js
 var es_promise = __webpack_require__(3362);
 ;// ./node_modules/@babel/runtime/helpers/esm/arrayLikeToArray.js
@@ -20887,6 +20958,7 @@ function getScrollFromDrag(pointerPosition, dragOffset, viewportSize, contentSiz
 
 
 
+
 var scrollbar_getConfig = VxeUI.getConfig,
   scrollbar_createEvent = VxeUI.createEvent,
   scrollbar_domUtils = VxeUI.domUtils,
@@ -20914,6 +20986,7 @@ function scrollbar_createInternalData() {
   name: 'VxeScrollbar',
   props: {
     id: [String, Number],
+    viewId: [String, Number],
     width: [String, Number],
     height: [String, Number],
     minWidth: [String, Number],
@@ -20933,6 +21006,18 @@ function scrollbar_createInternalData() {
         return scrollbar_getConfig().scrollbar.padding;
       }
     },
+    autoHide: {
+      type: Boolean,
+      default: function _default() {
+        return scrollbar_getConfig().scrollbar.autoHide;
+      }
+    },
+    visible: {
+      type: Boolean,
+      default: function _default() {
+        return scrollbar_getConfig().scrollbar.visible;
+      }
+    },
     xConfig: Object,
     yConfig: Object,
     className: {
@@ -20986,8 +21071,8 @@ function scrollbar_createInternalData() {
         minHeight = props.minHeight,
         maxWidth = props.maxWidth,
         maxHeight = props.maxHeight;
-      var xOpts = $xeScrollbar.computeXOpts;
-      var yOpts = $xeScrollbar.computeYOpts;
+      var barWidth = $xeScrollbar.computeYWidth;
+      var barHeight = $xeScrollbar.computeXHeight;
       var stys = {};
       if (width) {
         stys.width = toCssUnit(width);
@@ -21007,14 +21092,50 @@ function scrollbar_createInternalData() {
       if (maxHeight) {
         stys.maxHeight = toCssUnit(maxHeight);
       }
-      if (yOpts.width) {
-        stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(yOpts.width);
-      }
-      if (xOpts.height) {
-        stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(xOpts.height);
+      if (barWidth || barHeight) {
+        stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(barWidth || barHeight);
+        stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(barHeight || barWidth);
       }
       return stys;
     },
+    computeXHeight: function computeXHeight() {
+      var $xeScrollbar = this;
+      var xOpts = $xeScrollbar.computeXOpts;
+      return xOpts.height;
+    },
+    computeYWidth: function computeYWidth() {
+      var $xeScrollbar = this;
+      var yOpts = $xeScrollbar.computeYOpts;
+      return yOpts.width;
+    },
+    computeXVisible: function computeXVisible() {
+      var $xeScrollbar = this;
+      var props = $xeScrollbar;
+      var visible = props.visible;
+      var xOpts = $xeScrollbar.computeXOpts;
+      return getDefaultConfig(xOpts.visible, visible);
+    },
+    computeYVisible: function computeYVisible() {
+      var $xeScrollbar = this;
+      var props = $xeScrollbar;
+      var visible = props.visible;
+      var yOpts = $xeScrollbar.computeYOpts;
+      return getDefaultConfig(yOpts.visible, visible);
+    },
+    computeXAutoHide: function computeXAutoHide() {
+      var $xeScrollbar = this;
+      var props = $xeScrollbar;
+      var autoHide = props.autoHide;
+      var xOpts = $xeScrollbar.computeXOpts;
+      return getDefaultConfig(xOpts.autoHide, autoHide);
+    },
+    computeYAutoHide: function computeYAutoHide() {
+      var $xeScrollbar = this;
+      var props = $xeScrollbar;
+      var autoHide = props.autoHide;
+      var yOpts = $xeScrollbar.computeYOpts;
+      return getDefaultConfig(yOpts.autoHide, autoHide);
+    },
     computeWrapperClss: function computeWrapperClss() {
       var $xeScrollbar = this;
       var props = $xeScrollbar;
@@ -21024,14 +21145,16 @@ function scrollbar_createInternalData() {
         padding = props.padding;
       var yThumbHeight = reactData.yThumbHeight,
         xThumbWidth = reactData.xThumbWidth;
-      var xOpts = $xeScrollbar.computeXOpts;
-      var yOpts = $xeScrollbar.computeYOpts;
       var xToTop = $xeScrollbar.computeXToTop;
       var yToLeft = $xeScrollbar.computeYToLeft;
-      return scrollbar_domUtils.buildClass(['vxe-scrollbar', "ov-x--".concat(xOpts.visible || 'visible'), "ov-y--".concat(yOpts.visible || 'visible'), "sx-pos--".concat(xToTop ? 'top' : 'bottom'), "sy-pos--".concat(yToLeft ? 'left' : 'right'), native ? 'is--native' : 'is--virtual', className], {
+      var xVisible = $xeScrollbar.computeXVisible;
+      var yVisible = $xeScrollbar.computeYVisible;
+      var xAutoHide = $xeScrollbar.computeXAutoHide;
+      var yAutoHide = $xeScrollbar.computeYAutoHide;
+      return scrollbar_domUtils.buildClass(['vxe-scrollbar', "ov-x--".concat(xVisible === false ? 'hidden' : 'visible'), "ov-y--".concat(yVisible === false ? 'hidden' : 'visible'), "sx-pos--".concat(xToTop ? 'top' : 'bottom'), "sy-pos--".concat(yToLeft ? 'left' : 'right'), native ? 'is--native' : 'is--virtual', className], {
         'is--padding': padding,
-        'ov-x--auto-hide': xOpts.autoHide,
-        'ov-y--auto-hide': yOpts.autoHide,
+        'ov-x--auto-hide': xAutoHide,
+        'ov-y--auto-hide': yAutoHide,
         'overflow-y': yThumbHeight,
         'overflow-x': xThumbWidth
       });
@@ -21406,13 +21529,14 @@ function scrollbar_createInternalData() {
       var id = props.id,
         native = props.native,
         loading = props.loading,
+        viewId = props.viewId,
         viewAttrs = props.viewAttrs;
       var wrapperStyle = $xeScrollbar.computeWrapperStyle;
       var wrapperClss = $xeScrollbar.computeWrapperClss;
       var viewClss = $xeScrollbar.computeViewClss;
       var viewInnerClss = $xeScrollbar.computeViewInnerClss;
-      var xOpts = $xeScrollbar.computeXOpts;
-      var yOpts = $xeScrollbar.computeYOpts;
+      var xVisible = $xeScrollbar.computeXVisible;
+      var yVisible = $xeScrollbar.computeYVisible;
       var defaultSlot = slots.default;
       return h('div', {
         ref: 'refElem',
@@ -21424,7 +21548,9 @@ function scrollbar_createInternalData() {
       }, [h('div', {
         ref: 'refViewElem',
         class: viewClss,
-        attrs: viewAttrs,
+        attrs: _objectSpread2({
+          id: viewId || null
+        }, viewAttrs),
         on: {
           scroll: $xeScrollbar.scrollEvent
         }
@@ -21432,7 +21558,7 @@ function scrollbar_createInternalData() {
         key: 'vi',
         ref: 'refViewInnerElem',
         class: viewInnerClss
-      }, defaultSlot ? defaultSlot({}) : [])]), native || xOpts.visible === 'hidden' ? scrollbar_renderEmptyElement($xeScrollbar) : h('div', {
+      }, defaultSlot ? defaultSlot({}) : [])]), native || xVisible === false ? scrollbar_renderEmptyElement($xeScrollbar) : h('div', {
         ref: 'refTrackXElem',
         class: 'vxe-scrollbar--track-x',
         on: {
@@ -21448,7 +21574,7 @@ function scrollbar_createInternalData() {
           pointercancel: $xeScrollbar.cleatPointerThumbEvent,
           lostpointercapture: $xeScrollbar.cleatPointerThumbEvent
         }
-      })]), native || yOpts.visible === 'hidden' ? scrollbar_renderEmptyElement($xeScrollbar) : h('div', {
+      })]), native || yVisible === false ? scrollbar_renderEmptyElement($xeScrollbar) : h('div', {
         ref: 'refTrackYElem',
         class: 'vxe-scrollbar--track-y',
         on: {
@@ -21505,6 +21631,26 @@ function scrollbar_createInternalData() {
       var $xeScrollbar = this;
       $xeScrollbar.reFlag++;
     },
+    computeYWidth: function computeYWidth() {
+      var $xeScrollbar = this;
+      $xeScrollbar.reFlag++;
+    },
+    computeXHeight: function computeXHeight() {
+      var $xeScrollbar = this;
+      $xeScrollbar.reFlag++;
+    },
+    computeXVisible: function computeXVisible() {
+      var $xeScrollbar = this;
+      $xeScrollbar.$nextTick(function () {
+        $xeScrollbar.reFlag++;
+      });
+    },
+    computeYVisible: function computeYVisible() {
+      var $xeScrollbar = this;
+      $xeScrollbar.$nextTick(function () {
+        $xeScrollbar.reFlag++;
+      });
+    },
     reFlag: function reFlag() {
       var $xeScrollbar = this;
       $xeScrollbar.recalculate().then(function () {
@@ -21589,6 +21735,7 @@ var Scrollbar = VxeScrollbar;
 
 
 
+
 /* harmony default export */ var card = (/* define-vxe-component start */defineVxeComponent({
   name: 'VxeCard',
   mixins: [globalMixins.sizeMixin],
@@ -21630,7 +21777,7 @@ var Scrollbar = VxeScrollbar;
     useScrollbar: {
       type: Boolean,
       default: function _default() {
-        return getConfig().card.useScrollbar;
+        return getDefaultConfig(getConfig().card.useScrollbar, getConfig().useScrollbar);
       }
     },
     scrollbarConfig: Object
@@ -21662,6 +21809,20 @@ var Scrollbar = VxeScrollbar;
       var $xeCard = this;
       var props = $xeCard;
       return Object.assign({}, getConfig().card.scrollbarConfig, props.scrollbarConfig);
+    },
+    computeScrollbarProps: function computeScrollbarProps() {
+      var $xeCard = this;
+      var scrollbarOpts = $xeCard.computeScrollbarOpts;
+      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
+      };
     }
   }),
   methods: {
@@ -21698,6 +21859,7 @@ var Scrollbar = VxeScrollbar;
       var vSize = $xeCard.computeSize;
       var cardStyle = $xeCard.computeCardStyle;
       var scrollbarOpts = $xeCard.computeScrollbarOpts;
+      var scrollbarProps = $xeCard.computeScrollbarProps;
       var viewClassName = scrollbarOpts.viewClassName,
         viewInnerClassName = scrollbarOpts.viewInnerClassName;
       return h('div', {
@@ -21716,7 +21878,7 @@ var Scrollbar = VxeScrollbar;
         class: 'vxe-card--body'
       }, [leftSlot ? useScrollbar ? h(packages_scrollbar, {
         class: 'vxe-card--body-scrollbar-left',
-        props: _objectSpread2(_objectSpread2({}, scrollbarOpts), {}, {
+        props: _objectSpread2(_objectSpread2({}, scrollbarProps), {}, {
           viewClassName: 'vxe-card--body-scrollbar-left-view',
           viewInnerClassName: 'vxe-card--body-scrollbar-left-inner'
         }),
@@ -21729,7 +21891,7 @@ var Scrollbar = VxeScrollbar;
         class: 'vxe-card--body-left'
       }, vn_getSlotVNs(leftSlot({}))) : renderEmptyElement($xeCard), useScrollbar ? h(packages_scrollbar, {
         class: 'vxe-card--body-scrollbar-content',
-        props: _objectSpread2(_objectSpread2({}, scrollbarOpts), {}, {
+        props: _objectSpread2(_objectSpread2({}, scrollbarProps), {}, {
           viewClassName: 'vxe-card--body-scrollbar-content-view' + (viewClassName ? ' ' + viewClassName : ''),
           viewInnerClassName: 'vxe-card--body-scrollbar-content-inner' + (viewClassName ? ' ' + viewInnerClassName : '')
         }),
@@ -21742,7 +21904,7 @@ var Scrollbar = VxeScrollbar;
         class: 'vxe-card--body-content'
       }, defaultSlot ? vn_getSlotVNs(defaultSlot({})) : []), rightSlot ? useScrollbar ? h(packages_scrollbar, {
         class: 'vxe-card--body-scrollbar-right',
-        props: _objectSpread2(_objectSpread2({}, scrollbarOpts), {}, {
+        props: _objectSpread2(_objectSpread2({}, scrollbarProps), {}, {
           viewClassName: 'vxe-card--body-scrollbar-right-view',
           viewInnerClassName: 'vxe-card--body-scrollbar-right-inner'
         }),
@@ -22633,8 +22795,9 @@ function list_createInternalData() {
     afterList: [],
     fullKeyMaps: {},
     rowMaps: {},
-    // 滚动条
     // resizeObserver: undefined,
+    // 滚动条
+    // scrollObserver: undefined,
     // isThumbDrag: false,
     thumbDragOffset: 0,
     yThumbTop: 0,
@@ -22708,7 +22871,7 @@ function list_createInternalData() {
     useScrollbar: {
       type: Boolean,
       default: function _default() {
-        return getConfig().list.useScrollbar;
+        return getDefaultConfig(getConfig().list.useScrollbar, getConfig().useScrollbar);
       }
     },
     scrollbarConfig: Object
@@ -22780,17 +22943,15 @@ function list_createInternalData() {
     computeWrapperStyles: function computeWrapperStyles() {
       var $xeList = this;
       var rowHeight = $xeList.computeRowHeight;
-      var scrollbarXOpts = $xeList.computeScrollbarXOpts;
-      var scrollbarYOpts = $xeList.computeScrollbarYOpts;
+      var barWidth = $xeList.computeScrollYWidth;
+      var barHeight = $xeList.computeScrollXHeight;
       var stys = {};
       if (rowHeight) {
         stys['--vxe-ui-list-row-height'] = toCssUnit(rowHeight);
       }
-      if (scrollbarYOpts.width) {
-        stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(scrollbarYOpts.width);
-      }
-      if (scrollbarXOpts.height) {
-        stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(scrollbarXOpts.height);
+      if (barWidth || barHeight) {
+        stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(barWidth || barHeight);
+        stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(barHeight || barWidth);
       }
       return stys;
     },
@@ -22828,21 +22989,52 @@ function list_createInternalData() {
       var scrollbarOpts = $xeList.computeScrollbarOpts;
       return Object.assign({}, getConfig().scrollbar.yConfig, scrollbarOpts.yConfig);
     },
+    computeScrollXHeight: function computeScrollXHeight() {
+      var $xeList = this;
+      var scrollbarOpts = $xeList.computeScrollbarOpts;
+      var scrollbarXOpts = $xeList.computeScrollbarXOpts;
+      return getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height);
+    },
+    computeScrollYWidth: function computeScrollYWidth() {
+      var $xeList = this;
+      var scrollbarOpts = $xeList.computeScrollbarOpts;
+      var scrollbarYOpts = $xeList.computeScrollbarYOpts;
+      return getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width);
+    },
+    computeScrollXVisible: function computeScrollXVisible() {
+      var $xeList = this;
+      var scrollbarOpts = $xeList.computeScrollbarOpts;
+      var scrollbarXOpts = $xeList.computeScrollbarXOpts;
+      return getDefaultConfig(scrollbarXOpts.visible, scrollbarOpts.visible);
+    },
+    computeScrollYVisible: function computeScrollYVisible() {
+      var $xeList = this;
+      var scrollbarOpts = $xeList.computeScrollbarOpts;
+      var scrollbarYOpts = $xeList.computeScrollbarYOpts;
+      return getDefaultConfig(scrollbarYOpts.visible, scrollbarOpts.visible);
+    },
+    computeScrollXAutoHide: function computeScrollXAutoHide() {
+      var $xeList = this;
+      var scrollbarOpts = $xeList.computeScrollbarOpts;
+      var scrollbarXOpts = $xeList.computeScrollbarXOpts;
+      return getDefaultConfig(getDefaultConfig(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+    },
+    computeScrollYAutoHide: function computeScrollYAutoHide() {
+      var $xeList = this;
+      var scrollbarOpts = $xeList.computeScrollbarOpts;
+      var scrollbarYOpts = $xeList.computeScrollbarYOpts;
+      return getDefaultConfig(getDefaultConfig(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+    },
     computeScrollbarWrapperClss: function computeScrollbarWrapperClss() {
       var $xeList = this;
       var reactData = $xeList.reactData;
-      var scrollbarOpts = $xeList.computeScrollbarOpts;
-      var padding = scrollbarOpts.padding;
       var yThumbHeight = reactData.yThumbHeight,
         xThumbWidth = reactData.xThumbWidth;
-      var scrollbarXOpts = $xeList.computeScrollbarXOpts;
-      var scrollbarYOpts = $xeList.computeScrollbarYOpts;
       var scrollbarXToTop = $xeList.computeScrollbarXToTop;
       var scrollbarYToLeft = $xeList.computeScrollbarYToLeft;
-      return domUtils.buildClass(['vxe-scrollbar is--virtual', "ov-x--".concat(scrollbarXOpts.visible || 'visible'), "ov-y--".concat(scrollbarYOpts.visible || 'visible'), "sx-pos--".concat(scrollbarXToTop ? 'top' : 'bottom'), "sy-pos--".concat(scrollbarYToLeft ? 'left' : 'right')], {
-        'is--padding': padding,
-        'ov-x--auto-hide': scrollbarXOpts.autoHide,
-        'ov-y--auto-hide': scrollbarYOpts.autoHide,
+      var scrollXVisible = $xeList.computeScrollXVisible;
+      var scrollYVisible = $xeList.computeScrollYVisible;
+      return domUtils.buildClass(['vxe-scrollbar is--virtual', "ov-x--".concat(scrollXVisible === false ? 'hidden' : 'visible'), "ov-y--".concat(scrollYVisible === false ? 'hidden' : 'visible'), "sx-pos--".concat(scrollbarXToTop ? 'top' : 'bottom'), "sy-pos--".concat(scrollbarYToLeft ? 'left' : 'right')], {
         'overflow-y': yThumbHeight,
         'overflow-x': xThumbWidth
       });
@@ -23019,6 +23211,11 @@ function list_createInternalData() {
       var fullData = internalData.fullData;
       return fullData;
     },
+    getParentElem: function getParentElem() {
+      var $xeList = this;
+      var el = $xeList.$refs.refElem;
+      return el ? el.parentElement : null;
+    },
     calcTableHeight: function calcTableHeight(key) {
       var $xeList = this;
       var props = $xeList;
@@ -25042,7 +25239,9 @@ function list_createInternalData() {
         topSpaceHeight = reactData.topSpaceHeight,
         rowList = reactData.rowList,
         isAllChecked = reactData.isAllChecked,
-        isAllIndeterminate = reactData.isAllIndeterminate;
+        isAllIndeterminate = reactData.isAllIndeterminate,
+        xThumbWidth = reactData.xThumbWidth,
+        yThumbHeight = reactData.yThumbHeight;
       var defaultSlot = slots.default;
       var headerSlot = slots.header;
       var footerSlot = slots.footer;
@@ -25058,8 +25257,13 @@ function list_createInternalData() {
       var isHover = rowOpts.isHover,
         padding = rowOpts.padding;
       var isDrag = $xeList.computeIsDrag;
-      var scrollbarXOpts = $xeList.computeScrollbarXOpts;
-      var scrollbarYOpts = $xeList.computeScrollbarYOpts;
+      var scrollbarOpts = $xeList.computeScrollbarOpts;
+      var scrollXVisible = $xeList.computeScrollXVisible;
+      var scrollYVisible = $xeList.computeScrollYVisible;
+      var scrollbarXToTop = $xeList.computeScrollbarXToTop;
+      var scrollbarYToLeft = $xeList.computeScrollbarYToLeft;
+      var scrollXAutoHide = $xeList.computeScrollXAutoHide;
+      var scrollYAutoHide = $xeList.computeScrollYAutoHide;
       var scrollbarWrapperClss = $xeList.computeScrollbarWrapperClss;
       var showDefChekboxHead = showCheckbox && checkboxOpts.showHeader !== false;
       var leOns = {};
@@ -25068,9 +25272,9 @@ function list_createInternalData() {
       }
       return h('div', {
         ref: 'refElem',
-        class: ['vxe-list', className ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(className) ? className({
+        class: ['vxe-list', useScrollbar ? "ov-x--".concat(scrollXVisible === false ? 'hidden' : 'visible') : '', useScrollbar ? "ov-y--".concat(scrollYVisible === false ? 'hidden' : 'visible') : '', useScrollbar ? "sx-pos--".concat(scrollbarXToTop ? 'top' : 'bottom') : '', useScrollbar ? "sy-pos--".concat(scrollbarYToLeft ? 'left' : 'right') : '', className ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(className) ? className({
           $list: $xeList
-        }) : className : '', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(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)],
+        }) : className : '', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(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
       }, [headerSlot || showDefChekboxHead ? h('div', {
@@ -25117,21 +25321,12 @@ function list_createInternalData() {
         style: {
           marginTop: topSpaceHeight ? "".concat(topSpaceHeight, "px") : ''
         }
-      }, useScrollbar ? defaultSlot ? defaultSlot({
-        items: rowList,
-        $list: $xeList
-      }) : rowList.map(function (row, i) {
-        return $xeList.renderRow(h, row, i);
-      }) : [h('div', {
-        key: 'vi',
-        ref: 'refViewInnerElem',
-        class: 'vxe-scrollbar--view-inner'
       }, defaultSlot ? defaultSlot({
         items: rowList,
         $list: $xeList
       }) : rowList.map(function (row, i) {
         return $xeList.renderRow(h, row, i);
-      }))])]), footerSlot ? h('div', {
+      }))]), footerSlot ? h('div', {
         ref: 'refFooterElem',
         class: 'vxe-list--footer-wrapper'
       }, footerSlot({
@@ -25143,7 +25338,7 @@ function list_createInternalData() {
        */
       useScrollbar ? h('div', {
         class: scrollbarWrapperClss
-      }, [scrollbarXOpts.visible === 'hidden' ? renderEmptyElement($xeList) : h('div', {
+      }, [scrollXVisible === false ? renderEmptyElement($xeList) : h('div', {
         ref: 'refTrackXElem',
         class: 'vxe-scrollbar--track-x',
         on: {
@@ -25159,7 +25354,7 @@ function list_createInternalData() {
           pointercancel: $xeList.cleatPointerThumbEvent,
           lostpointercapture: $xeList.cleatPointerThumbEvent
         }
-      })]), scrollbarYOpts.visible === 'hidden' ? renderEmptyElement($xeList) : h('div', {
+      })]), scrollYVisible === false ? renderEmptyElement($xeList) : h('div', {
         ref: 'refTrackYElem',
         class: 'vxe-scrollbar--track-y',
         on: {
@@ -25209,13 +25404,37 @@ function list_createInternalData() {
       var $xeList = this;
       $xeList.reFlag++;
     },
+    useScrollbar: function useScrollbar() {
+      var $xeList = this;
+      $xeList.reFlag++;
+    },
     computeRowHeight: function computeRowHeight() {
       var $xeList = this;
       $xeList.reFlag++;
     },
-    reFlag: function reFlag() {
+    computeScrollYWidth: function computeScrollYWidth() {
+      var $xeList = this;
+      $xeList.reFlag++;
+    },
+    computeScrollXHeight: function computeScrollXHeight() {
+      var $xeList = this;
+      $xeList.reFlag++;
+    },
+    computeScrollXVisible: function computeScrollXVisible() {
       var $xeList = this;
       $xeList.$nextTick(function () {
+        $xeList.reFlag++;
+      });
+    },
+    computeScrollYVisible: function computeScrollYVisible() {
+      var $xeList = this;
+      $xeList.$nextTick(function () {
+        $xeList.reFlag++;
+      });
+    },
+    reFlag: function reFlag() {
+      var $xeList = this;
+      $xeList.recalculate().then(function () {
         $xeList.recalculate();
       });
     },
@@ -25265,20 +25484,32 @@ function list_createInternalData() {
     if (useKey && !keyField) {
       list_errLog('vxe.error.reqSupportProp', ['row-config.useKey', 'row-config.keyField']);
     }
-    if (useScrollbar || autoResize) {
-      var el = $xeList.$refs.refElem;
-      var viewInnerEl = $xeList.$refs.refViewInnerElem;
-      var resizeObserver = globalResize.create(function () {
+    var el = $xeList.$refs.refElem;
+    if (useScrollbar) {
+      var viewInnerEl = $xeList.$refs.refVirtualBody;
+      var scrollObserver = globalResize.create(function () {
         $xeList.reFlag++;
       });
-      resizeObserver.observe(el);
-      if (autoResize) {
-        if (el) {
-          resizeObserver.observe(el.parentElement);
-        }
+      if (el) {
+        scrollObserver.observe(el);
       }
       if (viewInnerEl) {
-        resizeObserver.observe(viewInnerEl);
+        scrollObserver.observe(viewInnerEl);
+      }
+      internalData.scrollObserver = scrollObserver;
+    }
+    if (autoResize) {
+      var parentEl = $xeList.getParentElem();
+      var resizeObserver = globalResize.create(function () {
+        if (props.autoResize) {
+          $xeList.reFlag++;
+        }
+      });
+      if (el) {
+        resizeObserver.observe(el);
+      }
+      if (parentEl) {
+        resizeObserver.observe(parentEl);
       }
       internalData.resizeObserver = resizeObserver;
     }
@@ -25297,10 +25528,14 @@ function list_createInternalData() {
     var $xeList = this;
     var reactData = $xeList.reactData;
     var internalData = $xeList.internalData;
-    var resizeObserver = internalData.resizeObserver;
+    var scrollObserver = internalData.scrollObserver,
+      resizeObserver = internalData.resizeObserver;
     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());
@@ -42612,6 +42847,8 @@ var allActiveDrawers = [];
 
 
 
+
+
 
 /* harmony default export */ var drawer = (/* define-vxe-component start */defineVxeComponent({
   name: 'VxeDrawer',
@@ -42802,7 +43039,14 @@ var allActiveDrawers = [];
       }
     },
     beforeHideMethod: Function,
-    slots: Object
+    slots: Object,
+    useScrollbar: {
+      type: Boolean,
+      default: function _default() {
+        return getDefaultConfig(getConfig().drawer.useScrollbar, getConfig().useScrollbar);
+      }
+    },
+    scrollbarConfig: Object
   },
   inject: {
     $xeModal: {
@@ -42875,6 +43119,29 @@ var allActiveDrawers = [];
           return 'wr';
       }
       return 'wl';
+    },
+    computeScrollbarOpts: function computeScrollbarOpts() {
+      var $xeDrawer = this;
+      var props = $xeDrawer;
+      return Object.assign({}, getConfig().modal.scrollbarConfig, props.scrollbarConfig);
+    },
+    computeScrollbarProps: function computeScrollbarProps() {
+      var $xeDrawer = this;
+      var scrollbarOpts = $xeDrawer.computeScrollbarOpts;
+      var viewClassName = scrollbarOpts.viewClassName,
+        viewInnerClassName = scrollbarOpts.viewInnerClassName;
+      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: {
@@ -43273,10 +43540,53 @@ var allActiveDrawers = [];
       var _props$slots3 = props.slots,
         propSlots = _props$slots3 === void 0 ? {} : _props$slots3,
         content = props.content,
+        useScrollbar = props.useScrollbar,
         useHtml = props.useHtml;
+      var scrollbarProps = $xeDrawer.computeScrollbarProps;
       var defaultSlot = slots.default || propSlots.default;
       var leftSlot = slots.left || propSlots.left;
       var rightSlot = slots.right || propSlots.right;
+      var contVNs = [];
+      if (useHtml && !defaultSlot) {
+        contVNs.push(useScrollbar ? h(packages_scrollbar, {
+          key: 'shc',
+          class: 'vxe-drawer--scrollbar-content',
+          props: scrollbarProps,
+          scopedSlots: {
+            default: function _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(packages_scrollbar, {
+          key: 'sdc',
+          class: 'vxe-drawer--scrollbar-content',
+          props: scrollbarProps,
+          scopedSlots: {
+            default: function _default() {
+              return 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'
       }, [leftSlot ? h('div', {
@@ -43285,17 +43595,7 @@ var allActiveDrawers = [];
         $drawer: $xeDrawer
       }, h)) : 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))]), rightSlot ? h('div', {
+      }, contVNs), rightSlot ? h('div', {
         class: 'vxe-drawer--body-right'
       }, $xeDrawer.callSlot(rightSlot, {
         $drawer: $xeDrawer
@@ -48790,6 +49090,7 @@ var ImagePreview = VxeImagePreview;
 
 
 
+
 /* harmony default export */ var layout_aside = (/* define-vxe-component start */defineVxeComponent({
   name: 'VxeLayoutAside',
   mixins: [globalMixins.sizeMixin],
@@ -48803,7 +49104,7 @@ var ImagePreview = VxeImagePreview;
     useScrollbar: {
       type: Boolean,
       default: function _default() {
-        return getConfig().layoutAside.useScrollbar;
+        return getDefaultConfig(getConfig().layoutAside.useScrollbar, getConfig().useScrollbar);
       }
     },
     scrollbarConfig: Object,
@@ -48879,10 +49180,7 @@ var ImagePreview = VxeImagePreview;
       var vSize = $xeLayoutAside.computeSize;
       var collapseOpts = $xeLayoutAside.computeCollapseOpts;
       var scrollbarOpts = $xeLayoutAside.computeScrollbarOpts;
-      var native = scrollbarOpts.native,
-        yConfig = scrollbarOpts.yConfig,
-        className = scrollbarOpts.className,
-        viewAttrs = scrollbarOpts.viewAttrs,
+      var className = scrollbarOpts.className,
         viewClassName = scrollbarOpts.viewClassName,
         viewInnerClassName = scrollbarOpts.viewInnerClassName;
       var defaultSlot = slots.default;
@@ -48891,13 +49189,16 @@ var ImagePreview = VxeImagePreview;
         style: varStyle
       }, [useScrollbar ? h(packages_scrollbar, {
         props: {
-          native: native,
+          width: scrollbarOpts.width,
+          height: scrollbarOpts.height,
+          autoHide: scrollbarOpts.autoHide,
+          visible: scrollbarOpts.visible,
           xConfig: {
-            visible: 'hidden'
+            visible: false
           },
-          yConfig: yConfig,
+          yConfig: scrollbarOpts.yConfig,
           className: 'vxe-layout-aside--scrollbar' + (className ? ' ' + className : ''),
-          viewAttrs: viewAttrs,
+          viewAttrs: scrollbarOpts.viewAttrs,
           viewClassName: 'vxe-layout-aside--scrollbar-view' + (viewClassName ? ' ' + viewClassName : ''),
           viewInnerClassName: 'vxe-layout-aside--scrollbar-inner' + (viewInnerClassName ? ' ' + viewInnerClassName : '')
         },
@@ -48949,6 +49250,7 @@ var LayoutAside = VxeLayoutAside;
 
 
 
+
 function layout_body_createInternalData() {
   return {};
 }
@@ -48971,7 +49273,7 @@ function layout_body_createReactData() {
     useScrollbar: {
       type: Boolean,
       default: function _default() {
-        return getConfig().layoutBody.useScrollbar;
+        return getDefaultConfig(getConfig().layoutBody.useScrollbar, getConfig().useScrollbar);
       }
     },
     scrollbarConfig: Object,
@@ -49005,6 +49307,30 @@ function layout_body_createReactData() {
       var $xeLayoutBody = this;
       var props = $xeLayoutBody;
       return Object.assign({}, getConfig().layoutBody.scrollbarConfig, props.scrollbarConfig);
+    },
+    computeScrollbarProps: function computeScrollbarProps() {
+      var $xeLayoutBody = this;
+      var props = $xeLayoutBody;
+      var backtopId = $xeLayoutBody.backtopId;
+      var showBacktop = props.showBacktop;
+      var scrollbarOpts = $xeLayoutBody.computeScrollbarOpts;
+      var className = scrollbarOpts.className,
+        viewClassName = scrollbarOpts.viewClassName,
+        viewInnerClassName = scrollbarOpts.viewInnerClassName;
+      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: _objectSpread2(_objectSpread2({}, scrollbarOpts.viewAttrs), {}, {
+          id: showBacktop ? backtopId || null : null
+        }),
+        viewClassName: 'vxe-layout-body--scrollbar-view' + (viewClassName ? ' ' + viewClassName : ''),
+        viewInnerClassName: 'vxe-layout-body--scrollbar-inner' + (viewInnerClassName ? ' ' + viewInnerClassName : '')
+      };
     }
   }),
   methods: {
@@ -49030,14 +49356,7 @@ function layout_body_createReactData() {
         showBacktop = props.showBacktop,
         useScrollbar = props.useScrollbar;
       var backtopOpts = $xeLayoutBody.computeBacktopOpts;
-      var scrollbarOpts = $xeLayoutBody.computeScrollbarOpts;
-      var native = scrollbarOpts.native,
-        xConfig = scrollbarOpts.xConfig,
-        yConfig = scrollbarOpts.yConfig,
-        className = scrollbarOpts.className,
-        viewAttrs = scrollbarOpts.viewAttrs,
-        viewClassName = scrollbarOpts.viewClassName,
-        viewInnerClassName = scrollbarOpts.viewInnerClassName;
+      var scrollbarProps = $xeLayoutBody.computeScrollbarProps;
       var vSize = $xeLayoutBody.computeSize;
       var defaultSlot = slots.default;
       var backtopSlot = slots.backtop;
@@ -49056,17 +49375,7 @@ function layout_body_createReactData() {
       return h('div', {
         class: ['vxe-layout-body', _defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--loading', loading), 'is--padding', padding)]
       }, [useScrollbar ? h(packages_scrollbar, {
-        props: {
-          native: native,
-          xConfig: xConfig,
-          yConfig: yConfig,
-          className: 'vxe-layout-body--scrollbar' + (className ? ' ' + className : ''),
-          viewAttrs: _objectSpread2(_objectSpread2({}, 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: function _default() {
             return defaultSlot ? defaultSlot({}) : [];
@@ -49570,7 +49879,7 @@ var nemuUniqueKey = 100000000;
     useScrollbar: {
       type: Boolean,
       default: function _default() {
-        return menu_getConfig().menu.useScrollbar;
+        return getDefaultConfig(menu_getConfig().menu.useScrollbar, menu_getConfig().useScrollbar);
       }
     },
     scrollbarConfig: Object,
@@ -50450,6 +50759,7 @@ var allActiveModals = [];
 
 
 
+
 
 
 var modal_createComponentLog = createComponentLog('modal'),
@@ -50734,6 +51044,13 @@ var lockScrollCssWidthKey = '--vxe-ui-modal-lock-scroll-view-width';
     },
     beforeHideMethod: Function,
     slots: Object,
+    useScrollbar: {
+      type: Boolean,
+      default: function _default() {
+        return getDefaultConfig(getConfig().modal.useScrollbar, getConfig().useScrollbar);
+      }
+    },
+    scrollbarConfig: Object,
     /**
      * 已废弃
      * @deprecated
@@ -50824,6 +51141,29 @@ var lockScrollCssWidthKey = '--vxe-ui-modal-lock-scroll-view-width';
       var $xeModal = this;
       var props = $xeModal;
       return Object.assign({}, getConfig().modal.zoomConfig, props.zoomConfig);
+    },
+    computeScrollbarOpts: function computeScrollbarOpts() {
+      var $xeModal = this;
+      var props = $xeModal;
+      return Object.assign({}, getConfig().modal.scrollbarConfig, props.scrollbarConfig);
+    },
+    computeScrollbarProps: function computeScrollbarProps() {
+      var $xeModal = this;
+      var scrollbarOpts = $xeModal.computeScrollbarOpts;
+      var viewClassName = scrollbarOpts.viewClassName,
+        viewInnerClassName = scrollbarOpts.viewInnerClassName;
+      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: {
@@ -52044,9 +52384,11 @@ var lockScrollCssWidthKey = '--vxe-ui-modal-lock-scroll-view-width';
         status = props.status,
         message = props.message,
         iconStatus = props.iconStatus,
+        useScrollbar = props.useScrollbar,
         useHtml = props.useHtml;
       var content = props.content || message;
       var isMsg = $xeModal.computeIsMsg;
+      var scrollbarProps = $xeModal.computeScrollbarProps;
       var defaultSlot = slots.default || propSlots.default;
       var leftSlot = slots.left || propSlots.left;
       var rightSlot = slots.right || propSlots.right;
@@ -52058,18 +52400,47 @@ var lockScrollCssWidthKey = '--vxe-ui-modal-lock-scroll-view-width';
           class: ['vxe-modal--status-icon', iconStatus || getIcon()["MODAL_".concat(status).toLocaleUpperCase()]]
         })]));
       }
-      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(packages_scrollbar, {
+          key: 'shc',
+          class: 'vxe-modal--scrollbar-content',
+          props: scrollbarProps,
+          scopedSlots: {
+            default: function _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(packages_scrollbar, {
+          key: 'sdc',
+          class: 'vxe-modal--scrollbar-content',
+          props: scrollbarProps,
+          scopedSlots: {
+            default: function _default() {
+              return 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'
       }, [leftSlot ? h('div', {
@@ -62976,7 +63347,7 @@ var scrollbarOffsetSize = 20;
     useScrollbar: {
       type: Boolean,
       default: function _default() {
-        return getConfig().tabs.useScrollbar;
+        return getDefaultConfig(getConfig().tabs.useScrollbar, getConfig().useScrollbar);
       }
     },
     scrollbarConfig: Object,
@@ -63103,6 +63474,24 @@ var scrollbarOffsetSize = 20;
       var $xeTabs = this;
       var props = $xeTabs;
       return Object.assign({}, getConfig().tabs.scrollbarConfig, props.scrollbarConfig);
+    },
+    computeScrollbarProps: function computeScrollbarProps() {
+      var $xeTabs = this;
+      var scrollbarOpts = $xeTabs.computeScrollbarOpts;
+      var viewClassName = scrollbarOpts.viewClassName,
+        viewInnerClassName = scrollbarOpts.viewInnerClassName;
+      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-tabs-pane--scrollbar-item-view' + (viewClassName ? ' ' + viewClassName : ''),
+        viewInnerClassName: 'vxe-tabs-pane--scrollbar-item-inner' + (viewClassName ? ' ' + viewInnerClassName : '')
+      };
     }
   }),
   methods: {
@@ -63786,19 +64175,14 @@ var scrollbarOffsetSize = 20;
       var name = item.name,
         slots = item.slots;
       var defaultSlot = slots ? slots.default : null;
-      var scrollbarOpts = $xeTabs.computeScrollbarOpts;
-      var viewClassName = scrollbarOpts.viewClassName,
-        viewInnerClassName = scrollbarOpts.viewInnerClassName;
+      var scrollbarProps = $xeTabs.computeScrollbarProps;
       if (name && initNames.includes(name)) {
         return useScrollbar ? h(packages_scrollbar, {
           key: "".concat(name),
           class: ['vxe-tabs-pane--scrollbar-item', {
             'is--visible': activeName === name
           }],
-          props: _objectSpread2(_objectSpread2({}, scrollbarOpts), {}, {
-            viewClassName: 'vxe-tabs-pane--scrollbar-item-view' + (viewClassName ? ' ' + viewClassName : ''),
-            viewInnerClassName: 'vxe-tabs-pane--scrollbar-item-inner' + (viewClassName ? ' ' + viewInnerClassName : '')
-          }),
+          props: scrollbarProps,
           scopedSlots: {
             default: function _default() {
               return defaultSlot ? $xeTabs.callSlot(defaultSlot, {
@@ -65498,6 +65882,7 @@ function getCrossTreeDragNodeInfo($xeTree) {
 
 
 
+
 
 
 var tree_createComponentLog = createComponentLog('tree'),
@@ -65995,6 +66380,34 @@ function insertTreeNode($xeTree, newRecords, isAppend) {
     nodeMaps[nodeid] = itemRest;
   });
 }
+function tree_createReactData() {
+  return {
+    parentHeight: 0,
+    customHeight: 0,
+    customMinHeight: 0,
+    customMaxHeight: 0,
+    currentNode: null,
+    scrollYLoad: false,
+    bodyHeight: 0,
+    topSpaceHeight: 0,
+    selectRadioKey: null,
+    treeList: [],
+    updateExpandedFlag: 1,
+    updateCheckboxFlag: 1,
+    // 滚动条
+    yThumbHeight: 0,
+    xThumbWidth: 0,
+    insertNodeFlag: 1,
+    removeNodeFlag: 1,
+    dragNode: null,
+    dragTipText: '',
+    isCrossDragNode: false,
+    tooltipStore: {
+      visible: false,
+      node: null
+    }
+  };
+}
 function tree_createInternalData() {
   return {
     // initialized: false,
@@ -66007,8 +66420,15 @@ function tree_createInternalData() {
     indeterminateNodeMaps: {},
     treeExpandedMaps: {},
     treeExpandLazyLoadedMaps: {},
-    lastScrollLeft: 0,
+    // resizeObserver: undefined,
+    // 滚动条
+    // scrollObserver: undefined,
+    // isThumbDrag: false,
+    thumbDragOffset: 0,
+    yThumbTop: 0,
+    xThumbLeft: 0,
     lastScrollTop: 0,
+    lastScrollLeft: 0,
     scrollYStore: {
       startIndex: 0,
       endIndex: 0,
@@ -66025,31 +66445,6 @@ function tree_createInternalData() {
     // hpTimeout: undefined
   };
 }
-function tree_createReactData() {
-  return {
-    parentHeight: 0,
-    customHeight: 0,
-    customMinHeight: 0,
-    customMaxHeight: 0,
-    currentNode: null,
-    scrollYLoad: false,
-    bodyHeight: 0,
-    topSpaceHeight: 0,
-    selectRadioKey: null,
-    treeList: [],
-    updateExpandedFlag: 1,
-    updateCheckboxFlag: 1,
-    insertNodeFlag: 1,
-    removeNodeFlag: 1,
-    dragNode: null,
-    dragTipText: '',
-    isCrossDragNode: false,
-    tooltipStore: {
-      visible: false,
-      node: null
-    }
-  };
-}
 /* harmony default export */ var tree = (/* define-vxe-component start */defineVxeComponent({
   name: 'VxeTree',
   mixins: [globalMixins.sizeMixin],
@@ -66228,7 +66623,14 @@ function tree_createReactData() {
         return tree_getConfig().tree.size || tree_getConfig().size;
       }
     },
-    virtualYConfig: Object
+    virtualYConfig: Object,
+    useScrollbar: {
+      type: Boolean,
+      default: function _default() {
+        return getDefaultConfig(tree_getConfig().tree.useScrollbar, tree_getConfig().useScrollbar);
+      }
+    },
+    scrollbarConfig: Object
   },
   provide: function provide() {
     var $xeTree = this;
@@ -66243,7 +66645,7 @@ function tree_createReactData() {
       xID: xID,
       reactData: reactData,
       crossTreeDragNodeInfo: crossTreeDragNodeGlobal,
-      hFlag: 0,
+      reFlag: 0,
       dataFlag: 0
     });
   },
@@ -66348,6 +66750,17 @@ function tree_createReactData() {
       var props = $xeTree;
       return Object.assign({}, tree_getConfig().tree.menuConfig, props.menuConfig);
     },
+    computeWrapperStyles: function computeWrapperStyles() {
+      var $xeTree = this;
+      var barWidth = $xeTree.computeScrollYWidth;
+      var barHeight = $xeTree.computeScrollXHeight;
+      var stys = {};
+      if (barWidth || barHeight) {
+        stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(barWidth || barHeight);
+        stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(barHeight || barWidth);
+      }
+      return stys;
+    },
     computeTreeStyle: function computeTreeStyle() {
       var $xeTree = this;
       var props = $xeTree;
@@ -66387,6 +66800,83 @@ function tree_createReactData() {
       var $xeTree = this;
       var props = $xeTree;
       return Object.assign({}, tree_getConfig().tree.filterConfig, props.filterConfig);
+    },
+    computeScrollbarOpts: function computeScrollbarOpts() {
+      var $xeTree = this;
+      var props = $xeTree;
+      return Object.assign({}, tree_getConfig().tree.scrollbarConfig, props.scrollbarConfig);
+    },
+    computeScrollbarXOpts: function computeScrollbarXOpts() {
+      var $xeTree = this;
+      var scrollbarOpts = $xeTree.computeScrollbarOpts;
+      return Object.assign({}, tree_getConfig().scrollbar.xConfig, scrollbarOpts.xConfig, {
+        visible: false
+      });
+    },
+    computeScrollbarYOpts: function computeScrollbarYOpts() {
+      var $xeTree = this;
+      var scrollbarOpts = $xeTree.computeScrollbarOpts;
+      return Object.assign({}, tree_getConfig().scrollbar.yConfig, scrollbarOpts.yConfig);
+    },
+    computeScrollXHeight: function computeScrollXHeight() {
+      var $xeTree = this;
+      var scrollbarOpts = $xeTree.computeScrollbarOpts;
+      var scrollbarXOpts = $xeTree.computeScrollbarXOpts;
+      return getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), tree_getConfig().scrollbar.height);
+    },
+    computeScrollYWidth: function computeScrollYWidth() {
+      var $xeTree = this;
+      var scrollbarOpts = $xeTree.computeScrollbarOpts;
+      var scrollbarYOpts = $xeTree.computeScrollbarYOpts;
+      return getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), tree_getConfig().scrollbar.width);
+    },
+    computeScrollXVisible: function computeScrollXVisible() {
+      var $xeTree = this;
+      var scrollbarOpts = $xeTree.computeScrollbarOpts;
+      var scrollbarXOpts = $xeTree.computeScrollbarXOpts;
+      return getDefaultConfig(scrollbarXOpts.visible, scrollbarOpts.visible);
+    },
+    computeScrollYVisible: function computeScrollYVisible() {
+      var $xeTree = this;
+      var scrollbarOpts = $xeTree.computeScrollbarOpts;
+      var scrollbarYOpts = $xeTree.computeScrollbarYOpts;
+      return getDefaultConfig(scrollbarYOpts.visible, scrollbarOpts.visible);
+    },
+    computeScrollXAutoHide: function computeScrollXAutoHide() {
+      var $xeTree = this;
+      var scrollbarOpts = $xeTree.computeScrollbarOpts;
+      var scrollbarXOpts = $xeTree.computeScrollbarXOpts;
+      return getDefaultConfig(getDefaultConfig(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), tree_getConfig().scrollbar.autoHide);
+    },
+    computeScrollYAutoHide: function computeScrollYAutoHide() {
+      var $xeTree = this;
+      var scrollbarOpts = $xeTree.computeScrollbarOpts;
+      var scrollbarYOpts = $xeTree.computeScrollbarYOpts;
+      return getDefaultConfig(getDefaultConfig(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), tree_getConfig().scrollbar.autoHide);
+    },
+    computeScrollbarWrapperClss: function computeScrollbarWrapperClss() {
+      var $xeTree = this;
+      var reactData = $xeTree.reactData;
+      var yThumbHeight = reactData.yThumbHeight,
+        xThumbWidth = reactData.xThumbWidth;
+      var scrollbarXToTop = $xeTree.computeScrollbarXToTop;
+      var scrollbarYToLeft = $xeTree.computeScrollbarYToLeft;
+      var scrollXVisible = $xeTree.computeScrollXVisible;
+      var scrollYVisible = $xeTree.computeScrollYVisible;
+      return domUtils.buildClass(['vxe-scrollbar is--virtual', "ov-x--".concat(scrollXVisible === false ? 'hidden' : 'visible'), "ov-y--".concat(scrollYVisible === false ? 'hidden' : 'visible'), "sx-pos--".concat(scrollbarXToTop ? 'top' : 'bottom'), "sy-pos--".concat(scrollbarYToLeft ? 'left' : 'right')], {
+        'overflow-y': yThumbHeight,
+        'overflow-x': xThumbWidth
+      });
+    },
+    computeScrollbarXToTop: function computeScrollbarXToTop() {
+      var $xeTree = this;
+      var scrollbarXOpts = $xeTree.computeScrollbarXOpts;
+      return scrollbarXOpts.position === 'top';
+    },
+    computeScrollbarYToLeft: function computeScrollbarYToLeft() {
+      var $xeTree = this;
+      var scrollbarYOpts = $xeTree.computeScrollbarYOpts;
+      return scrollbarYOpts.position === 'left';
     }
   }),
   methods: {
@@ -67036,6 +67526,11 @@ function tree_createReactData() {
         }
       });
     },
+    updateScrollbar: function updateScrollbar() {
+      var $xeTree = this;
+      $xeTree.updateThumbSize();
+      $xeTree.updateThumbOffset();
+    },
     /**
      * 重新计算列表
      */
@@ -67060,6 +67555,7 @@ function tree_createReactData() {
           var parentPaddingSize = getPaddingTopBottomSize(parentEl);
           reactData.parentHeight = Math.max(headHeight + footHeight + rowHeight, parentEl.clientHeight - parentPaddingSize - headHeight - footHeight);
         }
+        $xeTree.updateScrollbar();
         $xeTree.updateHeight();
         return $xeTree.computeScrollLoad().then(function () {
           $xeTree.updateHeight();
@@ -67108,6 +67604,7 @@ function tree_createReactData() {
       var scrollLeft = scrollBodyElem.scrollLeft;
       var isX = scrollLeft !== internalData.lastScrollLeft;
       var isY = scrollTop !== internalData.lastScrollTop;
+      $xeTree.updateThumbOffset();
       internalData.lastScrollTop = scrollTop;
       internalData.lastScrollLeft = scrollLeft;
       if (reactData.scrollYLoad) {
@@ -68096,14 +68593,6 @@ function tree_createReactData() {
         checked: isChecked
       }, evnt);
     },
-    handleGlobalResizeEvent: function handleGlobalResizeEvent() {
-      var $xeTree = this;
-      var el = $xeTree.$refs.refElem;
-      if (!el || !el.clientWidth) {
-        return;
-      }
-      $xeTree.recalculate();
-    },
     reloadData: function reloadData(data) {
       var $xeTree = this;
       return $xeTree.loadData(data || []);
@@ -68902,6 +69391,189 @@ function tree_createReactData() {
         }, evnt);
       }
     },
+    // 滚动条
+    updateThumbSize: function updateThumbSize() {
+      var $xeTree = this;
+      var reactData = $xeTree.reactData;
+      var viewEl = $xeTree.$refs.refVirtualWrapper;
+      if (!viewEl) {
+        return;
+      }
+      if (!viewEl.clientHeight || !viewEl.clientHeight) {
+        return;
+      }
+      var trackXEl = $xeTree.$refs.refTrackXElem;
+      var xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
+      var thumbXElem = $xeTree.$refs.refThumbXElem;
+      if (thumbXElem) {
+        thumbXElem.style.width = xThumbWidth + 'px';
+      }
+      reactData.xThumbWidth = xThumbWidth;
+      var trackYEl = $xeTree.$refs.refTrackYElem;
+      var yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
+      var thumbYElem = $xeTree.$refs.refThumbYElem;
+      if (thumbYElem) {
+        thumbYElem.style.height = yThumbHeight + 'px';
+      }
+      reactData.yThumbHeight = yThumbHeight;
+    },
+    updateThumbOffset: function updateThumbOffset() {
+      var $xeTree = this;
+      var reactData = $xeTree.reactData;
+      var internalData = $xeTree.internalData;
+      var viewEl = $xeTree.$refs.refVirtualWrapper;
+      if (!viewEl) {
+        return;
+      }
+      if (!viewEl.clientHeight || !viewEl.clientHeight) {
+        return;
+      }
+      var xThumbWidth = reactData.xThumbWidth,
+        yThumbHeight = reactData.yThumbHeight;
+      var trackXEl = $xeTree.$refs.refTrackXElem;
+      var thumbXElem = $xeTree.$refs.refThumbXElem;
+      var xThumbLeft = trackXEl && xThumbWidth ? getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth, xThumbWidth) : 0;
+      internalData.xThumbLeft = xThumbLeft;
+      if (thumbXElem && xThumbWidth) {
+        thumbXElem.style.width = xThumbWidth + 'px';
+        thumbXElem.style.transform = "translateX(".concat(xThumbLeft, "px)");
+      }
+      var trackYEl = $xeTree.$refs.refTrackYElem;
+      var thumbYElem = $xeTree.$refs.refThumbYElem;
+      var yThumbTop = trackYEl && yThumbHeight ? getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight, yThumbHeight) : 0;
+      internalData.yThumbTop = yThumbTop;
+      if (thumbYElem && yThumbHeight) {
+        thumbYElem.style.height = yThumbHeight + 'px';
+        thumbYElem.style.transform = "translateY(".concat(yThumbTop, "px)");
+      }
+    },
+    clickTrackXEvent: function clickTrackXEvent(evnt) {
+      var $xeTree = this;
+      var reactData = $xeTree.reactData;
+      var trackEl = evnt.currentTarget;
+      if (trackEl !== evnt.target) {
+        return;
+      }
+      var viewEl = $xeTree.$refs.refVirtualWrapper;
+      if (!viewEl) {
+        return;
+      }
+      var xThumbWidth = reactData.xThumbWidth;
+      var trackRect = trackEl.getBoundingClientRect();
+      viewEl.scrollTo({
+        left: getScrollFromClick(evnt.clientX - trackRect.left, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth),
+        behavior: 'auto'
+      });
+    },
+    clickTrackYEvent: function clickTrackYEvent(evnt) {
+      var $xeTree = this;
+      var reactData = $xeTree.reactData;
+      var trackEl = evnt.currentTarget;
+      if (trackEl !== evnt.target) {
+        return;
+      }
+      var viewEl = $xeTree.$refs.refVirtualWrapper;
+      if (!viewEl) {
+        return;
+      }
+      var yThumbHeight = reactData.yThumbHeight;
+      var trackRect = trackEl.getBoundingClientRect();
+      viewEl.scrollTo({
+        top: getScrollFromClick(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
+        behavior: 'auto'
+      });
+    },
+    pointerdownThumbXEvent: function pointerdownThumbXEvent(evnt) {
+      var $xeTree = this;
+      var reactData = $xeTree.reactData;
+      var internalData = $xeTree.internalData;
+      var thumbEl = evnt.currentTarget;
+      internalData.isThumbDrag = true;
+      thumbEl.setPointerCapture(evnt.pointerId);
+      var viewEl = $xeTree.$refs.refVirtualWrapper;
+      if (!viewEl) {
+        return;
+      }
+      var xThumbWidth = reactData.xThumbWidth;
+      var trackEl = thumbEl.parentElement;
+      var trackRect = trackEl.getBoundingClientRect();
+      var pointerPosition = evnt.clientX - trackRect.left;
+      // 记录 thumb 的偏移
+      var thumbOffset = getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
+      internalData.thumbDragOffset = pointerPosition - thumbOffset;
+    },
+    pointermoveThumbXEvent: function pointermoveThumbXEvent(evnt) {
+      var $xeTree = this;
+      var reactData = $xeTree.reactData;
+      var internalData = $xeTree.internalData;
+      var thumbEl = evnt.currentTarget;
+      if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
+        return;
+      }
+      var isThumbDrag = internalData.isThumbDrag,
+        thumbDragOffset = internalData.thumbDragOffset;
+      if (isThumbDrag) {
+        var viewEl = $xeTree.$refs.refVirtualWrapper;
+        if (!viewEl) {
+          return;
+        }
+        var xThumbWidth = reactData.xThumbWidth;
+        var _thumbEl = evnt.currentTarget;
+        var trackEl = _thumbEl.parentElement;
+        var trackRect = trackEl.getBoundingClientRect();
+        // 更新偏移
+        viewEl.scrollLeft = getScrollFromDrag(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
+      }
+    },
+    cleatPointerThumbEvent: function cleatPointerThumbEvent(evnt) {
+      var $xeTree = this;
+      var internalData = $xeTree.internalData;
+      var thumbEl = evnt.currentTarget;
+      thumbEl.releasePointerCapture(evnt.pointerId);
+      internalData.isThumbDrag = false;
+    },
+    pointerdownThumbYEvent: function pointerdownThumbYEvent(evnt) {
+      var $xeTree = this;
+      var reactData = $xeTree.reactData;
+      var internalData = $xeTree.internalData;
+      var thumbEl = evnt.currentTarget;
+      internalData.isThumbDrag = true;
+      thumbEl.setPointerCapture(evnt.pointerId);
+      var viewEl = $xeTree.$refs.refVirtualWrapper;
+      if (!viewEl) {
+        return;
+      }
+      var yThumbHeight = reactData.yThumbHeight;
+      var trackEl = thumbEl.parentElement;
+      var trackRect = trackEl.getBoundingClientRect();
+      var pointerPosition = evnt.clientY - trackRect.top;
+      // 记录 thumb 的偏移
+      var thumbOffset = getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+      internalData.thumbDragOffset = pointerPosition - thumbOffset;
+    },
+    pointermoveThumbYEvent: function pointermoveThumbYEvent(evnt) {
+      var $xeTree = this;
+      var reactData = $xeTree.reactData;
+      var internalData = $xeTree.internalData;
+      var thumbEl = evnt.currentTarget;
+      if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
+        return;
+      }
+      var isThumbDrag = internalData.isThumbDrag,
+        thumbDragOffset = internalData.thumbDragOffset;
+      if (isThumbDrag) {
+        var viewEl = $xeTree.$refs.refVirtualWrapper;
+        if (!viewEl) {
+          return;
+        }
+        var yThumbHeight = reactData.yThumbHeight;
+        var _thumbEl2 = evnt.currentTarget;
+        var trackEl = _thumbEl2.parentElement;
+        var trackRect = trackEl.getBoundingClientRect();
+        // 更新偏移
+        viewEl.scrollTop = getScrollFromDrag(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+      }
+    },
     //
     // Render
     //
@@ -69229,22 +69901,27 @@ function tree_createReactData() {
       return renderEmptyElement($xeTree);
     },
     renderVN: function renderVN(h) {
+      var _ref;
       var $xeTree = this;
       var props = $xeTree;
       var slots = $xeTree.$scopedSlots;
       var reactData = $xeTree.reactData;
       var loading = props.loading,
         trigger = props.trigger,
-        showLine = props.showLine;
+        showLine = props.showLine,
+        useScrollbar = props.useScrollbar;
       var bodyHeight = reactData.bodyHeight,
         topSpaceHeight = reactData.topSpaceHeight,
         treeList = reactData.treeList,
-        tooltipStore = reactData.tooltipStore;
+        tooltipStore = reactData.tooltipStore,
+        xThumbWidth = reactData.xThumbWidth,
+        yThumbHeight = reactData.yThumbHeight;
       var vSize = $xeTree.computeSize;
       var radioOpts = $xeTree.computeRadioOpts;
       var checkboxOpts = $xeTree.computeCheckboxOpts;
       var loadingOpts = $xeTree.computeLoadingOpts;
       var isNodeHover = $xeTree.computeIsNodeHover;
+      var wrapperStyles = $xeTree.computeWrapperStyles;
       var treeStyle = $xeTree.computeTreeStyle;
       var dragOpts = $xeTree.computeDragOpts;
       var tooltipOpts = $xeTree.computeTooltipOpts;
@@ -69252,13 +69929,22 @@ function tree_createReactData() {
       var headerSlot = slots.header;
       var footerSlot = slots.footer;
       var tooltipSlot = slots.tooltip;
+      var scrollbarOpts = $xeTree.computeScrollbarOpts;
+      var scrollXVisible = $xeTree.computeScrollXVisible;
+      var scrollYVisible = $xeTree.computeScrollYVisible;
+      var scrollbarXToTop = $xeTree.computeScrollbarXToTop;
+      var scrollbarYToLeft = $xeTree.computeScrollbarYToLeft;
+      var scrollXAutoHide = $xeTree.computeScrollXAutoHide;
+      var scrollYAutoHide = $xeTree.computeScrollYAutoHide;
+      var scrollbarWrapperClss = $xeTree.computeScrollbarWrapperClss;
       var teOns = {};
       if (dragOpts.isCrossTreeDrag && !treeList.length) {
         teOns.dragover = $xeTree.handleCrossTreeNodeDragoverEmptyEvent;
       }
       return h('div', {
         ref: 'refElem',
-        class: ['vxe-tree', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'show--line', showLine), 'checkbox--highlight', checkboxOpts.highlight), 'radio--highlight', radioOpts.highlight), 'node--hover', isNodeHover), 'node--trigger', trigger === 'node'), 'is--loading', loading)],
+        class: ['vxe-tree', useScrollbar ? "ov-x--".concat(scrollXVisible === false ? 'hidden' : 'visible') : '', useScrollbar ? "ov-y--".concat(scrollYVisible === false ? 'hidden' : 'visible') : '', useScrollbar ? "sx-pos--".concat(scrollbarXToTop ? 'top' : 'bottom') : '', useScrollbar ? "sy-pos--".concat(scrollbarYToLeft ? 'left' : 'right') : '', (_ref = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ref, "size--".concat(vSize), vSize), 'show--line', showLine), '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), 'checkbox--highlight', checkboxOpts.highlight), 'radio--highlight', radioOpts.highlight), _defineProperty(_defineProperty(_defineProperty(_ref, 'node--hover', isNodeHover), 'node--trigger', trigger === 'node'), 'is--loading', loading))],
+        style: wrapperStyles,
         on: teOns
       }, [headerSlot ? h('div', {
         ref: 'refHeaderWrapperElem',
@@ -69289,6 +69975,44 @@ function tree_createReactData() {
       }, footerSlot({
         $tree: $xeTree
       })) : renderEmptyElement($xeTree),
+      /**
+       * 滚动条
+       */
+      useScrollbar ? h('div', {
+        class: scrollbarWrapperClss
+      }, [scrollXVisible === false ? renderEmptyElement($xeTree) : h('div', {
+        ref: 'refTrackXElem',
+        class: 'vxe-scrollbar--track-x',
+        on: {
+          click: $xeTree.clickTrackXEvent
+        }
+      }, [h('div', {
+        ref: 'refThumbXElem',
+        class: 'vxe-scrollbar--thumb-x',
+        on: {
+          pointerdown: $xeTree.pointerdownThumbXEvent,
+          pointermove: $xeTree.pointermoveThumbXEvent,
+          pointerup: $xeTree.cleatPointerThumbEvent,
+          pointercancel: $xeTree.cleatPointerThumbEvent,
+          lostpointercapture: $xeTree.cleatPointerThumbEvent
+        }
+      })]), scrollYVisible === false ? renderEmptyElement($xeTree) : h('div', {
+        ref: 'refTrackYElem',
+        class: 'vxe-scrollbar--track-y',
+        on: {
+          click: $xeTree.clickTrackYEvent
+        }
+      }, [h('div', {
+        ref: 'refThumbYElem',
+        class: 'vxe-scrollbar--thumb-y',
+        on: {
+          pointerdown: $xeTree.pointerdownThumbYEvent,
+          pointermove: $xeTree.pointermoveThumbYEvent,
+          pointerup: $xeTree.cleatPointerThumbEvent,
+          pointercancel: $xeTree.cleatPointerThumbEvent,
+          lostpointercapture: $xeTree.cleatPointerThumbEvent
+        }
+      })])]) : renderEmptyElement($xeTree),
       /**
        * 拖拽提示
        */
@@ -69378,19 +70102,45 @@ function tree_createReactData() {
     },
     height: function height() {
       var $xeTree = this;
-      $xeTree.hFlag++;
+      $xeTree.reFlag++;
     },
     minHeight: function minHeight() {
       var $xeTree = this;
-      $xeTree.hFlag++;
+      $xeTree.reFlag++;
     },
     maxHeight: function maxHeight() {
       var $xeTree = this;
-      $xeTree.hFlag++;
+      $xeTree.reFlag++;
+    },
+    useScrollbar: function useScrollbar() {
+      var $xeTree = this;
+      $xeTree.reFlag++;
+    },
+    computeScrollYWidth: function computeScrollYWidth() {
+      var $xeTree = this;
+      $xeTree.reFlag++;
     },
-    hFlag: function hFlag() {
+    computeScrollXHeight: function computeScrollXHeight() {
       var $xeTree = this;
-      $xeTree.recalculate();
+      $xeTree.reFlag++;
+    },
+    computeScrollXVisible: function computeScrollXVisible() {
+      var $xeTree = this;
+      $xeTree.$nextTick(function () {
+        $xeTree.reFlag++;
+      });
+    },
+    computeScrollYVisible: function computeScrollYVisible() {
+      var $xeTree = this;
+      $xeTree.$nextTick(function () {
+        $xeTree.reFlag++;
+      });
+    },
+    reFlag: function reFlag() {
+      var $xeTree = this;
+      $xeTree.recalculate().then(function () {
+        $xeTree.recalculate();
+      });
     }
   },
   created: function created() {
@@ -69410,7 +70160,9 @@ function tree_createReactData() {
       menuConfig = props.menuConfig,
       showOverflow = props.showOverflow,
       lazy = props.lazy,
-      loadMethod = props.loadMethod;
+      loadMethod = props.loadMethod,
+      autoResize = props.autoResize,
+      useScrollbar = props.useScrollbar;
     var dragOpts = $xeTree.computeDragOpts;
     if (!showOverflow) {
       tree_errLog('vxe.error.errProp', ['show-overflow=false', 'show-overflow=true']);
@@ -69431,12 +70183,25 @@ function tree_createReactData() {
     if (menuConfig && !VxeUIContextMenu) {
       tree_errLog('vxe.error.reqComp', ['vxe-context-menu']);
     }
-    if (props.autoResize) {
-      var el = $xeTree.$refs.refElem;
+    var el = $xeTree.$refs.refElem;
+    if (useScrollbar) {
+      var viewInnerEl = $xeTree.$refs.refVirtualBody;
+      var scrollObserver = globalResize.create(function () {
+        $xeTree.updateScrollbar();
+      });
+      if (el) {
+        scrollObserver.observe(el);
+      }
+      if (viewInnerEl) {
+        scrollObserver.observe(viewInnerEl);
+      }
+      internalData.scrollObserver = scrollObserver;
+    }
+    if (autoResize) {
       var parentEl = $xeTree.getParentElem();
       var resizeObserver = globalResize.create(function () {
         if (props.autoResize) {
-          $xeTree.recalculate();
+          $xeTree.reFlag++;
         }
       });
       if (el) {
@@ -69447,17 +70212,23 @@ function tree_createReactData() {
       }
       internalData.resizeObserver = resizeObserver;
     }
-    $xeTree.recalculate();
-    globalEvents.on($xeTree, 'resize', $xeTree.handleGlobalResizeEvent);
+    $xeTree.reFlag++;
+    globalEvents.on($xeTree, 'resize', function () {
+      $xeTree.reFlag++;
+    });
   },
   beforeDestroy: function beforeDestroy() {
     var $xeTree = this;
     var reactData = $xeTree.reactData;
     var internalData = $xeTree.internalData;
-    var resizeObserver = internalData.resizeObserver;
+    var scrollObserver = internalData.scrollObserver,
+      resizeObserver = internalData.resizeObserver;
     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());