fix(Swiper): offsetWidth error

packages/components/divider/__tests__/__snapshots__/divider.test.tsx.snap

@@ -1,19 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Divider > props > :align[left/right/center] > align-vertical-left 1`] = `
-<div
-  class="t-divider t-divider--vertical t-divider--with-text t-divider--with-text-left"
->
-  <span
-    class="t-divider__inner-text"
-  >
-
-    text
-
-  </span>
-</div>
-`;
-
 exports[`Divider > props > :align[left/right/center] 1`] = `
 <div
   class="t-divider t-divider--horizontal t-divider--with-text t-divider--with-text-left"

packages/components/swiper/__tests__/__snapshots__/swiper.test.tsx.snap

@@ -12,6 +12,7 @@ exports[`Swiper > :props > :animation fade 1`] = `
     >
       <div
         class="t-swiper__container"
+        style="height: 0px;"
       >
 
         <div
@@ -98,6 +99,7 @@ exports[`Swiper > :props > :cardScale 1`] = `
     >
       <div
         class="t-swiper__container"
+        style="height: 0px;"
       >
 
         <div
@@ -251,7 +253,7 @@ exports[`Swiper > :props > :direction 1`] = `
     >
       <div
         class="t-swiper__container"
-        style="transform: translate3d(0, -0%, 0px);"
+        style="height: 0px; transform: translate3d(0, -0%, 0px);"
       >
 
         <div
@@ -701,6 +703,7 @@ exports[`Swiper > :props > :type 1`] = `
     >
       <div
         class="t-swiper__container"
+        style="height: 0px;"
       >
 
         <div

packages/components/swiper/swiper-item.tsx

@@ -1,6 +1,6 @@
-import { defineComponent, computed } from 'vue';
-import props from './props';
+import { computed, defineComponent } from 'vue';
 import { usePrefixClass } from '@tdesign/shared-hooks';
+import props from './props';
 
 const swiperItemProps = {
   index: {
@@ -13,8 +13,9 @@ const swiperItemProps = {
     type: Boolean,
     default: false,
   },
-  getWrapAttribute: {
-    type: Function,
+  swiperWidth: {
+    type: Number,
+    default: 0,
   },
   swiperItemLength: {
     type: Number,
@@ -50,18 +51,19 @@ export default defineComponent({
     });
     const translateX = computed(() => {
       if (props.type !== 'card') return 0;
-      const wrapWidth = props.getWrapAttribute('offsetWidth') || 0;
+      const swiperWidth = props.swiperWidth;
       const translateIndex = !active.value && props.swiperItemLength > 2 ? disposeIndex.value : props.index;
       const inStage = Math.abs(translateIndex - props.currentIndex) <= 1;
       if (inStage) {
         return (
-          (wrapWidth * ((translateIndex - props.currentIndex) * (1 - itemWidth * props.cardScale) - itemWidth + 1)) / 2
+          (swiperWidth * ((translateIndex - props.currentIndex) * (1 - itemWidth * props.cardScale) - itemWidth + 1)) /
+          2
         );
       }
       if (translateIndex < props.currentIndex) {
-        return (-itemWidth * (1 + props.cardScale) * wrapWidth) / 2;
+        return (-itemWidth * (1 + props.cardScale) * swiperWidth) / 2;
       }
-      return ((2 + itemWidth * (props.cardScale - 1)) * wrapWidth) / 2;
+      return ((2 + itemWidth * (props.cardScale - 1)) * swiperWidth) / 2;
     });
     const zIndex = computed(() => {
       if (props.type !== 'card') return 0;

packages/components/swiper/swiper.tsx

@@ -1,12 +1,18 @@
-import { defineComponent, ref, computed, watch, isVNode, onMounted, cloneVNode } from 'vue';
+import { cloneVNode, computed, defineComponent, isVNode, onMounted, ref, watch } from 'vue';
 import { ChevronLeftIcon as TdChevronLeftIcon, ChevronRightIcon as TdChevronRightIcon } from 'tdesign-icons-vue-next';
 
-import { useTNodeJSX, useGlobalIcon, usePrefixClass, useChildComponentSlots } from '@tdesign/shared-hooks';
-
+import {
+  useChildComponentSlots,
+  useGlobalIcon,
+  usePrefixClass,
+  useResizeObserver,
+  useTNodeJSX,
+} from '@tdesign/shared-hooks';
 import props from './props';
-import { SwiperNavigation, SwiperChangeSource } from './type';
 import TSwiperItem from './swiper-item';
 
+import type { SwiperChangeSource, SwiperNavigation } from './type';
+
 const defaultNavigation: SwiperNavigation = {
   placement: 'inside',
   showSlideBtn: 'always',
@@ -30,15 +36,18 @@ export default defineComponent({
     let swiperSwitchingTimer = 0;
     let isBeginToEnd = false;
     let isEndToBegin = false;
+
     const currentIndex = ref(props.current || props.defaultCurrent);
     const navActiveIndex = ref(props.current || props.defaultCurrent);
     const isHovering = ref(false);
     const isSwitching = ref(false);
     const showArrow = ref(false);
     const swiperWrap = ref<HTMLElement>();
+    const swiperOffset = ref({ width: 0, height: 0 });
+    const swiperItemLength = ref(0);
+
     const getChildComponentByName = useChildComponentSlots();
 
-    const swiperItemLength = ref(0);
     const navigationConfig = computed(() => {
       return {
         ...defaultNavigation,
@@ -65,7 +74,7 @@ export default defineComponent({
       };
     });
     const containerStyle = computed(() => {
-      const offsetHeight = props.height ? `${props.height}px` : `${getWrapAttribute('offsetHeight')}px`;
+      const offsetHeight = props.height ? `${props.height}px` : `${swiperOffset.value.height}px`;
       if (props.type === 'card' || props.animation === 'fade') {
         return {
           height: offsetHeight,
@@ -105,7 +114,7 @@ export default defineComponent({
             index={index}
             currentIndex={currentIndex.value}
             isSwitching={isSwitching.value}
-            getWrapAttribute={getWrapAttribute}
+            swiperWidth={swiperOffset.value.width}
             swiperItemLength={swiperItemLength.value}
             {...p}
           >
@@ -220,9 +229,6 @@ export default defineComponent({
       }
       return swiperTo(currentIndex.value - 1, context);
     };
-    const getWrapAttribute = (attr: string) => {
-      return swiperWrap.value?.parentNode?.[attr as keyof ParentNode];
-    };
     const renderPagination = () => {
       const fractionIndex = currentIndex.value + 1 > swiperItemLength.value ? 1 : currentIndex.value + 1;
       return (
@@ -331,6 +337,16 @@ export default defineComponent({
       showArrow.value = navigationConfig.value.showSlideBtn === 'always';
     });
 
+    useResizeObserver(swiperWrap, () => {
+      const parentElement = swiperWrap.value?.parentNode as HTMLElement;
+      if (parentElement) {
+        swiperOffset.value = {
+          width: parentElement.offsetWidth || 0,
+          height: parentElement.offsetHeight || 0,
+        };
+      }
+    });
+
     return () => (
       <div class={[`${prefix.value}-swiper`]} onMouseenter={onMouseEnter} onMouseleave={onMouseLeave} ref={swiperWrap}>
         <div class={swiperWrapClass.value}>