From 76aa0e5dd9ad121371179f5c44e620248eaa14e0 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sat, 26 Dec 2020 15:18:28 +0800
Subject: [PATCH] fix(Swipe): incorrect size during ssr (#7821)

---
 .../test/__snapshots__/index.spec.js.snap      | 18 +++++++++---------
 .../test/__snapshots__/demo.spec.js.snap       |  8 ++++----
 src/swipe-item/index.js                        |  4 +++-
 src/swipe/index.js                             | 16 ++++++++++------
 src/swipe/test/__snapshots__/demo.spec.js.snap | 12 ++++++------
 5 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/src/image-preview/test/__snapshots__/index.spec.js.snap b/src/image-preview/test/__snapshots__/index.spec.js.snap
index ea96f5ab7..fb3dfe278 100644
--- a/src/image-preview/test/__snapshots__/index.spec.js.snap
+++ b/src/image-preview/test/__snapshots__/index.spec.js.snap
@@ -4,7 +4,7 @@ exports[`close-icon prop 1`] = `
 <div class="van-image-preview" name="van-fade"><i role="button" class="van-icon van-icon-close van-image-preview__close-icon van-image-preview__close-icon--top-right">
     <!----></i>
   <div class="van-swipe van-image-preview__swipe">
-    <div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);"></div>
+    <div class="van-swipe__track" style="transition-duration: 0ms; transform: translateX(0px);"></div>
   </div>
   <div class="van-image-preview__index">1 / 0</div>
 </div>
@@ -14,7 +14,7 @@ exports[`close-icon-position prop 1`] = `
 <div class="van-image-preview" name="van-fade"><i role="button" class="van-icon van-icon-close van-image-preview__close-icon van-image-preview__close-icon--top-left">
     <!----></i>
   <div class="van-swipe van-image-preview__swipe">
-    <div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);"></div>
+    <div class="van-swipe__track" style="transition-duration: 0ms; transform: translateX(0px);"></div>
   </div>
   <div class="van-image-preview__index">1 / 0</div>
 </div>
@@ -23,7 +23,7 @@ exports[`close-icon-position prop 1`] = `
 exports[`cover slot 1`] = `
 <div class="van-image-preview" name="van-fade">
   <div class="van-swipe van-image-preview__swipe">
-    <div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);"></div>
+    <div class="van-swipe__track" style="transition-duration: 0ms; transform: translateX(0px);"></div>
   </div>
   <div class="van-image-preview__index">1 / 0</div>
   <div class="van-image-preview__cover">Custom Cover Content</div>
@@ -33,7 +33,7 @@ exports[`cover slot 1`] = `
 exports[`index slot 1`] = `
 <div class="van-image-preview" name="van-fade">
   <div class="van-swipe van-image-preview__swipe">
-    <div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);"></div>
+    <div class="van-swipe__track" style="transition-duration: 0ms; transform: translateX(0px);"></div>
   </div>
   <div class="van-image-preview__index">Custom Index</div>
 </div>
@@ -42,10 +42,10 @@ exports[`index slot 1`] = `
 exports[`render image 1`] = `
 <div class="van-image-preview" name="van-fade">
   <div class="van-swipe van-image-preview__swipe">
-    <div class="van-swipe__track" style="width: 0px; transition-duration: 500ms; transform: translateX(0px);">
-      <div class="van-swipe-item van-image-preview__swipe-item" style="width: 0px;"></div>
-      <div class="van-swipe-item van-image-preview__swipe-item" style="width: 0px;"></div>
-      <div class="van-swipe-item van-image-preview__swipe-item" style="width: 0px;"></div>
+    <div class="van-swipe__track" style="transition-duration: 500ms; transform: translateX(0px);">
+      <div class="van-swipe-item van-image-preview__swipe-item"></div>
+      <div class="van-swipe-item van-image-preview__swipe-item"></div>
+      <div class="van-swipe-item van-image-preview__swipe-item"></div>
     </div>
   </div>
   <div class="van-image-preview__index">1 / 3</div>
@@ -55,7 +55,7 @@ exports[`render image 1`] = `
 exports[`set show-index prop to false 1`] = `
 <div class="van-image-preview" name="van-fade">
   <div class="van-swipe van-image-preview__swipe">
-    <div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);"></div>
+    <div class="van-swipe__track" style="transition-duration: 0ms; transform: translateX(0px);"></div>
   </div>
 </div>
 `;
diff --git a/src/notice-bar/test/__snapshots__/demo.spec.js.snap b/src/notice-bar/test/__snapshots__/demo.spec.js.snap
index f28b3b021..2806a899f 100644
--- a/src/notice-bar/test/__snapshots__/demo.spec.js.snap
+++ b/src/notice-bar/test/__snapshots__/demo.spec.js.snap
@@ -57,10 +57,10 @@ exports[`renders demo correctly 1`] = `
       <div role="marquee" class="van-notice-bar__wrap">
         <div class="van-notice-bar__content van-ellipsis" style="transition-duration: 0s;">
           <div class="notice-swipe van-swipe">
-            <div class="van-swipe__track van-swipe__track--vertical" style="height: 0px; transition-duration: 0ms; transform: translateY(0px);">
-              <div class="van-swipe-item" style="height: 0px;">内容 1</div>
-              <div class="van-swipe-item" style="height: 0px;">内容 2</div>
-              <div class="van-swipe-item" style="height: 0px;">内容 3</div>
+            <div class="van-swipe__track van-swipe__track--vertical" style="transition-duration: 0ms; transform: translateY(0px);">
+              <div class="van-swipe-item">内容 1</div>
+              <div class="van-swipe-item">内容 2</div>
+              <div class="van-swipe-item">内容 3</div>
             </div>
           </div>
         </div>
