bk-magic-vue 2.4.8-beta.8 → 2.4.8

package/dist/bk-magic-vue.js

@@ -12206,7 +12206,8 @@
         "disabled-date": _vm.disabledDate,
         "range-state": _vm.rangeState,
         "value": _vm.preSelecting.left ? [_vm.dates[0]] : _vm.dates,
-        "focused-date": _vm.focusedDate
+        "focused-date": _vm.focusedDate,
+        "cell-class": _vm.cellClass
       },
       on: {
         "change-range": _vm.handleChangeRange,
@@ -13221,7 +13222,6 @@
       if (this.escClose) {
         addEvent(document, 'keydown', this.escCloseHandler);
       }
-      console.error(this);
     },
     beforeDestroy: function beforeDestroy() {
       if (this.escClose) {
@@ -48326,6 +48326,21 @@
 
   setInstaller(__vue_component__$1e);
 
+  var getElementSize = function getElementSize(node) {
+    if (node === undefined) {
+      return {
+        height: 0,
+        width: 0
+      };
+    }
+    var computedStyle = getComputedStyle(node);
+    var width = node.clientWidth - _parseFloat$2(computedStyle.paddingTop) - _parseFloat$2(computedStyle.paddingBottom);
+    var height = node.clientHeight - _parseFloat$2(computedStyle.paddingLeft) - _parseFloat$2(computedStyle.paddingRight);
+    return {
+      height: height,
+      width: width
+    };
+  };
   var script$1e = {
     name: 'bk-swiper',
     props: {
@@ -48364,7 +48379,6 @@
     },
     data: function data() {
       return {
-        swiperMainWith: 0,
         currentIndex: 1,
         isStartMove: false,
         isTransition: false,
@@ -48372,7 +48386,9 @@
         mouseDistance: 0,
         loopId: '',
         isClick: false,
-        realWidth: 0
+        realWidth: 0,
+        realHeight: 0,
+        resizeObserver: {}
       };
     },
     computed: {
@@ -48384,6 +48400,9 @@
         var last = this.sourceList.slice(-1);
         return [].concat(_toConsumableArray(last), _toConsumableArray(this.sourceList), [first]);
       },
+      swiperMainWith: function swiperMainWith() {
+        return this.realWidth * this.dataList.length;
+      },
       imageTransfer: function imageTransfer() {
         var indexMove = this.realWidth * this.currentIndex;
         var imageMove = indexMove - this.mouseDistance;
@@ -48398,38 +48417,11 @@
         },
         immediate: true
       },
-      height: function height(val) {
-        var ele = this.$refs.swiper || {
-          style: {
-            width: 0,
-            height: 0
-          },
-          offsetWidth: 0
-        };
-        if (+val > 0) ele.style.height = val + 'px';
-      },
-      width: function width(val) {
-        var ele = this.$refs.swiper || {
-          style: {
-            width: 0,
-            height: 0
-          },
-          offsetWidth: 0
-        };
-        this.realWidth = +val > 0 ? +val : ele.offsetWidth;
-        ele.style.width = this.realWidth + 'px';
-      },
-      list: function list() {
-        var _this = this;
-        this.$nextTick(function () {
-          _this.calcSize();
-        });
+      height: function height() {
+        this.calcSize();
       },
-      pics: function pics() {
-        var _this2 = this;
-        this.$nextTick(function () {
-          _this2.calcSize();
-        });
+      width: function width() {
+        this.calcSize();
       }
     },
     mounted: function mounted() {
@@ -48440,27 +48432,37 @@
     },
     methods: {
       calcSize: function calcSize() {
-        var ele = this.$refs.swiper || {
-          style: {
-            width: 0,
-            height: 0
-          },
-          offsetWidth: 0
-        };
-        if (+this.height > 0) ele.style.height = this.height + 'px';
-        this.realWidth = +this.width > 0 ? +this.width : ele.offsetWidth;
-        ele.style.width = this.realWidth + 'px';
-        this.swiperMainWith = this.realWidth * this.dataList.length;
+        var swiperParentSize = getElementSize(this.$refs.swiper && this.$refs.swiper.parentElement);
+        this.realWidth = +this.width > 0 ? this.width : swiperParentSize.width || 600;
+        this.realHeight = +this.height > 0 ? this.height : swiperParentSize.height || 300;
       },
       initStatus: function initStatus() {
         this.calcSize();
         this.startLoop();
+        this.watchParentSizeChange();
         document.addEventListener('visibilitychange', this.visChange);
       },
       destoryStatus: function destoryStatus() {
         this.endLoop();
+        this.endWatchParentSizeChange();
         document.removeEventListener('visibilitychange', this.visChange);
       },
+      watchParentSizeChange: function watchParentSizeChange() {
+        var _this = this;
+        var parentEle = this.$refs.swiper && this.$refs.swiper.parentElement;
+        if (!parentEle || !window.ResizeObserver) {
+          return;
+        }
+        this.resizeObserver = new ResizeObserver(function () {
+          _this.calcSize();
+        });
+        this.resizeObserver.observe(parentEle);
+      },
+      endWatchParentSizeChange: function endWatchParentSizeChange() {
+        if (this.resizeObserver && this.resizeObserver.disconnect) {
+          this.resizeObserver.disconnect();
+        }
+      },
       goToLink: function goToLink(link) {
         if (this.isClick && link) window.open(link, '_blank');
       },
@@ -48519,13 +48521,13 @@
         }
       },
       startLoop: function startLoop() {
-        var _this3 = this;
+        var _this2 = this;
         if (!this.isLoop) return;
         this.endLoop();
         this.loopId = window.setTimeout(function () {
-          _this3.isTransition = true;
-          _this3.changeCurrentIndex(_this3.currentIndex + 1);
-          _this3.startLoop();
+          _this2.isTransition = true;
+          _this2.changeCurrentIndex(_this2.currentIndex + 1);
+          _this2.startLoop();
         }, this.loopTime);
       },
       endLoop: function endLoop() {
@@ -48547,8 +48549,11 @@
 
     return _vm.sourceList.length ? _c('section', {
       ref: "swiper",
-      staticClass: "bk-swiper-home",
-      class: _vm.extCls
+      class: ['bk-swiper-home', _vm.extCls],
+      style: {
+        width: _vm.realWidth + "px",
+        height: _vm.realHeight + "px"
+      }
     }, [_c('hgroup', {
       class: [{
         'bk-transition': _vm.isTransition