fix(Swipe): incorrect item width after scaled (#8330)

src/swipe/Swipe.tsx

@@ -23,7 +23,6 @@ import {
 
 // Composables
 import {
-  useRect,
   doubleRaf,
   useChildren,
   useWindowSize,
@@ -95,7 +94,7 @@ export default defineComponent({
   setup(props, { emit, slots }) {
     const root = ref<HTMLElement>();
     const state = reactive({
-      rect: null as DOMRect | null,
+      rect: null as { width: number; height: number } | null,
       width: 0,
       height: 0,
       offset: 0,
@@ -283,7 +282,10 @@ export default defineComponent({
 
       stopAutoplay();
 
-      const rect = useRect(root);
+      const rect = {
+        width: root.value.offsetWidth,
+        height: root.value.offsetHeight,
+      };
 
       if (count.value) {
         active = Math.min(count.value - 1, active);

src/swipe/test/__snapshots__/demo.spec.ts.snap

@@ -3,27 +3,19 @@
 exports[`should render demo and match snapshot 1`] = `
 <div>
   <div class="van-swipe">
-    <div style="transition-duration: 0ms; transform: translateX(0px); width: 400px;"
+    <div style="transition-duration: 0ms; transform: translateX(0px);"
          class="van-swipe__track"
     >
-      <div class="van-swipe-item"
-           style="width: 100px;"
-      >
+      <div class="van-swipe-item">
         1
       </div>
-      <div class="van-swipe-item"
-           style="width: 100px;"
-      >
+      <div class="van-swipe-item">
         2
       </div>
-      <div class="van-swipe-item"
-           style="width: 100px;"
-      >
+      <div class="van-swipe-item">
         3
       </div>
-      <div class="van-swipe-item"
-           style="width: 100px;"
-      >
+      <div class="van-swipe-item">
         4
       </div>
     </div>
@@ -43,26 +35,18 @@ exports[`should render demo and match snapshot 1`] = `
 </div>
 <div>
   <div class="van-swipe">
-    <div style="transition-duration: 0ms; transform: translateX(0px); width: 400px;"
+    <div style="transition-duration: 0ms; transform: translateX(0px);"
          class="van-swipe__track"
     >
-      <div class="van-swipe-item"
-           style="width: 100px;"
-      >
+      <div class="van-swipe-item">
         <img src="https://img.yzcdn.cn/vant/apple-1.jpg">
       </div>
-      <div class="van-swipe-item"
-           style="width: 100px;"
-      >
+      <div class="van-swipe-item">
         <img src="https://img.yzcdn.cn/vant/apple-2.jpg">
       </div>
-      <div class="van-swipe-item"
-           style="width: 100px;"
-      >
+      <div class="van-swipe-item">
       </div>
-      <div class="van-swipe-item"
-           style="width: 100px;"
-      >
+      <div class="van-swipe-item">
         <img src="https://img.yzcdn.cn/vant/apple-4.jpg">
       </div>
     </div>
@@ -80,27 +64,19 @@ exports[`should render demo and match snapshot 1`] = `
 </div>
 <div>
   <div class="van-swipe">
-    <div style="transition-duration: 0ms; transform: translateX(0px); width: 400px;"
+    <div style="transition-duration: 0ms; transform: translateX(0px);"
          class="van-swipe__track"
     >
-      <div class="van-swipe-item"
-           style="width: 100px;"
-      >
+      <div class="van-swipe-item">
         1
       </div>
-      <div class="van-swipe-item"
-           style="width: 100px;"
-      >
+      <div class="van-swipe-item">
         2
       </div>
-      <div class="van-swipe-item"
-           style="width: 100px;"
-      >
+      <div class="van-swipe-item">
         3
       </div>
-      <div class="van-swipe-item"
-           style="width: 100px;"
-      >
+      <div class="van-swipe-item">
         4
       </div>
     </div>
@@ -122,26 +98,26 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-swipe demo-swipe--vertical"
        style="height: 200px;"
   >
-    <div style="transition-duration: 0ms; transform: translateY(0px); height: 400px;"
+    <div style="transition-duration: 0ms; transform: translateY(0px); height: 800px;"
          class="van-swipe__track van-swipe__track--vertical"
     >
       <div class="van-swipe-item"
-           style="height: 100px;"
+           style="height: 200px;"
       >
         1
       </div>
       <div class="van-swipe-item"
-           style="height: 100px;"
+           style="height: 200px;"
       >
         2
       </div>
       <div class="van-swipe-item"
-           style="height: 100px;"
+           style="height: 200px;"
       >
         3
       </div>
       <div class="van-swipe-item"
-           style="height: 100px;"
+           style="height: 200px;"
       >
         4
       </div>
@@ -202,27 +178,19 @@ exports[`should render demo and match snapshot 1`] = `
 </div>
 <div>
   <div class="van-swipe">
-    <div style="transition-duration: 0ms; transform: translateX(0px); width: 400px;"
+    <div style="transition-duration: 0ms; transform: translateX(0px);"
          class="van-swipe__track"
     >
-      <div class="van-swipe-item"
-           style="width: 100px;"
-      >
+      <div class="van-swipe-item">
         1
       </div>
-      <div class="van-swipe-item"
-           style="width: 100px;"
-      >
+      <div class="van-swipe-item">
         2
       </div>
-      <div class="van-swipe-item"
-           style="width: 100px;"
-      >
+      <div class="van-swipe-item">
         3
       </div>
-      <div class="van-swipe-item"
-           style="width: 100px;"
-      >
+      <div class="van-swipe-item">
         4
       </div>
     </div>

src/swipe/test/__snapshots__/index.spec.js.snap

@@ -1,22 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should not allow to drag swipe when touchable is false 1`] = `
-<div class="van-swipe">
+<div class="van-swipe"
+     style="width: 100px; height: 100px;"
+>
   <div style="transition-duration: 0ms; transform: translateX(0px); width: 300px;"
        class="van-swipe__track"
   >
     <div class="van-swipe-item"
-         style="width: 100px; height: 100px;"
+         style="width: 100px;"
     >
       1
     </div>
     <div class="van-swipe-item"
-         style="width: 100px; height: 100px;"
+         style="width: 100px;"
     >
       2
     </div>
     <div class="van-swipe-item"
-         style="width: 100px; height: 100px;"
+         style="width: 100px;"
     >
       3
     </div>
@@ -33,7 +35,9 @@ exports[`should not allow to drag swipe when touchable is false 1`] = `
 `;
 
 exports[`should render dynamic SwipeItem correctly 1`] = `
-<div class="van-swipe">
+<div class="van-swipe"
+     style="width: 100px; height: 100px;"
+>
   <div style="transition-duration: 500ms; transform: translateX(0px);"
        class="van-swipe__track"
   >
@@ -42,7 +46,9 @@ exports[`should render dynamic SwipeItem correctly 1`] = `
 `;
 
 exports[`should render dynamic SwipeItem correctly 2`] = `
-<div class="van-swipe">
+<div class="van-swipe"
+     style="width: 100px; height: 100px;"
+>
   <div style="transition-duration: 0ms; transform: translateX(0px); width: 200px;"
        class="van-swipe__track"
   >
@@ -71,22 +77,24 @@ exports[`should render dynamic SwipeItem correctly 2`] = `
 `;
 
 exports[`should render initial swipe correctly 1`] = `
-<div class="van-swipe">
+<div class="van-swipe"
+     style="width: 100px; height: 100px;"
+>
   <div style="transition-duration: 0ms; transform: translateX(0px); width: 300px;"
        class="van-swipe__track"
   >
     <div class="van-swipe-item"
-         style="width: 100px; height: 100px;"
+         style="width: 100px;"
     >
       1
     </div>
     <div class="van-swipe-item"
-         style="width: 100px; height: 100px;"
+         style="width: 100px;"
     >
       2
     </div>
     <div class="van-swipe-item"
-         style="width: 100px; height: 100px;"
+         style="width: 100px;"
     >
       3
     </div>
@@ -103,22 +111,24 @@ exports[`should render initial swipe correctly 1`] = `
 `;
 
 exports[`should render initial swipe correctly 2`] = `
-<div class="van-swipe">
+<div class="van-swipe"
+     style="width: 100px; height: 100px;"
+>
   <div style="transition-duration: 0ms; transform: translateX(-200px); width: 300px;"
        class="van-swipe__track"
   >
     <div class="van-swipe-item"
-         style="width: 100px; height: 100px;"
+         style="width: 100px;"
     >
       1
     </div>
     <div class="van-swipe-item"
-         style="width: 100px; height: 100px;"
+         style="width: 100px;"
     >
       2
     </div>
     <div class="van-swipe-item"
-         style="width: 100px; height: 100px;"
+         style="width: 100px;"
     >
       3
     </div>
@@ -135,22 +145,24 @@ exports[`should render initial swipe correctly 2`] = `
 `;
 
 exports[`should render vertical swipe when using vertical prop 1`] = `
-<div class="van-swipe">
+<div class="van-swipe"
+     style="width: 100px; height: 100px;"
+>
   <div style="transition-duration: 500ms; transform: translateY(-100px); height: 300px;"
        class="van-swipe__track van-swipe__track--vertical"
   >
     <div class="van-swipe-item"
-         style="width: 100px; height: 100px;"
+         style="height: 100px;"
     >
       1
     </div>
     <div class="van-swipe-item"
-         style="width: 100px; height: 100px;"
+         style="height: 100px;"
     >
       2
     </div>
     <div class="van-swipe-item"
-         style="width: 100px; height: 100px;"
+         style="height: 100px;"
     >
       3
     </div>

src/swipe/test/demo.spec.ts

@@ -1,17 +1,4 @@
 import Demo from '../demo/index.vue';
 import { snapshotDemo } from '../../../test/demo';
-import { mockGetBoundingClientRect } from '../../../test';
 
-let restore: () => void;
-
-snapshotDemo(Demo, {
-  beforeTest: () => {
-    restore = mockGetBoundingClientRect({
-      width: 100,
-      height: 100,
-    });
-  },
-  afterTest: () => {
-    restore();
-  },
-});
+snapshotDemo(Demo);

src/swipe/test/index.spec.js

@@ -1,27 +1,8 @@
 import { ref, onMounted } from 'vue';
-import {
-  mount,
-  later,
-  trigger,
-  triggerDrag,
-  mockGetBoundingClientRect,
-} from '../../../test';
+import { mount, later, trigger, triggerDrag } from '../../../test';
 import { Swipe } from '..';
 import { SwipeItem } from '../../swipe-item';
 
-let restore;
-
-beforeEach(() => {
-  restore = mockGetBoundingClientRect({
-    width: 100,
-    height: 100,
-  });
-});
-
-afterEach(() => {
-  restore();
-});
-
 function mockPageHidden() {
   let hidden = true;
 
@@ -33,6 +14,11 @@ function mockPageHidden() {
   hidden = false;
 }
 
+const swipeStyle = {
+  width: '100px',
+  height: '100px',
+};
+
 const Component = {
   props: {
     vertical: Boolean,
@@ -54,15 +40,11 @@ const Component = {
     },
   },
   render() {
-    const style = {
-      width: '100px',
-      height: '100px',
-    };
     return (
-      <Swipe ref="swipe" {...this.$props}>
-        <SwipeItem style={style}>1</SwipeItem>
-        <SwipeItem style={style}>2</SwipeItem>
-        <SwipeItem style={style}>3</SwipeItem>
+      <Swipe ref="swipe" style={swipeStyle} {...this.$props}>
+        <SwipeItem>1</SwipeItem>
+        <SwipeItem>2</SwipeItem>
+        <SwipeItem>3</SwipeItem>
       </Swipe>
     );
   },
@@ -309,7 +291,7 @@ test('should render dynamic SwipeItem correctly', async () => {
     },
     render() {
       return (
-        <Swipe>
+        <Swipe style={swipeStyle}>
           {this.render && [
             <SwipeItem>
               <span>1</span>