diff --git a/src/swipe-item/index.js b/src/swipe-item/index.js
index 8039d0996..37fa21910 100644
--- a/src/swipe-item/index.js
+++ b/src/swipe-item/index.js
@@ -25,7 +25,9 @@ export default createComponent({
       const style = {};
       const { size, vertical } = this.parent;
 
-      style[vertical ? 'height' : 'width'] = `${size}px`;
+      if (size) {
+        style[vertical ? 'height' : 'width'] = `${size}px`;
+      }
 
       if (this.offset) {
         style.transform = `translate${vertical ? 'Y' : 'X'}(${this.offset}px)`;
diff --git a/src/swipe/index.js b/src/swipe/index.js
index 947516082..bd74a4843 100644
--- a/src/swipe/index.js
+++ b/src/swipe/index.js
@@ -124,15 +124,19 @@ export default createComponent({
     },
 
     trackStyle() {
-      const mainAxis = this.vertical ? 'height' : 'width';
-      const crossAxis = this.vertical ? 'width' : 'height';
-
-      return {
-        [mainAxis]: `${this.trackSize}px`,
-        [crossAxis]: this[crossAxis] ? `${this[crossAxis]}px` : '',
+      const style = {
         transitionDuration: `${this.swiping ? 0 : this.duration}ms`,
         transform: `translate${this.vertical ? 'Y' : 'X'}(${this.offset}px)`,
       };
+
+      if (this.size) {
+        const mainAxis = this.vertical ? 'height' : 'width';
+        const crossAxis = this.vertical ? 'width' : 'height';
+        style[mainAxis] = `${this.trackSize}px`;
+        style[crossAxis] = this[crossAxis] ? `${this[crossAxis]}px` : '';
+      }
+
+      return style;
     },
 
     indicatorStyle() {
diff --git a/src/swipe/test/__snapshots__/demo.spec.js.snap b/src/swipe/test/__snapshots__/demo.spec.js.snap
index 799f7af64..7c42a21af 100644
--- a/src/swipe/test/__snapshots__/demo.spec.js.snap
+++ b/src/swipe/test/__snapshots__/demo.spec.js.snap
@@ -4,7 +4,7 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-swipe">
-      <div class="van-swipe__track" style="width: 400px; transition-duration: 0ms; transform: translateX(0px);">
+      <div class="van-swipe__track" style="transition-duration: 0ms; transform: translateX(0px); width: 400px;">
         <div class="van-swipe-item" style="width: 100px;">1</div>
         <div class="van-swipe-item" style="width: 100px;">2</div>
         <div class="van-swipe-item" style="width: 100px;">3</div>
@@ -15,7 +15,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-swipe">
-      <div class="van-swipe__track" style="width: 400px; transition-duration: 0ms; transform: translateX(0px);">
+      <div class="van-swipe__track" style="transition-duration: 0ms; transform: translateX(0px); width: 400px;">
         <div class="van-swipe-item" style="width: 100px;"><img data-src="https://img.yzcdn.cn/vant/apple-1.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
         <div class="van-swipe-item" style="width: 100px;"><img data-src="https://img.yzcdn.cn/vant/apple-2.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
         <div class="van-swipe-item" style="width: 100px;"><img data-src="https://img.yzcdn.cn/vant/apple-3.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
@@ -26,7 +26,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-swipe">
-      <div class="van-swipe__track" style="width: 400px; transition-duration: 0ms; transform: translateX(0px);">
+      <div class="van-swipe__track" style="transition-duration: 0ms; transform: translateX(0px); width: 400px;">
         <div class="van-swipe-item" style="width: 100px;">1</div>
         <div class="van-swipe-item" style="width: 100px;">2</div>
         <div class="van-swipe-item" style="width: 100px;">3</div>
@@ -37,7 +37,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="demo-swipe--vertical van-swipe" style="height: 200px;">
-      <div class="van-swipe__track van-swipe__track--vertical" style="height: 400px; transition-duration: 0ms; transform: translateY(0px);">
+      <div class="van-swipe__track van-swipe__track--vertical" style="transition-duration: 0ms; transform: translateY(0px); height: 400px;">
         <div class="van-swipe-item" style="height: 100px;">1</div>
         <div class="van-swipe-item" style="height: 100px;">2</div>
         <div class="van-swipe-item" style="height: 100px;">3</div>
@@ -48,7 +48,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-swipe">
-      <div class="van-swipe__track" style="width: 1200px; transition-duration: 0ms; transform: translateX(0px);">
+      <div class="van-swipe__track" style="transition-duration: 0ms; transform: translateX(0px); width: 1200px;">
         <div class="van-swipe-item" style="width: 300px;">1</div>
         <div class="van-swipe-item" style="width: 300px;">2</div>
         <div class="van-swipe-item" style="width: 300px;">3</div>
@@ -59,7 +59,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-swipe">
-      <div class="van-swipe__track" style="width: 400px; transition-duration: 0ms; transform: translateX(0px);">
+      <div class="van-swipe__track" style="transition-duration: 0ms; transform: translateX(0px); width: 400px;">
         <div class="van-swipe-item" style="width: 100px;">1</div>
         <div class="van-swipe-item" style="width: 100px;">2</div>
         <div class="van-swipe-item" style="width: 100px;">3</div>