bkui-vue 2.0.1-beta.11 → 2.0.1-beta.111

package/lib/virtual-render/index.js

@@ -3,8 +3,8 @@ import "./virtual-render.less";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__ from "../shared";
 import * as __WEBPACK_EXTERNAL_MODULE_vue__ from "vue";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_config_provider_fe8577a3__ from "../config-provider";
-import * as __WEBPACK_EXTERNAL_MODULE_vue_types_22de060a__ from "vue-types";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_scrollbar_918447d0__ from "../scrollbar";
+import * as __WEBPACK_EXTERNAL_MODULE_vue_types_22de060a__ from "vue-types";
 import * as __WEBPACK_EXTERNAL_MODULE_lodash_throttle_a7b7506a__ from "lodash/throttle";
 /******/ // The require scope
 /******/ var __webpack_require__ = {};
@@ -77,38 +77,38 @@ function _toConsumableArray(arr) {
   return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
 ;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/typeof.js
-function _typeof(o) {
+function _typeof(obj) {
   "@babel/helpers - typeof";
 
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
-    return typeof o;
-  } : function (o) {
-    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-  }, _typeof(o);
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
 }
 ;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/toPrimitive.js
 
-function toPrimitive(t, r) {
-  if ("object" != _typeof(t) || !t) return t;
-  var e = t[Symbol.toPrimitive];
-  if (void 0 !== e) {
-    var i = e.call(t, r || "default");
-    if ("object" != _typeof(i)) return i;
+function _toPrimitive(input, hint) {
+  if (_typeof(input) !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (_typeof(res) !== "object") return res;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return ("string" === r ? String : Number)(t);
+  return (hint === "string" ? String : Number)(input);
 }
 ;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/toPropertyKey.js
 
 
-function toPropertyKey(t) {
-  var i = toPrimitive(t, "string");
-  return "symbol" == _typeof(i) ? i : String(i);
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return _typeof(key) === "symbol" ? key : String(key);
 }
 ;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/defineProperty.js
 
 function _defineProperty(obj, key, value) {
-  key = toPropertyKey(key);
+  key = _toPropertyKey(key);
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -124,11 +124,15 @@ function _defineProperty(obj, key, value) {
 ;// CONCATENATED MODULE: external "vue"
 var external_vue_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var external_vue_y = x => () => x
-const external_vue_namespaceObject = external_vue_x({ ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["h"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.h, ["nextTick"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.nextTick, ["onMounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onMounted, ["onUnmounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onUnmounted, ["reactive"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.reactive, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["watchEffect"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watchEffect });
+const external_vue_namespaceObject = external_vue_x({ ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["h"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.h, ["nextTick"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.nextTick, ["onMounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onMounted, ["onUnmounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onUnmounted, ["reactive"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.reactive, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["watch"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watch });
 ;// CONCATENATED MODULE: external "../config-provider"
 var config_provider_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var config_provider_y = x => () => x
 const config_provider_namespaceObject = config_provider_x({ ["usePrefix"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_config_provider_fe8577a3__.usePrefix });
+;// CONCATENATED MODULE: external "../scrollbar"
+var scrollbar_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var scrollbar_y = x => () => x
+const scrollbar_namespaceObject = scrollbar_x({ ["VirtualElement"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_scrollbar_918447d0__.VirtualElement, ["default"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_scrollbar_918447d0__["default"] });
 ;// CONCATENATED MODULE: external "vue-types"
 var external_vue_types_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var external_vue_types_y = x => () => x
@@ -195,7 +199,7 @@ var virtualRenderProps = _objectSpread({
   /** 整体最小高度 */
   minHeight: shared_namespaceObject.PropTypes.number.def(30),
   /** 整体最大高度 */
-  maxHeight: shared_namespaceObject.PropTypes.number,
+  maxHeight: shared_namespaceObject.PropTypes.oneOfType([shared_namespaceObject.PropTypes.number, shared_namespaceObject.PropTypes.string]),
   /**
    * 整体高度
    * 可设置具体值，如果设置为 100%，则组件会自动计算外层DOM元素offsetHeight，用于计算可渲染行数
@@ -222,8 +226,6 @@ var virtualRenderProps = _objectSpread({
   preloadItemCount: shared_namespaceObject.PropTypes.number.def(1),
   /** 外层Dom元素需要渲染成的目标元素 */
   renderAs: shared_namespaceObject.PropTypes.string.def('div'),
-  /** 内容层渲染成目标元素 */
-  contentAs: shared_namespaceObject.PropTypes.string.def('div'),
   /** top 滚动填充 */
   scrollOffsetTop: shared_namespaceObject.PropTypes.number.def(0),
   /**
@@ -326,10 +328,6 @@ var virtualRenderProps = _objectSpread({
     fixToTop: fixToTop
   };
 });
-;// CONCATENATED MODULE: external "../scrollbar"
-var scrollbar_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var scrollbar_y = x => () => x
-const scrollbar_namespaceObject = scrollbar_x({ ["default"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_scrollbar_918447d0__["default"] });
 ;// CONCATENATED MODULE: ../../packages/virtual-render/src/use-scrollbar.tsx
 /*
  * Tencent is pleased to support the open source community by making
@@ -357,66 +355,38 @@ const scrollbar_namespaceObject = scrollbar_x({ ["default"]: () => __WEBPACK_EXT
  * IN THE SOFTWARE.
  */
 
-
-/* harmony default export */ const use_scrollbar = (function (target, props) {
+/* harmony default export */ const use_scrollbar = (function (props) {
   var instance = null;
-  var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
-    resolveClassName = _usePrefix.resolveClassName;
-  var classNames = {
-    contentEl: resolveClassName('scrollbar-content-el'),
-    wrapper: resolveClassName('scrollbar-wrapper'),
-    scrollbar: resolveClassName('scrollbar'),
-    track: resolveClassName('scrollbar-track'),
-    visible: resolveClassName('scrollbar-visible'),
-    horizontal: resolveClassName('scrollbar-horizontal'),
-    vertical: resolveClassName('scrollbar-vertical'),
-    hover: resolveClassName('scrollbar-hover'),
-    dragging: resolveClassName('scrollbar-dragging'),
-    scrolling: resolveClassName('scrollbar-scrolling'),
-    scrollable: resolveClassName('scrollbar-scrollable'),
-    mouseEntered: resolveClassName('scrollbar-mouse-entered')
-  };
-  var init = function init(scrollFn, delegateXContent, delegateYContent) {
+  var init = function init(target) {
+    var _props$scrollbar;
     instance = new scrollbar_namespaceObject["default"](target.value, {
-      classNames: classNames,
-      wrapperNode: target.value,
-      scrollDelegate: {
-        scrollHeight: null,
-        scrollWidth: null
-      },
-      useSystemScrollYBehavior: !props.enabled,
-      useSystemScrollXBehavior: true,
-      delegateXContent: delegateXContent,
-      delegateYContent: delegateYContent,
-      onScrollCallback: scrollFn
+      scrollingThreshold: 120,
+      scrollSize: (_props$scrollbar = props.scrollbar) === null || _props$scrollbar === void 0 ? void 0 : _props$scrollbar.size
     });
   };
   var scrollTo = function scrollTo(x, y) {
-    var _props$scrollbar;
-    if ((_props$scrollbar = props.scrollbar) !== null && _props$scrollbar !== void 0 && _props$scrollbar.enabled) {
-      instance.scrollTo({
-        left: x,
-        top: y
-      });
-      return;
-    }
-    target.value.scrollTo(x, y);
+    var _instance;
+    (_instance = instance) === null || _instance === void 0 ? void 0 : _instance.scrollTo({
+      x: x,
+      y: y
+    });
   };
   var updateScrollHeight = function updateScrollHeight(height) {
-    var _instance, _instance2;
-    (_instance = instance) === null || _instance === void 0 || _instance.setOptions({
-      scrollDelegate: {
-        scrollHeight: height,
-        scrollWidth: null
-      }
-    });
-    (_instance2 = instance) === null || _instance2 === void 0 || _instance2.recalculate();
+    var _instance2;
+    if ((_instance2 = instance) !== null && _instance2 !== void 0 && _instance2.element) {
+      var _instance3, _instance4;
+      ((_instance3 = instance) === null || _instance3 === void 0 ? void 0 : _instance3.element).scrollHeight = height;
+      (_instance4 = instance) === null || _instance4 === void 0 ? void 0 : _instance4.update();
+    }
   };
   return {
     init: init,
     instance: instance,
     scrollTo: scrollTo,
-    classNames: classNames,
+    update: function update() {
+      var _instance5;
+      return (_instance5 = instance) === null || _instance5 === void 0 ? void 0 : _instance5.update();
+    },
     updateScrollHeight: updateScrollHeight
   };
 });
@@ -434,7 +404,7 @@ function _defineProperties(target, props) {
     descriptor.enumerable = descriptor.enumerable || false;
     descriptor.configurable = true;
     if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, toPropertyKey(descriptor.key), descriptor);
+    Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
   }
 }
 function _createClass(Constructor, protoProps, staticProps) {
@@ -484,15 +454,18 @@ const throttle_namespaceObject = throttle_x({ ["default"]: () => __WEBPACK_EXTER
  * Copyright © 2012-2019 Tencent BlueKing. All Rights Reserved. 蓝鲸智云 版权所有
  */
 
-function getMatchedIndex(maxCount, maxHeight, groupItemCount, callback) {
+function getMatchedIndex(maxCount, maxHeight, callback) {
   var startIndex = 0;
   var height = 0;
   var diffHeight = 0;
   var lastHeight = 0;
   for (; startIndex < maxCount; startIndex++) {
-    lastHeight = callback(startIndex, [startIndex * groupItemCount, (startIndex + 1) * groupItemCount, 'virtual']);
+    lastHeight = callback({
+      index: startIndex
+    });
     if (height + lastHeight > maxHeight) {
       diffHeight = maxHeight - height;
+      startIndex = startIndex + Math.round(diffHeight / lastHeight);
       break;
     }
     height += lastHeight;
@@ -507,8 +480,8 @@ function computedVirtualIndex(lineHeight, callback, pagination, wrapper, event)
   if (!wrapper || !event.offset) {
     return;
   }
-  var elScrollTop = event.offset.y;
-  var elScrollLeft = event.offset.x;
+  var elScrollTop = event.offset.y >= 0 ? event.offset.y : 0;
+  var elScrollLeft = event.offset.x >= 0 ? event.offset.x : 0;
   var elScrollHeight = wrapper.scrollHeight;
   var elOffsetHeight = wrapper.offsetHeight;
   var count = pagination.count,
@@ -517,16 +490,17 @@ function computedVirtualIndex(lineHeight, callback, pagination, wrapper, event)
   var targetEndIndex = 0;
   var translateY = 0;
   if (typeof lineHeight === 'number') {
-    targetStartIndex = Math.floor(elScrollTop / lineHeight);
+    targetStartIndex = Math.ceil(elScrollTop / lineHeight);
     targetEndIndex = Math.ceil(elOffsetHeight / lineHeight) + targetStartIndex;
     translateY = elScrollTop % lineHeight;
   }
   if (typeof lineHeight === 'function') {
-    var startValue = getMatchedIndex(count, elScrollTop, groupItemCount, lineHeight);
+    var maxCount = Math.ceil(count / groupItemCount);
+    var startValue = getMatchedIndex(maxCount, elScrollTop, lineHeight);
     targetStartIndex = startValue.startIndex > 0 ? startValue.startIndex : 0;
     translateY = startValue.diffHeight;
-    var endValue = getMatchedIndex(count, elOffsetHeight, groupItemCount, lineHeight);
-    targetEndIndex = endValue.startIndex + targetStartIndex;
+    var endValue = getMatchedIndex(maxCount, elOffsetHeight, lineHeight);
+    targetEndIndex = endValue.startIndex + targetStartIndex + 1;
   }
   var bottom = elScrollHeight - elOffsetHeight - elScrollTop;
   typeof callback === 'function' && callback(event, targetStartIndex, targetEndIndex, elScrollTop, elScrollTop, elScrollLeft, {
@@ -553,7 +527,10 @@ var VisibleRender = /*#__PURE__*/function () {
       if (scrollbar.enabled) {
         var _event$offset;
         return {
-          offset: (_event$offset = event.offset) !== null && _event$offset !== void 0 ? _event$offset : event
+          offset: (_event$offset = event.offset) !== null && _event$offset !== void 0 ? _event$offset : {
+            x: event.target.scrollLeft,
+            y: event.target.scrollTop
+          }
         };
       }
       if (event !== null && event !== void 0 && event.offset) {
@@ -574,10 +551,29 @@ var VisibleRender = /*#__PURE__*/function () {
     this.wrapper = el;
     var throttleDelay = binding.value.throttleDelay;
     this.delay = throttleDelay;
+    this.delegateWrapper = undefined;
   }
   _createClass(VisibleRender, [{
+    key: "scrollHeight",
+    get: function get() {
+      var _this$delegateWrapper, _this$delegateWrapper2, _this$wrapper;
+      return (_this$delegateWrapper = (_this$delegateWrapper2 = this.delegateWrapper) === null || _this$delegateWrapper2 === void 0 ? void 0 : _this$delegateWrapper2.scrollHeight) !== null && _this$delegateWrapper !== void 0 ? _this$delegateWrapper : (_this$wrapper = this.wrapper) === null || _this$wrapper === void 0 ? void 0 : _this$wrapper.scrollHeight;
+    }
+  }, {
+    key: "offsetHeight",
+    get: function get() {
+      var _this$delegateWrapper3, _this$delegateWrapper4, _this$wrapper2;
+      return (_this$delegateWrapper3 = (_this$delegateWrapper4 = this.delegateWrapper) === null || _this$delegateWrapper4 === void 0 ? void 0 : _this$delegateWrapper4.offsetHeight) !== null && _this$delegateWrapper3 !== void 0 ? _this$delegateWrapper3 : (_this$wrapper2 = this.wrapper) === null || _this$wrapper2 === void 0 ? void 0 : _this$wrapper2.offsetHeight;
+    }
+  }, {
+    key: "setDelegateWrapper",
+    value: function setDelegateWrapper(el) {
+      this.delegateWrapper = el;
+    }
+  }, {
     key: "render",
     value: function render(e) {
+      var _this$delegateWrapper5;
       var _this$binding$value = this.binding.value,
         _this$binding$value$l = _this$binding$value.lineHeight,
         lineHeight = _this$binding$value$l === void 0 ? 30 : _this$binding$value$l,
@@ -589,7 +585,7 @@ var VisibleRender = /*#__PURE__*/function () {
         var _e$offset, _e$offset$x, _e$offset2;
         var elScrollTop = (_e$offset = e.offset) === null || _e$offset === void 0 ? void 0 : _e$offset.y;
         var elScrollLeft = (_e$offset$x = (_e$offset2 = e.offset) === null || _e$offset2 === void 0 ? void 0 : _e$offset2.x) !== null && _e$offset$x !== void 0 ? _e$offset$x : 0;
-        var bottom = this.wrapper.scrollHeight - this.wrapper.offsetHeight - elScrollTop;
+        var bottom = this.scrollHeight - this.offsetHeight - elScrollTop;
         handleScrollCallback(e, null, null, elScrollTop, elScrollTop, elScrollLeft, {
           bottom: bottom >= 0 ? bottom : 0,
           scrollbar: e
@@ -609,7 +605,7 @@ var VisibleRender = /*#__PURE__*/function () {
         groupItemCount: groupItemCount,
         count: count,
         scrollLeft: scrollLeft
-      }, this.wrapper, e);
+      }, (_this$delegateWrapper5 = this.delegateWrapper) !== null && _this$delegateWrapper5 !== void 0 ? _this$delegateWrapper5 : this.wrapper, e);
     }
   }, {
     key: "executeThrottledRender",
@@ -619,14 +615,14 @@ var VisibleRender = /*#__PURE__*/function () {
   }, {
     key: "install",
     value: function install() {
-      var _this$wrapper;
-      (_this$wrapper = this.wrapper) === null || _this$wrapper === void 0 || _this$wrapper.addEventListener('scroll', this.executeThrottledRender.bind(this));
+      var _this$wrapper3;
+      (_this$wrapper3 = this.wrapper) === null || _this$wrapper3 === void 0 ? void 0 : _this$wrapper3.addEventListener('scroll', this.executeThrottledRender.bind(this));
     }
   }, {
     key: "uninstall",
     value: function uninstall() {
-      var _this$wrapper2, _this$wrapper2$remove;
-      (_this$wrapper2 = this.wrapper) === null || _this$wrapper2 === void 0 || (_this$wrapper2$remove = _this$wrapper2.removeListener) === null || _this$wrapper2$remove === void 0 || _this$wrapper2$remove.call(_this$wrapper2, 'scroll', this.executeThrottledRender.bind(this));
+      var _this$wrapper4, _this$wrapper4$remove;
+      (_this$wrapper4 = this.wrapper) === null || _this$wrapper4 === void 0 || (_this$wrapper4$remove = _this$wrapper4.removeListener) === null || _this$wrapper4$remove === void 0 ? void 0 : _this$wrapper4$remove.call(_this$wrapper4, 'scroll', this.executeThrottledRender.bind(this));
     }
   }, {
     key: "setBinding",
@@ -645,7 +641,7 @@ var instance = null;
   },
   updated: function updated(_el, binding) {
     var _instance;
-    (_instance = instance) === null || _instance === void 0 || _instance.setBinding(binding);
+    (_instance = instance) === null || _instance === void 0 ? void 0 : _instance.setBinding(binding);
   },
   unbind: function unbind(el) {
     if (el) {
@@ -691,21 +687,15 @@ function use_tag_render_objectSpread(e) { for (var r = 1; r < arguments.length;
 
 
 /* harmony default export */ const use_tag_render = (function (props, ctx) {
-  var renderAs = props.renderAs,
-    contentAs = props.contentAs;
+  var renderAs = props.renderAs;
   var refRoot = (0,external_vue_namespaceObject.ref)(null);
-  var refContent = (0,external_vue_namespaceObject.ref)(null);
-  var _useScrollbar = use_scrollbar(refRoot, props),
+  var _useScrollbar = use_scrollbar(props),
     init = _useScrollbar.init,
-    scrollTo = _useScrollbar.scrollTo,
-    classNames = _useScrollbar.classNames;
+    scrollTo = _useScrollbar.scrollTo;
   var contentStyle = (0,external_vue_namespaceObject.reactive)({
     x: 0,
     y: 0
   });
-  var computedStyle = (0,external_vue_namespaceObject.computed)(function () {
-    return use_tag_render_objectSpread({}, props.contentStyle);
-  });
   /** 指令触发Scroll事件，计算当前startIndex & endIndex & scrollTop & translateY */
   var handleScrollCallback = function handleScrollCallback(event, _startIndex, _endIndex, _scrollTop, translateY, scrollLeft, pos) {
     var scrollbar = pos.scrollbar;
@@ -747,33 +737,26 @@ function use_tag_render_objectSpread(e) { for (var r = 1; r < arguments.length;
     scrollTo: scrollTo,
     fixToTop: fixToTop,
     refRoot: refRoot,
-    refContent: refContent
+    refContent: refRoot
   });
   (0,external_vue_namespaceObject.onMounted)(function () {
     var _props$scrollbar;
     renderInstance = new VisibleRender(binding, refRoot.value);
     if ((_props$scrollbar = props.scrollbar) !== null && _props$scrollbar !== void 0 && _props$scrollbar.enabled) {
-      init(renderInstance.executeThrottledRender.bind(renderInstance));
-      return;
+      init(refRoot);
     }
     renderInstance.install();
   });
   (0,external_vue_namespaceObject.onUnmounted)(function () {
     var _renderInstance;
-    (_renderInstance = renderInstance) === null || _renderInstance === void 0 || _renderInstance.uninstall();
+    (_renderInstance = renderInstance) === null || _renderInstance === void 0 ? void 0 : _renderInstance.uninstall();
   });
   var wrapperClassNames = (0,external_vue_namespaceObject.computed)(function () {
     if (props.scrollbar.enabled) {
-      return [props.className, classNames.wrapper];
+      return [props.className];
     }
     return [props.className];
   });
-  var contentClassNames = (0,external_vue_namespaceObject.computed)(function () {
-    if (props.scrollbar.enabled) {
-      return [props.contentClassName, classNames.contentEl];
-    }
-    return [props.contentClassName];
-  });
   return {
     rendAsTag: function rendAsTag() {
       var _ctx$slots$beforeCont, _ctx$slots$beforeCont2, _ctx$slots, _ctx$slots$default, _ctx$slots$default2, _ctx$slots2, _ctx$slots$afterConte, _ctx$slots$afterConte2, _ctx$slots3, _ctx$slots$afterSecti, _ctx$slots$afterSecti2, _ctx$slots4;
@@ -783,13 +766,9 @@ function use_tag_render_objectSpread(e) { for (var r = 1; r < arguments.length;
         "class": wrapperClassNames.value,
         style: wrapperStyle.value,
         ref: refRoot
-      }, [(_ctx$slots$beforeCont = (_ctx$slots$beforeCont2 = (_ctx$slots = ctx.slots).beforeContent) === null || _ctx$slots$beforeCont2 === void 0 ? void 0 : _ctx$slots$beforeCont2.call(_ctx$slots)) !== null && _ctx$slots$beforeCont !== void 0 ? _ctx$slots$beforeCont : '', (0,external_vue_namespaceObject.h)(contentAs, {
-        "class": contentClassNames.value,
-        style: computedStyle.value,
-        ref: refContent
-      }, [(_ctx$slots$default = (_ctx$slots$default2 = (_ctx$slots2 = ctx.slots)["default"]) === null || _ctx$slots$default2 === void 0 ? void 0 : _ctx$slots$default2.call(_ctx$slots2, {
+      }, [(_ctx$slots$beforeCont = (_ctx$slots$beforeCont2 = (_ctx$slots = ctx.slots).beforeContent) === null || _ctx$slots$beforeCont2 === void 0 ? void 0 : _ctx$slots$beforeCont2.call(_ctx$slots)) !== null && _ctx$slots$beforeCont !== void 0 ? _ctx$slots$beforeCont : '', (_ctx$slots$default = (_ctx$slots$default2 = (_ctx$slots2 = ctx.slots)["default"]) === null || _ctx$slots$default2 === void 0 ? void 0 : _ctx$slots$default2.call(_ctx$slots2, {
         data: props.list
-      })) !== null && _ctx$slots$default !== void 0 ? _ctx$slots$default : '']), (_ctx$slots$afterConte = (_ctx$slots$afterConte2 = (_ctx$slots3 = ctx.slots).afterContent) === null || _ctx$slots$afterConte2 === void 0 ? void 0 : _ctx$slots$afterConte2.call(_ctx$slots3)) !== null && _ctx$slots$afterConte !== void 0 ? _ctx$slots$afterConte : '', (_ctx$slots$afterSecti = (_ctx$slots$afterSecti2 = (_ctx$slots4 = ctx.slots).afterSection) === null || _ctx$slots$afterSecti2 === void 0 ? void 0 : _ctx$slots$afterSecti2.call(_ctx$slots4)) !== null && _ctx$slots$afterSecti !== void 0 ? _ctx$slots$afterSecti : '']);
+      })) !== null && _ctx$slots$default !== void 0 ? _ctx$slots$default : '', (_ctx$slots$afterConte = (_ctx$slots$afterConte2 = (_ctx$slots3 = ctx.slots).afterContent) === null || _ctx$slots$afterConte2 === void 0 ? void 0 : _ctx$slots$afterConte2.call(_ctx$slots3)) !== null && _ctx$slots$afterConte !== void 0 ? _ctx$slots$afterConte : '', (_ctx$slots$afterSecti = (_ctx$slots$afterSecti2 = (_ctx$slots4 = ctx.slots).afterSection) === null || _ctx$slots$afterSecti2 === void 0 ? void 0 : _ctx$slots$afterSecti2.call(_ctx$slots4)) !== null && _ctx$slots$afterSecti !== void 0 ? _ctx$slots$afterSecti : '']);
     }
   };
 });
@@ -836,6 +815,7 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
 
 
 
+
 /* harmony default export */ const virtual_render = ((0,external_vue_namespaceObject.defineComponent)({
   name: 'VirtualRender',
   directives: {
@@ -846,8 +826,7 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
   slots: Object,
   setup: function setup(props, ctx) {
     var _this = this;
-    var renderAs = props.renderAs,
-      contentAs = props.contentAs;
+    var renderAs = props.renderAs;
     var resolvePropClassName = function resolvePropClassName(prop) {
       if (typeof prop === 'string') {
         return [prop];
@@ -862,22 +841,51 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
         rendAsTag = _useTagRender.rendAsTag;
       return rendAsTag;
     }
+    var refRoot = (0,external_vue_namespaceObject.ref)(null);
+    /** 如果有分组状态，计算总行数 */
+    var listLength = (0,external_vue_namespaceObject.ref)(0);
+    /** 实际高度，根据行高和总行数计算出来的实际高度 */
+    var innerHeight = (0,external_vue_namespaceObject.ref)(0);
+    var contentHeight = (0,external_vue_namespaceObject.ref)(0);
+    var virtualRoot = (0,external_vue_namespaceObject.ref)(null);
+    var getRowHeightArgs = function getRowHeightArgs(startIndex) {
+      var start = startIndex * props.groupItemCount;
+      var end = (startIndex + 1) * props.groupItemCount;
+      if (end > listLength.value) {
+        var count = end - start;
+        end = listLength.value;
+        start = end - count;
+      }
+      return {
+        index: start,
+        rows: props.list.slice(start, end),
+        items: [start, end],
+        type: 'virtual'
+      };
+    };
+    var getLineHeight = function getLineHeight() {
+      if (typeof props.lineHeight === 'function') {
+        return function (_ref) {
+          var index = _ref.index;
+          return props.lineHeight(getRowHeightArgs(index));
+        };
+      }
+      return props.lineHeight;
+    };
     var binding = (0,external_vue_namespaceObject.computed)(function () {
       return {
-        lineHeight: props.lineHeight,
+        lineHeight: getLineHeight(),
         handleScrollCallback: handleScrollCallback,
         pagination: pagination,
         throttleDelay: props.throttleDelay,
         scrollbar: props.scrollbar
       };
     });
-    var refRoot = (0,external_vue_namespaceObject.ref)(null);
-    var refContent = (0,external_vue_namespaceObject.ref)(null);
-    var _useScrollbar = use_scrollbar(refRoot, props),
+    var _useScrollbar = use_scrollbar(props),
       init = _useScrollbar.init,
       scrollTo = _useScrollbar.scrollTo,
-      classNames = _useScrollbar.classNames,
-      updateScrollHeight = _useScrollbar.updateScrollHeight;
+      updateScrollHeight = _useScrollbar.updateScrollHeight,
+      update = _useScrollbar.update;
     var instance = null;
     var pagination = (0,external_vue_namespaceObject.reactive)({
       startIndex: 0,
@@ -891,6 +899,32 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
       groupItemCount: props.groupItemCount
     });
     var calcList = (0,external_vue_namespaceObject.ref)([]);
+    var getOffsetHeight = function getOffsetHeight() {
+      if (typeof props.height === 'number') {
+        return props.height;
+      }
+      // @ts-ignore
+      return virtualRoot.value.offsetHeight;
+    };
+    var getLastPageIndex = function getLastPageIndex() {
+      var elHeight = getOffsetHeight();
+      var startIndex = Math.ceil(listLength.value / props.groupItemCount);
+      var rowsHeight = 0;
+      var lastHeight = 0;
+      var diffHeight = 0;
+      for (; startIndex > 0; startIndex--) {
+        lastHeight = props.lineHeight(getRowHeightArgs(startIndex));
+        rowsHeight = rowsHeight + lastHeight;
+        if (rowsHeight > elHeight) {
+          diffHeight = rowsHeight - elHeight;
+          break;
+        }
+      }
+      return {
+        diffHeight: diffHeight,
+        startIndex: startIndex
+      };
+    };
     /** 指令触发Scroll事件，计算当前startIndex & endIndex & scrollTop & translateY */
     var handleScrollCallback = function handleScrollCallback(event, startIndex, endIndex, scrollTop, translateY, scrollLeft, pos) {
       var translateX = scrollLeft;
@@ -904,13 +938,16 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
         pos: pos
       });
       var start = pagination.startIndex * props.groupItemCount;
-      var end = (pagination.endIndex + props.preloadItemCount) * props.groupItemCount;
+      var end = pagination.endIndex * props.groupItemCount;
       var total = localList.value.length;
       if (total < end) {
-        calcList.value = localList.value.slice(start, total);
         end = total;
-        start = end - Math.floor(refContent.value.offsetHeight / props.lineHeight);
-        start = start < 0 ? 0 : start;
+        if (typeof props.lineHeight === 'function') {
+          start = getLastPageIndex().startIndex;
+        } else {
+          start = end - Math.floor(refRoot.value.offsetHeight / props.lineHeight);
+          start = start < 0 ? 0 : start;
+        }
       }
       var value = localList.value.slice(start, end);
       calcList.value = value;
@@ -922,7 +959,12 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
       var _props$scrollbar;
       instance = new VisibleRender(binding, refRoot.value);
       if ((_props$scrollbar = props.scrollbar) !== null && _props$scrollbar !== void 0 && _props$scrollbar.enabled) {
-        init(instance.executeThrottledRender.bind(instance));
+        virtualRoot.value = new scrollbar_namespaceObject.VirtualElement({
+          delegateElement: refRoot.value,
+          scrollHeight: innerHeight.value,
+          onScollCallback: handleScrollBarCallback
+        });
+        init(virtualRoot);
         updateScrollHeight(contentHeight.value);
         instance.executeThrottledRender.call(instance, {
           offset: {
@@ -936,16 +978,12 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
     });
     (0,external_vue_namespaceObject.onUnmounted)(function () {
       var _instance;
-      (_instance = instance) === null || _instance === void 0 || _instance.uninstall();
+      (_instance = instance) === null || _instance === void 0 ? void 0 : _instance.uninstall();
     });
     var handleChangeListConfig = function handleChangeListConfig() {
       /** 数据改变时激活当前表单，使其渲染DOM */
       handleListChanged(props.list);
     };
-    /** 如果有分组状态，计算总行数 */
-    var listLength = (0,external_vue_namespaceObject.ref)(0);
-    /** 实际高度，根据行高和总行数计算出来的实际高度 */
-    var innerHeight = (0,external_vue_namespaceObject.ref)(0);
     /**
      * 列表数据改变时，处理相关参数
      */
@@ -957,8 +995,9 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
         if (typeof props.lineHeight === 'function') {
           innerHeight.value = 0;
           var fnValue = 0;
-          for (var i = 0; i < listLength.value; i++) {
-            var fnVal = props.lineHeight.call(_this, i, list.slice(i * props.groupItemCount, props.groupItemCount));
+          var rowsLength = Math.ceil(listLength.value / props.groupItemCount);
+          for (var i = 0; i < rowsLength; i++) {
+            var fnVal = props.lineHeight.apply(_this, [getRowHeightArgs(i)]);
             fnValue += typeof fnVal === 'number' ? fnVal : 0;
           }
           innerHeight.value = fnValue;
@@ -968,6 +1007,7 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
       } else {
         innerHeight.value = props.abosuteHeight;
       }
+      setContentHeight();
     };
     /** 列表数据重置之后的处理事项 */
     var afterListDataReset = function afterListDataReset() {
@@ -976,10 +1016,12 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
         top: 0
       };
       var el = refRoot.value;
-      (0,external_vue_namespaceObject.nextTick)(function () {
-        computedVirtualIndex(props.lineHeight, handleScrollCallback, pagination, el, {
-          target: el
-        });
+      var container = typeof props.height === 'number' ? {
+        scrollHeight: innerHeight.value,
+        offsetHeight: props.height
+      } : el;
+      computedVirtualIndex(props.lineHeight, handleScrollCallback, pagination, container, {
+        target: el
       });
     };
     /** 映射传入的数组为新的数组，增加 $index属性，用来处理唯一Index */
@@ -1008,19 +1050,15 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
         minHeight: props.minHeight ? "".concat(props.minHeight, "px") : false
       }, props.scrollPosition === 'container' ? innerContentStyle.value : {}), props.wrapperStyle);
     });
-    var contentHeight = (0,external_vue_namespaceObject.computed)(function () {
-      return innerHeight.value < props.minHeight ? props.minHeight : innerHeight.value;
-    });
+    var setContentHeight = function setContentHeight() {
+      contentHeight.value = innerHeight.value < props.minHeight ? props.minHeight : innerHeight.value;
+    };
     var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
       resolveClassName = _usePrefix.resolveClassName;
     /** 外层样式列表 */
     var wrapperClass = (0,external_vue_namespaceObject.computed)(function () {
       return [resolveClassName('virtual-render')].concat(_toConsumableArray(resolvePropClassName(props.className)), [props.scrollPosition === 'container' ? resolveClassName('virtual-content') : '']);
     });
-    /** 内容区域样式列表 */
-    var innerClass = (0,external_vue_namespaceObject.computed)(function () {
-      return [props.scrollPosition === 'content' ? resolveClassName('virtual-content') : ''].concat(_toConsumableArray(resolvePropClassName(props.contentClassName)));
-    });
     /**
      * 重置当前配置
      * @param keepLastPostion
@@ -1029,7 +1067,7 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
       var _instance2;
       handleChangeListConfig();
       afterListDataReset();
-      (_instance2 = instance) === null || _instance2 === void 0 || _instance2.executeThrottledRender.call(instance, {
+      (_instance2 = instance) === null || _instance2 === void 0 ? void 0 : _instance2.executeThrottledRender.call(instance, {
         offset: {
           x: 0,
           y: 0
@@ -1038,44 +1076,67 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
     };
     var _useFixTop = use_fix_top(props, scrollTo),
       fixToTop = _useFixTop.fixToTop;
-    (0,external_vue_namespaceObject.watchEffect)(function () {
+    var setDelegateEl = function setDelegateEl() {
       var _instance3;
-      (_instance3 = instance) === null || _instance3 === void 0 || _instance3.setBinding(binding);
+      var el = refRoot.value;
+      var container = typeof props.height === 'number' ? {
+        scrollHeight: innerHeight.value,
+        offsetHeight: props.height
+      } : el;
+      (_instance3 = instance) === null || _instance3 === void 0 ? void 0 : _instance3.setDelegateWrapper(container);
+    };
+    var updateVirtualInstance = function updateVirtualInstance() {
+      var _instance4;
+      (_instance4 = instance) === null || _instance4 === void 0 ? void 0 : _instance4.setBinding(binding);
       handleChangeListConfig();
       updateScrollHeight(contentHeight.value);
+      setDelegateEl();
+      update();
+      afterListDataReset();
       (0,external_vue_namespaceObject.nextTick)(function () {
-        var _instance4;
-        afterListDataReset();
-        (_instance4 = instance) === null || _instance4 === void 0 || _instance4.executeThrottledRender.call(instance, {
+        var _instance5;
+        (_instance5 = instance) === null || _instance5 === void 0 ? void 0 : _instance5.executeThrottledRender.call(instance, {
           offset: {
             x: pagination.scrollLeft,
             y: pagination.scrollTop
           }
         });
       });
+    };
+    (0,external_vue_namespaceObject.watch)(function () {
+      return props.height;
+    }, function () {
+      updateVirtualInstance();
+    });
+    (0,external_vue_namespaceObject.watch)(function () {
+      return [props.list, props.list.length];
+    }, function () {
+      updateVirtualInstance();
+    }, {
+      immediate: true
     });
     ctx.expose({
       reset: reset,
       scrollTo: scrollTo,
       fixToTop: fixToTop,
+      updateScroll: update,
       refRoot: refRoot,
-      refContent: refContent
+      refContent: refRoot
     });
+    var handleScrollBarCallback = function handleScrollBarCallback(args) {
+      instance.executeThrottledRender.call(instance, args);
+    };
     return function () {
       var _ctx$slots$beforeCont, _ctx$slots$beforeCont2, _ctx$slots, _ctx$slots$default, _ctx$slots$default2, _ctx$slots2, _ctx$slots$afterConte, _ctx$slots$afterConte2, _ctx$slots3, _ctx$slots$afterSecti, _ctx$slots$afterSecti2, _ctx$slots4;
       return (0,external_vue_namespaceObject.h)(
       // @ts-ignore:next-line
       renderAs || 'div', {
         ref: refRoot,
-        "class": [].concat(_toConsumableArray(wrapperClass.value), [classNames.wrapper]),
+        "class": _toConsumableArray(wrapperClass.value),
         style: wrapperStyle.value
-      }, [(_ctx$slots$beforeCont = (_ctx$slots$beforeCont2 = (_ctx$slots = ctx.slots).beforeContent) === null || _ctx$slots$beforeCont2 === void 0 ? void 0 : _ctx$slots$beforeCont2.call(_ctx$slots)) !== null && _ctx$slots$beforeCont !== void 0 ? _ctx$slots$beforeCont : '', (0,external_vue_namespaceObject.h)(contentAs || 'div', {
-        ref: refContent,
-        "class": [].concat(_toConsumableArray(innerClass.value), [classNames.contentEl]),
-        style: virtual_render_objectSpread(virtual_render_objectSpread({}, innerContentStyle.value), props.contentStyle)
-      }, [(_ctx$slots$default = (_ctx$slots$default2 = (_ctx$slots2 = ctx.slots)["default"]) === null || _ctx$slots$default2 === void 0 ? void 0 : _ctx$slots$default2.call(_ctx$slots2, {
+      }, [(_ctx$slots$beforeCont = (_ctx$slots$beforeCont2 = (_ctx$slots = ctx.slots).beforeContent) === null || _ctx$slots$beforeCont2 === void 0 ? void 0 : _ctx$slots$beforeCont2.call(_ctx$slots)) !== null && _ctx$slots$beforeCont !== void 0 ? _ctx$slots$beforeCont : '', (_ctx$slots$default = (_ctx$slots$default2 = (_ctx$slots2 = ctx.slots)["default"]) === null || _ctx$slots$default2 === void 0 ? void 0 : _ctx$slots$default2.call(_ctx$slots2, {
         data: calcList.value
-      })) !== null && _ctx$slots$default !== void 0 ? _ctx$slots$default : '']), (_ctx$slots$afterConte = (_ctx$slots$afterConte2 = (_ctx$slots3 = ctx.slots).afterContent) === null || _ctx$slots$afterConte2 === void 0 ? void 0 : _ctx$slots$afterConte2.call(_ctx$slots3)) !== null && _ctx$slots$afterConte !== void 0 ? _ctx$slots$afterConte : '', (_ctx$slots$afterSecti = (_ctx$slots$afterSecti2 = (_ctx$slots4 = ctx.slots).afterSection) === null || _ctx$slots$afterSecti2 === void 0 ? void 0 : _ctx$slots$afterSecti2.call(_ctx$slots4)) !== null && _ctx$slots$afterSecti !== void 0 ? _ctx$slots$afterSecti : '']);
+      })) !== null && _ctx$slots$default !== void 0 ? _ctx$slots$default : '', (_ctx$slots$afterConte = (_ctx$slots$afterConte2 = (_ctx$slots3 = ctx.slots).afterContent) === null || _ctx$slots$afterConte2 === void 0 ? void 0 : _ctx$slots$afterConte2.call(_ctx$slots3)) !== null && _ctx$slots$afterConte !== void 0 ? _ctx$slots$afterConte : '', (_ctx$slots$afterSecti = (_ctx$slots$afterSecti2 = (_ctx$slots4 = ctx.slots).afterSection) === null || _ctx$slots$afterSecti2 === void 0 ? void 0 : _ctx$slots$afterSecti2.call(_ctx$slots4)) !== null && _ctx$slots$afterSecti !== void 0 ? _ctx$slots$afterSecti : '']);
     };
   }
 }));