From 2af7d1b20971d57d0cd13b0c8a1cdf897916dff1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Fri, 24 Jan 2020 11:17:03 +0800
Subject: [PATCH] docs(SwipeCell): add custom content demo

---
 src/card/README.md                            |  6 +--
 src/card/README.zh-CN.md                      |  6 +--
 src/card/demo/index.vue                       |  2 +-
 src/card/test/__snapshots__/demo.spec.js.snap |  6 +--
 src/swipe-cell/README.md                      | 33 ++++++++++++++++
 src/swipe-cell/README.zh-CN.md                | 35 +++++++++++++++++
 src/swipe-cell/demo/index.vue                 | 39 +++++++++++++++++++
 .../test/__snapshots__/demo.spec.js.snap      | 28 +++++++++++++
 8 files changed, 145 insertions(+), 10 deletions(-)

diff --git a/src/card/README.md b/src/card/README.md
index c8ca833df..147c6121a 100644
--- a/src/card/README.md
+++ b/src/card/README.md
@@ -19,7 +19,7 @@ Vue.use(Card);
   price="2.00"
   title="Title"
   desc="Description"
-  thumb="https://img.yzcdn.cn/vant/cat.jpeg"
+  thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
 />
 ```
 
@@ -33,7 +33,7 @@ Vue.use(Card);
   title="Title"
   desc="Description"
   origin-price="10.00"
-  thumb="https://img.yzcdn.cn/vant/cat.jpeg"
+  thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
 />
 ```
 
@@ -47,7 +47,7 @@ Use slot to custom content.
   title="Title"
   desc="Description"
   price="2.00"
-  thumb="https://img.yzcdn.cn/vant/cat.jpeg"
+  thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
 >
   <div slot="tags">
     <van-tag plain type="danger">Tag</van-tag>
diff --git a/src/card/README.zh-CN.md b/src/card/README.zh-CN.md
index f1d1bf8a0..57a4f1973 100644
--- a/src/card/README.zh-CN.md
+++ b/src/card/README.zh-CN.md
@@ -19,7 +19,7 @@ Vue.use(Card);
   price="2.00"
   desc="描述信息"
   title="商品标题"
-  thumb="https://img.yzcdn.cn/vant/cat.jpeg"
+  thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
 />
 ```
 
@@ -34,7 +34,7 @@ Vue.use(Card);
   price="2.00"
   desc="描述信息"
   title="商品标题"
-  thumb="https://img.yzcdn.cn/vant/cat.jpeg"
+  thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
   origin-price="10.00"
 />
 ```
@@ -49,7 +49,7 @@ Vue.use(Card);
   price="2.00"
   desc="描述信息"
   title="商品标题"
-  thumb="https://img.yzcdn.cn/vant/cat.jpeg"
+  thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
 >
   <div slot="tags">
     <van-tag plain type="danger">标签</van-tag>
diff --git a/src/card/demo/index.vue b/src/card/demo/index.vue
index 3fb22b278..6c5e5afc4 100644
--- a/src/card/demo/index.vue
+++ b/src/card/demo/index.vue
@@ -72,7 +72,7 @@ export default {
 
   data() {
     return {
-      imageURL: 'https://img.yzcdn.cn/vant/cat.jpeg',
+      imageURL: 'https://img.yzcdn.cn/vant/ipad.jpeg',
     };
   },
 };
diff --git a/src/card/test/__snapshots__/demo.spec.js.snap b/src/card/test/__snapshots__/demo.spec.js.snap
index 037297688..7a2eae8bc 100644
--- a/src/card/test/__snapshots__/demo.spec.js.snap
+++ b/src/card/test/__snapshots__/demo.spec.js.snap
@@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-card">
       <div class="van-card__header"><a class="van-card__thumb">
-          <div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
+          <div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/ipad.jpeg" class="van-image__img" style="object-fit: cover;">
             <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
                 <!----></i></div>
           </div>
@@ -28,7 +28,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-card">
       <div class="van-card__header"><a class="van-card__thumb">
-          <div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
+          <div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/ipad.jpeg" class="van-image__img" style="object-fit: cover;">
             <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
                 <!----></i></div>
           </div>
@@ -53,7 +53,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-card">
       <div class="van-card__header"><a class="van-card__thumb">
-          <div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
+          <div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/ipad.jpeg" class="van-image__img" style="object-fit: cover;">
             <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
                 <!----></i></div>
           </div>
diff --git a/src/swipe-cell/README.md b/src/swipe-cell/README.md
index f738fec47..10a76affd 100644
--- a/src/swipe-cell/README.md
+++ b/src/swipe-cell/README.md
@@ -26,6 +26,39 @@ Vue.use(SwipeCell);
 </van-swipe-cell>
 ```
 
+### Custom Content
+
+```html
+<van-swipe-cell>
+  <van-card
+    num="2"
+    price="2.00"
+    desc="Description"
+    title="Title"
+    class="goods-card"
+    thumb="https://img.yzcdn.cn/vant/cat.jpeg"
+  />
+  <van-button
+    slot="right"
+    square
+    text="Delete"
+    type="danger"
+    class="delete-button"
+  />
+</van-swipe-cell>
+
+<style>
+.goods-card {
+  margin: 0;
+  background-color: @white;
+}
+
+.delete-button {
+  height: 100%;
+}
+</style>
+```
+
 ### Before Close
 
 ```html
