docs(SwipeCell): add custom content demo

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>

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>

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',
     };
   },
 };

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>

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

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`回调函数，可以自定义两侧滑动内容关闭时的行为

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>

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;">