fix(Swiper): offsetWidth error

Author: RylanBot

src/swiper/swiper-item.tsx

@@ -23,8 +23,9 @@ const swiperItemProps = {
     type: Boolean,
     default: false,
   },
-  getWrapAttribute: {
-    type: Function,
+  swiperWidth: {
+    type: Number,
+    default: 0,
   },
   swiperItemLength: {
     type: Number,
@@ -63,18 +64,19 @@ export default mixins(classPrefixMixins).extend({
     },
     translateX(): number {
       if (this.type !== 'card') return 0;
-      const wrapWidth = this.getWrapAttribute('offsetWidth');
+      const { swiperWidth } = this;
       const translateIndex = !this.active && this.swiperItemLength > 2 ? this.disposeIndex : this.index;
       const inStage = Math.abs(translateIndex - this.currentIndex) <= 1;
       if (inStage) {
         return (
-          (wrapWidth * ((translateIndex - this.currentIndex) * (1 - ITEM_WIDTH * this.cardScale) - ITEM_WIDTH + 1)) / 2
+          (swiperWidth * ((translateIndex - this.currentIndex) * (1 - ITEM_WIDTH * this.cardScale) - ITEM_WIDTH + 1))
+          / 2
         );
       }
       if (translateIndex < this.currentIndex) {
-        return (-ITEM_WIDTH * (1 + this.cardScale) * wrapWidth) / 2;
+        return (-ITEM_WIDTH * (1 + this.cardScale) * swiperWidth) / 2;
       }
-      return ((2 + ITEM_WIDTH * (this.cardScale - 1)) * wrapWidth) / 2;
+      return ((2 + ITEM_WIDTH * (this.cardScale - 1)) * swiperWidth) / 2;
     },
     zIndex(): number {
       if (this.type !== 'card') return 0;

src/swiper/swiper.tsx

@@ -4,6 +4,7 @@ import { kebabCase } from 'lodash-es';
 
 import { getClassPrefixMixins, getGlobalIconMixins } from '../config-provider/config-receiver';
 import { isVNode } from '../hooks/render-tnode';
+
 import { emitEvent } from '../utils/event';
 import mixins from '../utils/mixins';
 import { renderTNodeJSX } from '../utils/render-tnode';
@@ -43,6 +44,7 @@ export default mixins(Vue as VueConstructor<SwiperVue>, classPrefixMixins, getGl
       isHovering: false,
       isSwitching: false,
       swiperItemList: [] as Array<VNodeComponentOptions>,
+      swiperOffset: { width: 0, height: 0 },
       showArrow: false,
     };
   },
@@ -77,7 +79,7 @@ export default mixins(Vue as VueConstructor<SwiperVue>, classPrefixMixins, getGl
       };
     },
     containerStyle(): any {
-      const offsetHeight = this.height ? `${this.height}px` : `${this.getWrapAttribute('offsetHeight')}px`;
+      const offsetHeight = this.height ? `${this.height}px` : `${this.swiperOffset.height}px`;
       if (this.type === 'card' || this.animation === 'fade') {
         return {
           height: offsetHeight,
@@ -107,8 +109,8 @@ export default mixins(Vue as VueConstructor<SwiperVue>, classPrefixMixins, getGl
           currentIndex={this.currentIndex}
           isSwitching={this.isSwitching}
           cardScale={this.cardScale}
-          getWrapAttribute={this.getWrapAttribute}
           swiperItemLength={this.swiperItemLength}
+          swiperWidth={this.swiperOffset.width}
           props={{ ...this.$props, ...swiperItem.propsData }}
         >
           {swiperItem.children}
@@ -142,6 +144,17 @@ export default mixins(Vue as VueConstructor<SwiperVue>, classPrefixMixins, getGl
     this.updateSwiperItems();
     this.setTimer();
     this.showArrow = this.navigationConfig.showSlideBtn === 'always';
+
+    const resizeObserver = new ResizeObserver(([entry]) => {
+      const parent = entry.target.parentNode as HTMLElement;
+      if (parent) {
+        this.swiperOffset = {
+          width: parent.offsetWidth,
+          height: parent.offsetHeight,
+        };
+      }
+    });
+    resizeObserver.observe(this.$refs.swiperWrap as HTMLElement);
   },
 
   updated() {
@@ -226,10 +239,6 @@ export default mixins(Vue as VueConstructor<SwiperVue>, classPrefixMixins, getGl
       }
       return this.swiperTo(this.currentIndex - 1, context);
     },
-    getWrapAttribute(attr: string) {
-      const parent = (this.$refs.swiperWrap as Element)?.parentNode as HTMLElement;
-      return parent?.[attr as keyof HTMLElement];
-    },
     renderPagination() {
       const fractionIndex = this.currentIndex + 1 > this.swiperItemLength ? 1 : this.currentIndex + 1;
       const { ChevronLeftIcon, ChevronRightIcon } = this.useGlobalIcon({