diff --git a/src/swipe-cell/README.zh-CN.md b/src/swipe-cell/README.zh-CN.md
index 62f4c715c..2dab04fa0 100644
--- a/src/swipe-cell/README.zh-CN.md
+++ b/src/swipe-cell/README.zh-CN.md
@@ -28,6 +28,41 @@ Vue.use(SwipeCell);
 </van-swipe-cell>
 ```
 
+### 自定义内容
+
+`SwipeCell`内容可以嵌套任意内容，比如嵌套一个商品卡片
+
+```html
+<van-swipe-cell>
+  <van-card
+    num="2"
+    price="2.00"
+    desc="描述信息"
+    title="商品标题"
+    class="goods-card"
+    thumb="https://img.yzcdn.cn/vant/cat.jpeg"
+  />
+  <van-button
+    slot="right"
+    square
+    text="删除"
+    type="danger"
+    class="delete-button"
+  />
+</van-swipe-cell>
+
+<style>
+.goods-card {
+  margin: 0;
+  background-color: @white;
+}
+
+.delete-button {
+  height: 100%;
+}
+</style>
+```
+
 ### 异步关闭
 
 通过传入`before-close`回调函数，可以自定义两侧滑动内容关闭时的行为
diff --git a/src/swipe-cell/demo/index.vue b/src/swipe-cell/demo/index.vue
index 0ef05a0a3..88da1a0e7 100644
--- a/src/swipe-cell/demo/index.vue
+++ b/src/swipe-cell/demo/index.vue
@@ -18,6 +18,26 @@
         </van-swipe-cell>
       </demo-block>
 
+      <demo-block :title="$t('customContent')">
+        <van-swipe-cell>
+          <van-card
+            num="2"
+            price="2.00"
+            :desc="$t('desc')"
+            :title="$t('cardTitle')"
+            :thumb="imageURL"
+          />
+          <template #right>
+            <van-button
+              square
+              type="danger"
+              class="delete-button"
+              :text="$t('delete')"
+            />
+          </template>
+        </van-swipe-cell>
+      </demo-block>
+
       <demo-block :title="$t('beforeClose')">
         <van-swipe-cell :before-close="beforeClose">
           <template #left>
@@ -46,7 +66,9 @@ export default {
       collect: '收藏',
       title: '单元格',
       confirm: '确定删除吗？',
+      cardTitle: '商品标题',
       beforeClose: '异步关闭',
+      customContent: '自定义内容',
     },
     'en-US': {
       select: 'Select',
@@ -54,10 +76,18 @@ export default {
       collect: 'Collect',
       title: 'Cell',
       confirm: 'Are you sure to delete?',
+      cardTitle: 'Title',
       beforeClose: 'Before Close',
+      customContent: 'Custom Content',
     },
   },
 
+  data() {
+    return {
+      imageURL: 'https://img.yzcdn.cn/vant/ipad.jpeg',
+    };
+  },
+
   methods: {
     beforeClose({ position, instance }) {
       switch (position) {
@@ -86,5 +116,14 @@ export default {
 
 .demo-swipe-cell {
   user-select: none;
+
+  .van-card {
+    margin: 0;
+    background-color: @white;
+  }
+
+  .delete-button {
+    height: 100%;
+  }
 }
 </style>
diff --git a/src/swipe-cell/test/__snapshots__/demo.spec.js.snap b/src/swipe-cell/test/__snapshots__/demo.spec.js.snap
index 7174bf5c8..3763302b7 100644
--- a/src/swipe-cell/test/__snapshots__/demo.spec.js.snap
+++ b/src/swipe-cell/test/__snapshots__/demo.spec.js.snap
@@ -15,6 +15,34 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
     </div>
+    <div>
+      <div class="van-swipe-cell">
+        <div class="van-swipe-cell__wrapper" style="transform: translate3d(0px, 0, 0); transition-duration: .6s;">
+          <div class="van-card">
+            <div class="van-card__header"><a class="van-card__thumb">
+                <div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/ipad.jpeg" class="van-image__img" style="object-fit: cover;">
+                  <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+                      <!----></i></div>
+                </div>
+              </a>
+              <div class="van-card__content">
+                <div>
+                  <div class="van-card__title van-multi-ellipsis--l2">商品标题</div>
+                  <div class="van-card__desc van-ellipsis">描述信息</div>
+                </div>
+                <div class="van-card__bottom">
+                  <div class="van-card__price">
+                    <div><span class="van-card__price-currency">¥</span><span class="van-card__price-integer">2</span>.<span class="van-card__price-decimal">00</span></div>
+                  </div>
+                  <div class="van-card__num">x2</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="van-swipe-cell__right"><button class="delete-button van-button van-button--danger van-button--normal van-button--square"><span class="van-button__text">删除</span></button></div>
+        </div>
+      </div>
+    </div>
     <div>
       <div class="van-swipe-cell">
         <div class="van-swipe-cell__wrapper" style="transform: translate3d(0px, 0, 0); transition-duration: .6s;">