vxe-pc-ui 3.20.7 → 3.20.9

package/lib/index.umd.js

@@ -11402,6 +11402,7 @@ __webpack_require__.d(__webpack_exports__, {
   setup: function() { return /* reexport */ setup; },
   sizeMixin: function() { return /* reexport */ sizeMixin; },
   use: function() { return /* reexport */ use; },
+  vScrollbarMixin: function() { return /* reexport */ vScrollbarMixin; },
   validators: function() { return /* reexport */ validators; },
   version: function() { return /* reexport */ ui_version; },
   watermark: function() { return /* reexport */ components_watermark; }
@@ -11659,6 +11660,7 @@ __webpack_require__.d(components_namespaceObject, {
   setup: function() { return setup; },
   sizeMixin: function() { return sizeMixin; },
   use: function() { return use; },
+  vScrollbarMixin: function() { return vScrollbarMixin; },
   validators: function() { return validators; },
   version: function() { return ui_version; },
   watermark: function() { return components_watermark; }
@@ -11702,7 +11704,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.32";
+var coreVersion = "3.4.35";
 var VxeCore = {
   coreVersion: coreVersion,
   uiVersion: '',
@@ -12463,7 +12465,7 @@ function createLog(type, name) {
     return msg;
   };
 }
-var version = "3.4.32";
+var version = "3.4.35";
 var log = {
   create: createLog,
   warn: createLog('warn', "v".concat(version)),
@@ -13023,15 +13025,104 @@ var baseUtils = {
    */
   getDefVal: function getDefVal(value, defVal) {
     return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(value) ? defVal : value;
+  },
+  /**
+   * 判断是否启用
+   */
+  isEnabled: function isEnabled(conf) {
+    return !!(conf && conf.enabled !== false);
+  },
+  /**
+   * 用于开关类型的配置项
+   * 局部启用规则：conf={}
+   * 局部禁用规则：conf={enabled:false}
+   * 全局默认启用规则：conf.enabled=true
+   */
+  hasEnableConf: function hasEnableConf(conf, opts) {
+    return !!(opts && (conf ? opts.enabled !== false : opts.enabled));
   }
 };
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.join.js
 var es_array_join = __webpack_require__(8598);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.regexp.constructor.js
+var es_regexp_constructor = __webpack_require__(4864);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.regexp.dot-all.js
+var es_regexp_dot_all = __webpack_require__(7465);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.regexp.sticky.js
+var es_regexp_sticky = __webpack_require__(7745);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.regexp.to-string.js
+var es_regexp_to_string = __webpack_require__(8781);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.string.replace.js
+var es_string_replace = __webpack_require__(5440);
 ;// ./node_modules/@vxe-ui/core/es/src/dom-utils.js
 
 
 
+
+
+
+
+
+
+
+
+var reClsMap = {};
+function getClsRE(cls) {
+  if (!reClsMap[cls]) {
+    reClsMap[cls] = new RegExp("(?:^|\\s)".concat(cls, "(?!\\S)"), 'g');
+  }
+  return reClsMap[cls];
+}
+/**
+ * 判断元素是否包含 class
+ */
+function hasClass(elem, cls) {
+  if (elem) {
+    if (elem.classList) {
+      return elem.classList.contains(cls);
+    }
+    return !!(elem.className && elem.className.match && elem.className.match(getClsRE(cls)));
+  }
+  return false;
+}
+/**
+ * 给元素删除 class
+ */
+function removeClass(elem, cls) {
+  if (elem && hasClass(elem, cls)) {
+    elem.className = elem.className.replace(getClsRE(cls), '');
+  }
+}
 var domUtils = {
+  /**
+   * 判断是否像素px单位 '100px' | 100
+   */
+  isPx: function isPx(val) {
+    return val && /^\d+(\.\d+)?(px)?$/.test(val);
+  },
+  /**
+   * 判断是否百分比%单位 '100%'
+   */
+  isScale: function isScale(val) {
+    return val && /^\d+(\.\d+)?%$/.test(val);
+  },
+  /**
+   * 判断元素是否包含 class
+   */
+  hasClass: hasClass,
+  /**
+   * 给元素删除 class
+   */
+  removeClass: removeClass,
+  /**
+   * 给元素增加 class
+   */
+  addClass: function addClass(elem, cls) {
+    if (elem && !hasClass(elem, cls)) {
+      removeClass(elem, cls);
+      elem.className = elem.className + ' ' + cls;
+    }
+  },
   /**
    * 生成 className
    */
@@ -13305,6 +13396,7 @@ var popperUtils = {
 ;// ./node_modules/@vxe-ui/core/es/src/mixins.js
 
 
+
 var sizeMixin = external_commonjs_vue_commonjs2_vue_root_Vue_default().extend({
   inject: {
     $xeSizeInfo: {
@@ -13329,6 +13421,30 @@ var sizeMixin = external_commonjs_vue_commonjs2_vue_root_Vue_default().extend({
     }
   }
 });
+var vScrollbarMixin = external_commonjs_vue_commonjs2_vue_root_Vue_default().extend({
+  inject: {
+    $xeScrollbarInfo: {
+      default: null
+    }
+  },
+  provide: function provide() {
+    var _this2 = this;
+    return {
+      $xeScrollbarInfo: {
+        getIsVScrollbar: function getIsVScrollbar() {
+          return _this2.computeIsVScrollbar;
+        }
+      }
+    };
+  },
+  computed: {
+    computeIsVScrollbar: function computeIsVScrollbar() {
+      var useScrollbar = this.useScrollbar;
+      var $xeScrollbarInfo = this.$xeScrollbarInfo;
+      return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isBoolean(useScrollbar) ? useScrollbar : $xeScrollbarInfo ? $xeScrollbarInfo.getIsVScrollbar() : null;
+    }
+  }
+});
 var permissionMixin = external_commonjs_vue_commonjs2_vue_root_Vue_default().extend({
   computed: {
     computePermissionInfo: function computePermissionInfo() {
@@ -13338,6 +13454,7 @@ var permissionMixin = external_commonjs_vue_commonjs2_vue_root_Vue_default().ext
 });
 var globalMixins = {
   sizeMixin: sizeMixin,
+  vScrollbarMixin: vScrollbarMixin,
   permissionMixin: permissionMixin
 };
 ;// ./node_modules/@vxe-ui/core/es/index.esm.js
@@ -13612,7 +13729,7 @@ var es_array_filter = __webpack_require__(2008);
 
 
 var log_log = VxeUI.log;
-var uiVersion = "ui v".concat("3.20.7");
+var uiVersion = "ui v".concat("3.20.9");
 function createComponentLog(name) {
   var tableVersion = VxeUI.tableVersion ? "table v".concat(VxeUI.tableVersion) : '';
   var ganttVersion = VxeUI.ganttVersion ? "gantt v".concat(VxeUI.ganttVersion) : '';
@@ -13632,7 +13749,7 @@ var errLog = log_log.create('error', uiVersion);
 
 
 
-var ui_version = "3.20.7";
+var ui_version = "3.20.9";
 VxeUI.uiVersion = ui_version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -15431,16 +15548,6 @@ dynamicApp.use(VxeAlert);
 VxeUI.component(src_alert);
 var Alert = VxeAlert;
 /* harmony default export */ var packages_alert = (VxeAlert);
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es.string.replace.js
-var es_string_replace = __webpack_require__(5440);
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es.regexp.constructor.js
-var es_regexp_constructor = __webpack_require__(4864);
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es.regexp.dot-all.js
-var es_regexp_dot_all = __webpack_require__(7465);
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es.regexp.sticky.js
-var es_regexp_sticky = __webpack_require__(7745);
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es.regexp.to-string.js
-var es_regexp_to_string = __webpack_require__(8781);
 ;// ./packages/ui/src/dom.ts
 /* unused harmony import specifier */ var XEUtils;
 
@@ -15471,12 +15578,12 @@ function getTpImg() {
 function getPropClass(property, params) {
   return property ? (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(property) ? property(params) : property) || '' : '';
 }
-var reClsMap = {};
-function getClsRE(cls) {
-  if (!reClsMap[cls]) {
-    reClsMap[cls] = new RegExp("(?:^|\\s)".concat(cls, "(?!\\S)"), 'g');
+var dom_reClsMap = {};
+function dom_getClsRE(cls) {
+  if (!dom_reClsMap[cls]) {
+    dom_reClsMap[cls] = new RegExp("(?:^|\\s)".concat(cls, "(?!\\S)"), 'g');
   }
-  return reClsMap[cls];
+  return dom_reClsMap[cls];
 }
 function getNodeOffset(elem, container, rest) {
   if (elem) {
@@ -15499,23 +15606,23 @@ function isPx(val) {
 function isScale(val) {
   return val && /^\d+(\.\d+)?%$/.test(val);
 }
-function hasClass(elem, cls) {
+function dom_hasClass(elem, cls) {
   if (elem) {
     if (elem.classList) {
       return elem.classList.contains(cls);
     }
-    return !!(elem.className && elem.className.match && elem.className.match(getClsRE(cls)));
+    return !!(elem.className && elem.className.match && elem.className.match(dom_getClsRE(cls)));
   }
   return false;
 }
-function removeClass(elem, cls) {
-  if (elem && hasClass(elem, cls)) {
-    elem.className = elem.className.replace(getClsRE(cls), '');
+function dom_removeClass(elem, cls) {
+  if (elem && dom_hasClass(elem, cls)) {
+    elem.className = elem.className.replace(dom_getClsRE(cls), '');
   }
 }
 function addClass(elem, cls) {
-  if (elem && !hasClass(elem, cls)) {
-    removeClass(elem, cls);
+  if (elem && !dom_hasClass(elem, cls)) {
+    dom_removeClass(elem, cls);
     elem.className = "".concat(elem.className, " ").concat(cls);
   }
 }
@@ -15546,7 +15653,7 @@ function getEventTargetNode(evnt, container, queryCls, queryMethod) {
   var targetElem;
   var target = evnt.target.shadowRoot && evnt.composed ? evnt.composedPath()[0] || evnt.target : evnt.target;
   while (target && target.nodeType && target !== document) {
-    if (queryCls && hasClass(target, queryCls) && (!queryMethod || queryMethod(target))) {
+    if (queryCls && dom_hasClass(target, queryCls) && (!queryMethod || queryMethod(target))) {
       targetElem = target;
     } else if (target === container) {
       return {
@@ -16866,12 +16973,20 @@ function createInternalData() {
         return scrollbar_getConfig().scrollbar.viewInnerClassName;
       }
     },
+    /**
+     * 已废弃
+     * @deprecated
+     */
     autoResize: {
       type: Boolean,
       default: function _default() {
         return scrollbar_getConfig().scrollbar.autoResize;
       }
     },
+    /**
+     * 已废弃
+     * @deprecated
+     */
     syncResize: [Boolean, String, Number]
   },
   data: function data() {
@@ -17603,7 +17718,7 @@ function tooltip_createInternalData() {
 }
 /* harmony default export */ var tooltip = (/* define-vxe-component start */defineVxeComponent({
   name: 'VxeTooltip',
-  mixins: [globalMixins.sizeMixin],
+  mixins: [globalMixins.sizeMixin, globalMixins.vScrollbarMixin],
   props: {
     value: Boolean,
     size: {
@@ -17847,7 +17962,7 @@ function tooltip_createInternalData() {
         tipZindex = reactData.tipZindex;
       var panelElem = $xeTooltip.$refs.refElem;
       if (!targetElem || !panelElem) {
-        return;
+        return $xeTooltip.$nextTick();
       }
       var targetRect = targetElem.getBoundingClientRect();
       var targetWidth = targetElem.offsetWidth;
@@ -17883,12 +17998,16 @@ function tooltip_createInternalData() {
       tipStore.placement = ppObj.placement;
       tipStore.style = panelStyle;
       tipStore.arrowStyle.left = ppObj.arrowLeft ? "".concat(ppObj.arrowLeft, "px") : '';
+      return $xeTooltip.$nextTick();
     },
     updatePlacement: function updatePlacement() {
       var $xeTooltip = this;
-      $xeTooltip.updateTipStyle();
-      return $xeTooltip.$nextTick().then(function () {
+      return $xeTooltip.updateTipStyle().then(function () {
         return $xeTooltip.updateTipStyle();
+      }).then(function () {
+        setTimeout(function () {
+          return $xeTooltip.updateTipStyle();
+        }, 15);
       });
     },
     isActived: function isActived() {
@@ -18091,9 +18210,9 @@ function tooltip_createInternalData() {
       var reactData = $xeTooltip.reactData;
       var useHtml = props.useHtml,
         theme = props.theme,
-        useScrollbar = props.useScrollbar,
         useHTML = props.useHTML;
       var tipContent = reactData.tipContent;
+      var isVScrollbar = $xeTooltip.computeIsVScrollbar;
       var wrapperStyle = $xeTooltip.computeWrapperStyle;
       var contentSlot = slots.content;
       var contVNs = [];
@@ -18113,7 +18232,7 @@ function tooltip_createInternalData() {
           key: 'cd'
         }, "".concat(tipContent)));
       }
-      if (useScrollbar) {
+      if (isVScrollbar) {
         return h(packages_scrollbar, {
           key: 5,
           ref: 'contentScrollbar',
@@ -21967,7 +22086,7 @@ var Calendar = VxeCalendar;
 
 /* harmony default export */ var card = (/* define-vxe-component start */defineVxeComponent({
   name: 'VxeCard',
-  mixins: [globalMixins.sizeMixin],
+  mixins: [globalMixins.sizeMixin, globalMixins.vScrollbarMixin],
   props: {
     title: String,
     showTitleOverflow: {
@@ -22900,7 +23019,7 @@ function clearRowAnimate(elem, clss) {
       external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayEach(elem.querySelectorAll(clss.map(function (cls) {
         return "".concat(cls, ".").concat(rowMoveCls);
       }).join(',')), function (elem) {
-        return removeClass(elem, rowMoveCls);
+        return dom_removeClass(elem, rowMoveCls);
       });
     }
   }, 500);
@@ -23061,7 +23180,7 @@ function list_createInternalData() {
 }
 /* harmony default export */ var list = (/* define-vxe-component start */defineVxeComponent({
   name: 'VxeList',
-  mixins: [globalMixins.sizeMixin],
+  mixins: [globalMixins.sizeMixin, globalMixins.vScrollbarMixin],
   props: {
     data: Array,
     height: [Number, String],
@@ -23123,7 +23242,8 @@ function list_createInternalData() {
       xID: xID,
       reactData: reactData,
       crossListDragRowInfo: crossListDragRowGlobal,
-      reFlag: 0
+      reLayoutFlag: 0,
+      reScrollFlag: 0
     });
   },
   computed: _objectSpread2(_objectSpread2({}, {}), {}, {
@@ -23633,8 +23753,14 @@ function list_createInternalData() {
     },
     updateScrollbar: function updateScrollbar() {
       var $xeList = this;
-      $xeList.updateThumbSize();
-      $xeList.updateThumbOffset();
+      var isVScrollbar = $xeList.computeIsVScrollbar;
+      if (isVScrollbar) {
+        return $xeList.$nextTick().then(function () {
+          $xeList.updateThumbSize();
+          $xeList.updateThumbOffset();
+        });
+      }
+      return Promise.resolve();
     },
     /**
      * 重新计算列表
@@ -23647,7 +23773,7 @@ function list_createInternalData() {
         var parentEl = el.parentElement;
         var parentHeight = 0;
         // 如果是虚拟滚动条
-        if (parentEl && hasClass(parentEl, 'vxe-scrollbar--view-inner')) {
+        if (parentEl && dom_hasClass(parentEl, 'vxe-scrollbar--view-inner')) {
           parentEl = parentEl.parentElement;
         }
         if (parentEl) {
@@ -23655,10 +23781,11 @@ function list_createInternalData() {
           parentHeight = parentEl.clientHeight - Math.ceil(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(parentStyle.paddingLeft) + external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(parentStyle.paddingRight));
         }
         reactData.parentHeight = parentHeight;
-        $xeList.updateScrollbar();
         $xeList.updateHeight();
         if (el.clientWidth && el.clientHeight) {
-          return $xeList.computeScrollLoad();
+          return $xeList.computeScrollLoad().then(function () {
+            $xeList.updateScrollbar();
+          });
         }
       }
       return $xeList.$nextTick();
@@ -23672,7 +23799,7 @@ function list_createInternalData() {
         visibleSize = scrollYStore.visibleSize,
         offsetSize = scrollYStore.offsetSize,
         rowHeight = scrollYStore.rowHeight;
-      var scrollBodyElem = evnt.target;
+      var scrollBodyElem = evnt.currentTarget;
       var scrollTop = scrollBodyElem.scrollTop;
       var toVisibleIndex = Math.floor(scrollTop / rowHeight);
       var offsetStartIndex = Math.max(0, toVisibleIndex - 1 - offsetSize);
@@ -23689,7 +23816,7 @@ function list_createInternalData() {
       var $xeList = this;
       var reactData = $xeList.reactData;
       var internalData = $xeList.internalData;
-      var scrollBodyElem = evnt.target;
+      var scrollBodyElem = evnt.currentTarget;
       var scrollTop = scrollBodyElem.scrollTop;
       var scrollLeft = scrollBodyElem.scrollLeft;
       var isX = scrollLeft !== internalData.lastScrollLeft;
@@ -24163,7 +24290,7 @@ function list_createInternalData() {
         var clss = 'row--drag-origin';
         external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayEach(el.querySelectorAll(".".concat(clss)), function (elem) {
           elem.draggable = false;
-          removeClass(elem, clss);
+          dom_removeClass(elem, clss);
         });
       }
     },
@@ -25055,6 +25182,28 @@ function list_createInternalData() {
       }, evnt);
     },
     // 滚动条
+    bindScrollbarResize: function bindScrollbarResize() {
+      var $xeList = this;
+      var internalData = $xeList.internalData;
+      var scrollObserver = internalData.scrollObserver;
+      var isVScrollbar = $xeList.computeIsVScrollbar;
+      if (isVScrollbar) {
+        if (!scrollObserver) {
+          var el = $xeList.$refs.refElem;
+          var viewInnerEl = $xeList.$refs.refVirtualSpaceElem;
+          var _scrollObserver = list_globalResize.create(function () {
+            $xeList.reScrollFlag++;
+          });
+          if (el) {
+            _scrollObserver.observe(el);
+          }
+          if (viewInnerEl) {
+            _scrollObserver.observe(viewInnerEl);
+          }
+          internalData.scrollObserver = _scrollObserver;
+        }
+      }
+    },
     updateThumbSize: function updateThumbSize() {
       var $xeList = this;
       var reactData = $xeList.reactData;
@@ -25473,8 +25622,7 @@ function list_createInternalData() {
       var slots = $xeList.$scopedSlots;
       var showCheckbox = props.showCheckbox,
         className = props.className,
-        loading = props.loading,
-        useScrollbar = props.useScrollbar;
+        loading = props.loading;
       var bodyHeight = reactData.bodyHeight,
         topSpaceHeight = reactData.topSpaceHeight,
         rowList = reactData.rowList,
@@ -25486,6 +25634,7 @@ function list_createInternalData() {
       var headerSlot = slots.header;
       var footerSlot = slots.footer;
       var vSize = $xeList.computeSize;
+      var isVScrollbar = $xeList.computeIsVScrollbar;
       var wrapperStyles = $xeList.computeWrapperStyles;
       var virtualStyles = $xeList.computeVirtualStyles;
       var radioOpts = $xeList.computeRadioOpts;
@@ -25512,9 +25661,9 @@ function list_createInternalData() {
       }
       return h('div', {
         ref: 'refElem',
-        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({
+        class: ['vxe-list', isVScrollbar ? "ov-x--".concat(scrollXVisible === false ? 'hidden' : 'visible') : '', isVScrollbar ? "ov-y--".concat(scrollYVisible === false ? 'hidden' : 'visible') : '', isVScrollbar ? "sx-pos--".concat(scrollbarXToTop ? 'top' : 'bottom') : '', isVScrollbar ? "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(_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)],
+        }) : className : '', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--virtual-scrollbar', isVScrollbar), 'ov-padding', isVScrollbar && scrollbarOpts.padding), 'ov-x--auto-hide', isVScrollbar && scrollXAutoHide), 'ov-y--auto-hide', isVScrollbar && scrollYAutoHide), 'overflow-y', yThumbHeight), 'overflow-x', xThumbWidth), 'is--drag', isDrag), 'is--loading', loading)],
         on: leOns,
         style: wrapperStyles
       }, [headerSlot || showDefChekboxHead ? h('div', {
@@ -25545,6 +25694,7 @@ function list_createInternalData() {
           scroll: $xeList.scrollEvent
         }
       }, [h('div', {
+        ref: 'refVirtualSpaceElem',
         class: 'vxe-list--y-space',
         style: {
           height: bodyHeight ? "".concat(bodyHeight, "px") : ''
@@ -25576,7 +25726,7 @@ function list_createInternalData() {
       /**
        * 滚动条
        */
-      useScrollbar ? h('div', {
+      isVScrollbar ? h('div', {
         class: scrollbarWrapperClss
       }, [scrollXVisible === false ? renderEmptyElement($xeList) : h('div', {
         ref: 'refTrackXElem',
@@ -25634,50 +25784,61 @@ function list_createInternalData() {
     },
     height: function height() {
       var $xeList = this;
-      $xeList.reFlag++;
+      $xeList.reLayoutFlag++;
     },
     maxHeight: function maxHeight() {
       var $xeList = this;
-      $xeList.reFlag++;
+      $xeList.reLayoutFlag++;
     },
     syncResize: function syncResize() {
       var $xeList = this;
-      $xeList.reFlag++;
+      $xeList.reLayoutFlag++;
     },
-    useScrollbar: function useScrollbar() {
+    computeIsVScrollbar: function computeIsVScrollbar() {
       var $xeList = this;
-      $xeList.reFlag++;
+      $xeList.$nextTick(function () {
+        $xeList.bindScrollbarResize();
+        $xeList.$nextTick(function () {
+          $xeList.reLayoutFlag++;
+        });
+      });
     },
     computeRowHeight: function computeRowHeight() {
       var $xeList = this;
-      $xeList.reFlag++;
+      $xeList.reLayoutFlag++;
     },
     computeScrollYWidth: function computeScrollYWidth() {
       var $xeList = this;
-      $xeList.reFlag++;
+      $xeList.reLayoutFlag++;
     },
     computeScrollXHeight: function computeScrollXHeight() {
       var $xeList = this;
-      $xeList.reFlag++;
+      $xeList.reLayoutFlag++;
     },
     computeScrollXVisible: function computeScrollXVisible() {
       var $xeList = this;
       $xeList.$nextTick(function () {
-        $xeList.reFlag++;
+        $xeList.reLayoutFlag++;
       });
     },
     computeScrollYVisible: function computeScrollYVisible() {
       var $xeList = this;
       $xeList.$nextTick(function () {
-        $xeList.reFlag++;
+        $xeList.reLayoutFlag++;
       });
     },
-    reFlag: function reFlag() {
+    reLayoutFlag: function reLayoutFlag() {
       var $xeList = this;
       $xeList.recalculate().then(function () {
         $xeList.recalculate();
       });
     },
+    reScrollFlag: function reScrollFlag() {
+      var $xeList = this;
+      $xeList.updateScrollbar().then(function () {
+        $xeList.updateScrollbar();
+      });
+    },
     checkRowKey: function checkRowKey() {
       var $xeList = this;
       $xeList.updateRadioModeValue();
@@ -25701,8 +25862,7 @@ function list_createInternalData() {
     var showSeq = props.showSeq,
       showRadio = props.showRadio,
       showCheckbox = props.showCheckbox,
-      autoResize = props.autoResize,
-      useScrollbar = props.useScrollbar;
+      autoResize = props.autoResize;
     var rowOpts = $xeList.computeRowOpts;
     var useKey = rowOpts.useKey,
       keyField = rowOpts.keyField;
@@ -25724,25 +25884,12 @@ function list_createInternalData() {
     if (useKey && !keyField) {
       list_errLog('vxe.error.reqSupportProp', ['row-config.useKey', 'row-config.keyField']);
     }
-    var el = $xeList.$refs.refElem;
-    if (useScrollbar) {
-      var viewInnerEl = $xeList.$refs.refVirtualBody;
-      var scrollObserver = list_globalResize.create(function () {
-        $xeList.reFlag++;
-      });
-      if (el) {
-        scrollObserver.observe(el);
-      }
-      if (viewInnerEl) {
-        scrollObserver.observe(viewInnerEl);
-      }
-      internalData.scrollObserver = scrollObserver;
-    }
     if (autoResize) {
+      var el = $xeList.$refs.refElem;
       var parentEl = $xeList.getParentElem();
       var resizeObserver = list_globalResize.create(function () {
         if (props.autoResize) {
-          $xeList.reFlag++;
+          $xeList.reLayoutFlag++;
         }
       });
       if (el) {
@@ -25753,9 +25900,10 @@ function list_createInternalData() {
       }
       internalData.resizeObserver = resizeObserver;
     }
-    $xeList.reFlag++;
+    $xeList.reLayoutFlag++;
+    $xeList.bindScrollbarResize();
     list_globalEvents.on($xeList, 'resize', function () {
-      $xeList.reFlag++;
+      $xeList.reLayoutFlag++;
     });
   },
   activated: function activated() {
@@ -27422,7 +27570,7 @@ var input_createComponentLog = createComponentLog('input'),
       var internalData = $xeInput.internalData;
       $xeInput.numberStopDown();
       if (evnt.button === 0) {
-        var isPrevNumber = hasClass(evnt.currentTarget, 'is--prev');
+        var isPrevNumber = dom_hasClass(evnt.currentTarget, 'is--prev');
         if (isPrevNumber) {
           $xeInput.numberPrevEvent(evnt);
         } else {
@@ -34191,7 +34339,7 @@ var handleNumberString = function handleNumberString(val) {
         internalData.isMouseDown = false;
       } else {
         $xeNumberInput.numberStopAll();
-        var isAddNumber = hasClass(evnt.currentTarget, 'is--plus');
+        var isAddNumber = dom_hasClass(evnt.currentTarget, 'is--plus');
         if (isAddNumber) {
           $xeNumberInput.numberPlusEvent(evnt);
         } else {
@@ -34205,7 +34353,7 @@ var handleNumberString = function handleNumberString(val) {
       $xeNumberInput.numberStopAll();
       internalData.isMouseDown = true;
       if (evnt.button === 0) {
-        var isAddNumber = hasClass(evnt.currentTarget, 'is--plus');
+        var isAddNumber = dom_hasClass(evnt.currentTarget, 'is--plus');
         if (isAddNumber) {
           $xeNumberInput.numberPlusEvent(evnt);
         } else {
@@ -43096,7 +43244,7 @@ var allActiveDrawers = [];
 
 /* harmony default export */ var drawer = (/* define-vxe-component start */defineVxeComponent({
   name: 'VxeDrawer',
-  mixins: [globalMixins.sizeMixin, globalMixins.permissionMixin],
+  mixins: [globalMixins.sizeMixin, globalMixins.vScrollbarMixin, globalMixins.permissionMixin],
   props: {
     value: Boolean,
     id: String,
@@ -48246,7 +48394,7 @@ var IconPicker = VxeIconPicker;
       var $xeImagePreview = this;
       var reactData = $xeImagePreview.reactData;
       var elem = $xeImagePreview.$refs.refElem;
-      removeClass(elem, 'is--move');
+      dom_removeClass(elem, 'is--move');
       Object.assign(reactData, {
         offsetPct11: false,
         offsetScale: 0,
@@ -48505,7 +48653,7 @@ var IconPicker = VxeIconPicker;
       document.onmouseup = function () {
         document.onmousemove = domMousemove;
         document.onmouseup = domMouseup;
-        removeClass(elem, 'is--move');
+        dom_removeClass(elem, 'is--move');
       };
     },
     handleGlobalKeydownEvent: function handleGlobalKeydownEvent(evnt) {
@@ -48721,7 +48869,7 @@ var IconPicker = VxeIconPicker;
     var elem = $xeImagePreview.$refs.refElem;
     if (elem) {
       elem.removeEventListener('wheel', $xeImagePreview.wheelEvent);
-      removeClass(elem, 'is--move');
+      dom_removeClass(elem, 'is--move');
     }
     globalEvents.off($xeImagePreview, 'keydown');
   },
@@ -49338,7 +49486,7 @@ var ImagePreview = VxeImagePreview;
 
 /* harmony default export */ var layout_aside = (/* define-vxe-component start */defineVxeComponent({
   name: 'VxeLayoutAside',
-  mixins: [globalMixins.sizeMixin],
+  mixins: [globalMixins.sizeMixin, globalMixins.vScrollbarMixin],
   props: {
     width: [String, Number],
     collapsed: Boolean,
@@ -49504,7 +49652,7 @@ function layout_body_createReactData() {
 }
 /* harmony default export */ var layout_body = (/* define-vxe-component start */defineVxeComponent({
   name: 'VxeLayoutBody',
-  mixins: [globalMixins.sizeMixin],
+  mixins: [globalMixins.sizeMixin, globalMixins.vScrollbarMixin],
   props: {
     loading: Boolean,
     padding: Boolean,
@@ -49686,15 +49834,25 @@ var LayoutBody = VxeLayoutBody;
 
 
 
+var layout_container_getConfig = VxeUI.getConfig,
+  layout_container_baseUtils = VxeUI.baseUtils,
+  layout_container_createEvent = VxeUI.createEvent;
+var layout_container_getDefVal = layout_container_baseUtils.getDefVal;
 /* harmony default export */ var layout_container = (/* define-vxe-component start */defineVxeComponent({
   name: 'VxeLayoutContainer',
-  mixins: [globalMixins.sizeMixin],
+  mixins: [globalMixins.sizeMixin, globalMixins.vScrollbarMixin],
   props: {
     vertical: Boolean,
+    useScrollbar: {
+      type: Boolean,
+      default: function _default() {
+        return layout_container_getDefVal(layout_container_getConfig().layoutContainer.useScrollbar, layout_container_getConfig().useScrollbar);
+      }
+    },
     size: {
       type: String,
       default: function _default() {
-        return getConfig().layoutContainer.size || getConfig().size;
+        return layout_container_getConfig().layoutContainer.size || layout_container_getConfig().size;
       }
     }
   },
@@ -49713,7 +49871,7 @@ var LayoutBody = VxeLayoutBody;
     //
     dispatchEvent: function dispatchEvent(type, params, evnt) {
       var $xeLayoutContainer = this;
-      $xeLayoutContainer.$emit(type, createEvent(evnt, {
+      $xeLayoutContainer.$emit(type, layout_container_createEvent(evnt, {
         $layoutContainer: $xeLayoutContainer
       }, params));
     },
@@ -50079,7 +50237,7 @@ function menu_createReactData() {
 var nemuUniqueKey = 100000000;
 /* harmony default export */ var menu = (/* define-vxe-component start */defineVxeComponent({
   name: 'VxeMenu',
-  mixins: [globalMixins.sizeMixin, globalMixins.permissionMixin],
+  mixins: [globalMixins.sizeMixin, globalMixins.vScrollbarMixin, globalMixins.permissionMixin],
   props: {
     value: [String, Number],
     expandAll: Boolean,
@@ -51037,7 +51195,7 @@ var lockScrollAttrKey = 'data-vxe-lock-scroll';
 var lockScrollCssWidthKey = '--vxe-ui-modal-lock-scroll-view-width';
 /* harmony default export */ var modal = (/* define-vxe-component start */defineVxeComponent({
   name: 'VxeModal',
-  mixins: [globalMixins.sizeMixin, globalMixins.permissionMixin],
+  mixins: [globalMixins.sizeMixin, globalMixins.vScrollbarMixin, globalMixins.permissionMixin],
   props: {
     value: Boolean,
     id: String,
@@ -60530,7 +60688,7 @@ var splitter_createComponentLog = createComponentLog('splitter'),
           rsSplitterLineEl.style.display = '';
         }
         handleUpdate();
-        removeClass(el, 'is--drag');
+        dom_removeClass(el, 'is--drag');
         $xeSplitter.dispatchEvent('resize-end', {
           prevItem: prevItem,
           nextItem: nextItem,
@@ -63553,7 +63711,7 @@ var tabs_createComponentLog = createComponentLog('tabs'),
 var scrollbarOffsetSize = 20;
 /* harmony default export */ var tabs = (/* define-vxe-component start */defineVxeComponent({
   name: 'VxeTabs',
-  mixins: [globalMixins.sizeMixin],
+  mixins: [globalMixins.sizeMixin, globalMixins.vScrollbarMixin],
   props: {
     value: [String, Number, Boolean],
     options: Array,
@@ -63827,14 +63985,14 @@ var scrollbarOffsetSize = 20;
           if ((lrPosition ? scrollTop : scrollLeft) > 0) {
             addClass(headPrevEl, 'scrolling--middle');
           } else {
-            removeClass(headPrevEl, 'scrolling--middle');
+            dom_removeClass(headPrevEl, 'scrolling--middle');
           }
         }
         if (headNextEl) {
           if (lrPosition ? clientHeight < scrollHeight - Math.ceil(scrollTop) : clientWidth < scrollWidth - Math.ceil(scrollLeft)) {
             addClass(headNextEl, 'scrolling--middle');
           } else {
-            removeClass(headNextEl, 'scrolling--middle');
+            dom_removeClass(headNextEl, 'scrolling--middle');
           }
         }
       }
@@ -66209,7 +66367,7 @@ function clearNodeDropOrigin($xeTree) {
     var clss = 'node--drag-origin';
     external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayEach(el.querySelectorAll(".".concat(clss)), function (elem) {
       elem.draggable = false;
-      removeClass(elem, clss);
+      dom_removeClass(elem, clss);
     });
   }
 }
@@ -66707,7 +66865,7 @@ function tree_createInternalData() {
 }
 /* harmony default export */ var tree = (/* define-vxe-component start */defineVxeComponent({
   name: 'VxeTree',
-  mixins: [globalMixins.sizeMixin],
+  mixins: [globalMixins.sizeMixin, globalMixins.vScrollbarMixin],
   props: {
     data: Array,
     autoResize: {
@@ -66905,7 +67063,8 @@ function tree_createInternalData() {
       xID: xID,
       reactData: reactData,
       crossTreeDragNodeInfo: crossTreeDragNodeGlobal,
-      reFlag: 0,
+      reLayoutFlag: 0,
+      reScrollFlag: 0,
       dataFlag: 0
     });
   },
@@ -67788,8 +67947,14 @@ function tree_createInternalData() {
     },
     updateScrollbar: function updateScrollbar() {
       var $xeTree = this;
-      $xeTree.updateThumbSize();
-      $xeTree.updateThumbOffset();
+      var isVScrollbar = $xeTree.computeIsVScrollbar;
+      if (isVScrollbar) {
+        return $xeTree.$nextTick().then(function () {
+          $xeTree.updateThumbSize();
+          $xeTree.updateThumbOffset();
+        });
+      }
+      return Promise.resolve();
     },
     /**
      * 重新计算列表
@@ -67808,18 +67973,18 @@ function tree_createInternalData() {
         var headHeight = headerWrapperEl ? headerWrapperEl.clientHeight : 0;
         var footHeight = footerWrapperEl ? footerWrapperEl.clientHeight : 0;
         // 如果是虚拟滚动条
-        if (parentEl && hasClass(parentEl, 'vxe-scrollbar--view-inner')) {
+        if (parentEl && dom_hasClass(parentEl, 'vxe-scrollbar--view-inner')) {
           parentEl = parentEl.parentElement;
         }
         if (parentEl) {
           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();
           $xeTree.updateYSpace();
+          $xeTree.updateScrollbar();
         });
       }
       return $xeTree.$nextTick();
@@ -67859,7 +68024,7 @@ function tree_createInternalData() {
       var $xeTree = this;
       var reactData = $xeTree.reactData;
       var internalData = $xeTree.internalData;
-      var scrollBodyElem = evnt.target;
+      var scrollBodyElem = evnt.currentTarget;
       var scrollTop = scrollBodyElem.scrollTop;
       var scrollLeft = scrollBodyElem.scrollLeft;
       var isX = scrollLeft !== internalData.lastScrollLeft;
@@ -69652,6 +69817,28 @@ function tree_createInternalData() {
       }
     },
     // 滚动条
+    bindScrollbarResize: function bindScrollbarResize() {
+      var $xeTree = this;
+      var internalData = $xeTree.internalData;
+      var isVScrollbar = $xeTree.computeIsVScrollbar;
+      var scrollObserver = internalData.scrollObserver;
+      if (isVScrollbar) {
+        if (!scrollObserver) {
+          var el = $xeTree.$refs.refElem;
+          var viewInnerEl = $xeTree.$refs.refVirtualSpaceElem;
+          var _scrollObserver = globalResize.create(function () {
+            $xeTree.reScrollFlag++;
+          });
+          if (el) {
+            _scrollObserver.observe(el);
+          }
+          if (viewInnerEl) {
+            _scrollObserver.observe(viewInnerEl);
+          }
+          internalData.scrollObserver = _scrollObserver;
+        }
+      }
+    },
     updateThumbSize: function updateThumbSize() {
       var $xeTree = this;
       var reactData = $xeTree.reactData;
@@ -70168,8 +70355,7 @@ function tree_createInternalData() {
       var reactData = $xeTree.reactData;
       var loading = props.loading,
         trigger = props.trigger,
-        showLine = props.showLine,
-        useScrollbar = props.useScrollbar;
+        showLine = props.showLine;
       var bodyHeight = reactData.bodyHeight,
         topSpaceHeight = reactData.topSpaceHeight,
         treeList = reactData.treeList,
@@ -70177,6 +70363,7 @@ function tree_createInternalData() {
         xThumbWidth = reactData.xThumbWidth,
         yThumbHeight = reactData.yThumbHeight;
       var vSize = $xeTree.computeSize;
+      var isVScrollbar = $xeTree.computeIsVScrollbar;
       var radioOpts = $xeTree.computeRadioOpts;
       var checkboxOpts = $xeTree.computeCheckboxOpts;
       var loadingOpts = $xeTree.computeLoadingOpts;
@@ -70203,7 +70390,7 @@ function tree_createInternalData() {
       }
       return h('div', {
         ref: 'refElem',
-        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))],
+        class: ['vxe-tree', isVScrollbar ? "ov-x--".concat(scrollXVisible === false ? 'hidden' : 'visible') : '', isVScrollbar ? "ov-y--".concat(scrollYVisible === false ? 'hidden' : 'visible') : '', isVScrollbar ? "sx-pos--".concat(scrollbarXToTop ? 'top' : 'bottom') : '', isVScrollbar ? "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', isVScrollbar), 'ov-padding', isVScrollbar && scrollbarOpts.padding), 'ov-x--auto-hide', isVScrollbar && scrollXAutoHide), 'ov-y--auto-hide', isVScrollbar && 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', {
@@ -70219,6 +70406,7 @@ function tree_createInternalData() {
           scroll: $xeTree.scrollEvent
         }
       }, [h('div', {
+        ref: 'refVirtualSpaceElem',
         class: 'vxe-tree--y-space',
         style: {
           height: bodyHeight ? "".concat(bodyHeight, "px") : ''
@@ -70238,7 +70426,7 @@ function tree_createInternalData() {
       /**
        * 滚动条
        */
-      useScrollbar ? h('div', {
+      isVScrollbar ? h('div', {
         class: scrollbarWrapperClss
       }, [scrollXVisible === false ? renderEmptyElement($xeTree) : h('div', {
         ref: 'refTrackXElem',
@@ -70362,45 +70550,56 @@ function tree_createInternalData() {
     },
     height: function height() {
       var $xeTree = this;
-      $xeTree.reFlag++;
+      $xeTree.reLayoutFlag++;
     },
     minHeight: function minHeight() {
       var $xeTree = this;
-      $xeTree.reFlag++;
+      $xeTree.reLayoutFlag++;
     },
     maxHeight: function maxHeight() {
       var $xeTree = this;
-      $xeTree.reFlag++;
+      $xeTree.reLayoutFlag++;
     },
-    useScrollbar: function useScrollbar() {
+    computeIsVScrollbar: function computeIsVScrollbar() {
       var $xeTree = this;
-      $xeTree.reFlag++;
+      $xeTree.$nextTick(function () {
+        $xeTree.bindScrollbarResize();
+        $xeTree.$nextTick(function () {
+          $xeTree.reLayoutFlag++;
+        });
+      });
     },
     computeScrollYWidth: function computeScrollYWidth() {
       var $xeTree = this;
-      $xeTree.reFlag++;
+      $xeTree.reLayoutFlag++;
     },
     computeScrollXHeight: function computeScrollXHeight() {
       var $xeTree = this;
-      $xeTree.reFlag++;
+      $xeTree.reLayoutFlag++;
     },
     computeScrollXVisible: function computeScrollXVisible() {
       var $xeTree = this;
       $xeTree.$nextTick(function () {
-        $xeTree.reFlag++;
+        $xeTree.reLayoutFlag++;
       });
     },
     computeScrollYVisible: function computeScrollYVisible() {
       var $xeTree = this;
       $xeTree.$nextTick(function () {
-        $xeTree.reFlag++;
+        $xeTree.reLayoutFlag++;
       });
     },
-    reFlag: function reFlag() {
+    reLayoutFlag: function reLayoutFlag() {
       var $xeTree = this;
       $xeTree.recalculate().then(function () {
         $xeTree.recalculate();
       });
+    },
+    reScrollFlag: function reScrollFlag() {
+      var $xeTree = this;
+      $xeTree.updateScrollbar().then(function () {
+        $xeTree.updateScrollbar();
+      });
     }
   },
   created: function created() {
@@ -70421,8 +70620,7 @@ function tree_createInternalData() {
       showOverflow = props.showOverflow,
       lazy = props.lazy,
       loadMethod = props.loadMethod,
-      autoResize = props.autoResize,
-      useScrollbar = props.useScrollbar;
+      autoResize = props.autoResize;
     var dragOpts = $xeTree.computeDragOpts;
     if (!showOverflow) {
       tree_errLog('vxe.error.errProp', ['show-overflow=false', 'show-overflow=true']);
@@ -70443,25 +70641,12 @@ function tree_createInternalData() {
     if (menuConfig && !VxeUIContextMenu) {
       tree_errLog('vxe.error.reqComp', ['vxe-context-menu']);
     }
-    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 el = $xeTree.$refs.refElem;
       var parentEl = $xeTree.getParentElem();
       var resizeObserver = globalResize.create(function () {
         if (props.autoResize) {
-          $xeTree.reFlag++;
+          $xeTree.reLayoutFlag++;
         }
       });
       if (el) {
@@ -70472,9 +70657,10 @@ function tree_createInternalData() {
       }
       internalData.resizeObserver = resizeObserver;
     }
-    $xeTree.reFlag++;
+    $xeTree.reLayoutFlag++;
+    $xeTree.bindScrollbarResize();
     globalEvents.on($xeTree, 'resize', function () {
-      $xeTree.reFlag++;
+      $xeTree.reLayoutFlag++;
     });
   },
   beforeDestroy: function beforeDestroy() {