From 351e642e6d21f56c34f0e43ddcd7e3b2dafa1d27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Wed, 5 Jun 2019 10:03:47 +0800
Subject: [PATCH] [bugfix] SwipeCell: should ensure ref exist before get width

---
 docs/markdown/changelog.zh-CN.md              |  4 ++++
 packages/swipe-cell/index.js                  | 23 +++++++++----------
 .../test/__snapshots__/index.spec.js.snap     |  8 +++++++
 packages/swipe-cell/test/index.spec.js        | 18 +++++++++++++++
 4 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/docs/markdown/changelog.zh-CN.md b/docs/markdown/changelog.zh-CN.md
index 3d7985d67..7e070fce3 100644
--- a/docs/markdown/changelog.zh-CN.md
+++ b/docs/markdown/changelog.zh-CN.md
@@ -19,6 +19,10 @@
 
 - 支持`Number`类型的`input-width`属性
 
+##### SwipeCell
+
+- 修复只渲染单侧内容时报错的问题
+
 ##### Uploader
 
 - 新增`preview`属性
diff --git a/packages/swipe-cell/index.js b/packages/swipe-cell/index.js
index ee175f139..fbe0abda6 100644
--- a/packages/swipe-cell/index.js
+++ b/packages/swipe-cell/index.js
@@ -31,25 +31,24 @@ export default sfc({
 
   computed: {
     computedLeftWidth() {
-      if (this.leftWidth) {
-        return this.leftWidth;
-      }
-
-      const rect = this.$refs.left.getBoundingClientRect();
-      return rect.width;
+      return this.leftWidth || this.getWidthByRef('left');
     },
 
     computedRightWidth() {
-      if (this.rightWidth) {
-        return this.rightWidth;
-      }
-
-      const rect = this.$refs.right.getBoundingClientRect();
-      return rect.width;
+      return this.rightWidth || this.getWidthByRef('right');
     }
   },
 
   methods: {
+    getWidthByRef(ref) {
+      if (this.$refs[ref]) {
+        const rect = this.$refs[ref].getBoundingClientRect();
+        return rect.width;
+      }
+
+      return 0;
+    },
+
     open(position) {
       const offset = position === 'left' ? this.computedLeftWidth : -this.computedRightWidth;
       this.swipeMove(offset);
diff --git a/packages/swipe-cell/test/__snapshots__/index.spec.js.snap b/packages/swipe-cell/test/__snapshots__/index.spec.js.snap
index cd219a7f9..fc1b83429 100644
--- a/packages/swipe-cell/test/__snapshots__/index.spec.js.snap
+++ b/packages/swipe-cell/test/__snapshots__/index.spec.js.snap
@@ -53,3 +53,11 @@ exports[`drag and show right part 1`] = `
   </div>
 </div>
 `;
+
+exports[`render one side 1`] = `
+<div class="van-swipe-cell">
+  <div class="van-swipe-cell__wrapper" style="transform: translate3d(50px, 0, 0); transition: .6s cubic-bezier(0.18, 0.89, 0.32, 1);">
+    <div class="van-swipe-cell__left">Left</div>
+  </div>
+</div>
+`;
diff --git a/packages/swipe-cell/test/index.spec.js b/packages/swipe-cell/test/index.spec.js
index 43b317333..a0979ffe1 100644
--- a/packages/swipe-cell/test/index.spec.js
+++ b/packages/swipe-cell/test/index.spec.js
@@ -106,3 +106,21 @@ it('auto calc width', async () => {
 
   restoreMock();
 });
+
+it('render one side', async () => {
+  const restoreMock = mockGetBoundingClientRect({
+    width: 50
+  });
+
+  const wrapper = mount(SwipeCell, {
+    scopedSlots: {
+      left: defaultProps.scopedSlots.left
+    }
+  });
+
+  await later();
+  triggerDrag(wrapper, 100, 0);
+  expect(wrapper).toMatchSnapshot();
+
+  restoreMock();
+});