From a8debb9266129a333f4ddf2ab747d224384f7793 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Thu, 30 Jul 2020 21:38:54 +0800
Subject: [PATCH] docs(Toast): update demo (#6909)

---
 src/toast/README.md                           | 12 +--
 src/toast/README.zh-CN.md                     | 20 ++---
 src/toast/demo/index.vue                      | 76 ++++---------------
 .../test/__snapshots__/demo.spec.js.snap      | 61 +++++++++------
 4 files changed, 70 insertions(+), 99 deletions(-)

diff --git a/src/toast/README.md b/src/toast/README.md
index 3f96a7459..92b18dc77 100644
--- a/src/toast/README.md
+++ b/src/toast/README.md
@@ -24,12 +24,6 @@ Toast.loading({
   message: 'Loading...',
   forbidClick: true,
 });
-
-Toast.loading({
-  message: 'Loading...',
-  forbidClick: true,
-  loadingType: 'spinner',
-});
 ```
 
 ### Success/Fail
@@ -51,6 +45,12 @@ Toast({
   message: 'Custom Image',
   icon: 'https://img.yzcdn.cn/vant/logo.png',
 });
+
+Toast.loading({
+  message: 'Loading...',
+  forbidClick: true,
+  loadingType: 'spinner',
+});
 ```
 
 ### Update Message
diff --git a/src/toast/README.zh-CN.md b/src/toast/README.zh-CN.md
index 402d12ad3..602f5397a 100644
--- a/src/toast/README.zh-CN.md
+++ b/src/toast/README.zh-CN.md
@@ -23,20 +23,13 @@ Toast('提示内容');
 
 ### 加载提示
 
-使用 `Toast.loading` 方法展示加载提示，通过 `forbidClick` 属性可以禁用背景点击，通过`loadingType` 属性可以自定义加载图标类型。
+使用 `Toast.loading` 方法展示加载提示，通过 `forbidClick` 属性可以禁用背景点击。
 
 ```js
 Toast.loading({
   message: '加载中...',
   forbidClick: true,
 });
-
-// 自定义加载图标
-Toast.loading({
-  message: '加载中...',
-  forbidClick: true,
-  loadingType: 'spinner',
-});
 ```
 
 ### 成功/失败提示
@@ -50,7 +43,7 @@ Toast.fail('失败文案');
 
 ### 自定义图标
 
-通过 `icon` 选项可以自定义图标，支持传入[图标名称](#/zh-CN/icon)或图片链接。
+通过 `icon` 选项可以自定义图标，支持传入[图标名称](#/zh-CN/icon)或图片链接，通过`loadingType` 属性可以自定义加载图标类型。
 
 ```js
 Toast({
@@ -59,9 +52,16 @@ Toast({
 });
 
 Toast({
-  message: '展示图片',
+  message: '自定义图片',
   icon: 'https://img.yzcdn.cn/vant/logo.png',
 });
+
+// 自定义加载图标
+Toast.loading({
+  message: '加载中...',
+  forbidClick: true,
+  loadingType: 'spinner',
+});
 ```
 
 ### 动态更新提示
diff --git a/src/toast/demo/index.vue b/src/toast/demo/index.vue
index 5a6d5ca27..e56dbe69c 100644
--- a/src/toast/demo/index.vue
+++ b/src/toast/demo/index.vue
@@ -1,53 +1,26 @@
 <template>
   <demo-section>
-    <demo-block :title="t('title1')">
-      <van-button
-        type="primary"
-        :text="t('title1')"
-        @click="$toast(t('text'))"
-      />
-      <van-button
-        type="primary"
-        :text="t('longTextButton')"
-        @click="$toast(t('longText'))"
-      />
+    <demo-block card :title="t('basicUsage')">
+      <van-cell is-link :title="t('title1')" @click="$toast(t('text'))" />
+      <van-cell is-link :title="t('title2')" @click="showLoadingToast()" />
+      <van-cell is-link :title="t('success')" @click="showSuccessToast" />
+      <van-cell is-link :title="t('fail')" @click="showFailToast" />
     </demo-block>
 
-    <demo-block :title="t('title2')">
-      <van-button
-        type="primary"
-        :text="t('title2')"
-        @click="showLoadingToast()"
-      />
-      <van-button
-        type="primary"
-        :text="t('loadingType')"
+    <demo-block card v-if="!isWeapp" :title="t('customIcon')">
+      <van-cell is-link :title="t('customIcon')" @click="showIconToast" />
+      <van-cell is-link :title="t('customImage')" @click="showImageToast" />
+      <van-cell
+        is-link
+        :title="t('loadingType')"
         @click="showLoadingToast('spinner')"
       />
     </demo-block>
 
-    <demo-block :title="t('title3')">
-      <van-button type="info" :text="t('success')" @click="showSuccessToast" />
-      <van-button type="danger" :text="t('fail')" @click="showFailToast" />
-    </demo-block>
-
-    <demo-block v-if="!isWeapp" :title="t('customIcon')">
-      <van-button
-        type="primary"
-        :text="t('customIcon')"
-        @click="showIconToast"
-      />
-      <van-button
-        type="primary"
-        :text="t('customImage')"
-        @click="showImageToast"
-      />
-    </demo-block>
-
-    <demo-block :title="t('updateMessage')">
-      <van-button
-        type="primary"
-        :text="t('updateMessage')"
+    <demo-block card :title="t('updateMessage')">
+      <van-cell
+        is-link
+        :title="t('updateMessage')"
         @click="showCustomizedToast"
       />
     </demo-block>
@@ -64,13 +37,11 @@ export default {
       success: '成功提示',
       fail: '失败提示',
       text: '提示内容',
-      longText: '这是一条长文字提示，超过一定字数就会换行',
       text2: '成功文案',
       text3: '失败文案',
       customIcon: '自定义图标',
-      customImage: '展示图片',
+      customImage: '自定义图片',
       text4: (second) => `倒计时 ${second} 秒`,
-      longTextButton: '长文字提示',
       updateMessage: '动态更新提示',
       loadingType: '自定义加载图标',
     },
@@ -81,14 +52,11 @@ export default {
       success: 'Success',
       fail: 'Fail',
       text: 'Some messages',
-      longText:
-        'This is a long message, text will wrap when over a certain length',
       text2: 'Success',
       text3: 'Fail',
       customIcon: 'Custom Icon',
       customImage: 'Custom Image',
       text4: (second) => `${second} seconds`,
-      longTextButton: 'Long Text',
       updateMessage: 'Update Message',
       loadingType: 'Loading Type',
     },
@@ -146,15 +114,3 @@ export default {
   },
 };
 </script>
-
-<style lang="less">
-@import '../../style/var';
-
-.demo-toast {
-  background-color: @white;
-
-  .van-button {
-    margin-left: @padding-md;
-  }
-}
-</style>
diff --git a/src/toast/test/__snapshots__/demo.spec.js.snap b/src/toast/test/__snapshots__/demo.spec.js.snap
index f06b2697b..6a1e4449e 100644
--- a/src/toast/test/__snapshots__/demo.spec.js.snap
+++ b/src/toast/test/__snapshots__/demo.spec.js.snap
@@ -2,28 +2,43 @@
 
 exports[`renders demo correctly 1`] = `
 <div>
-  <div><button class="van-button van-button--primary van-button--normal">
-      <div class="van-button__content"><span class="van-button__text">文字提示</span></div>
-    </button> <button class="van-button van-button--primary van-button--normal">
-      <div class="van-button__content"><span class="van-button__text">长文字提示</span></div>
-    </button></div>
-  <div><button class="van-button van-button--primary van-button--normal">
-      <div class="van-button__content"><span class="van-button__text">加载提示</span></div>
-    </button> <button class="van-button van-button--primary van-button--normal">
-      <div class="van-button__content"><span class="van-button__text">自定义加载图标</span></div>
-    </button></div>
-  <div><button class="van-button van-button--info van-button--normal">
-      <div class="van-button__content"><span class="van-button__text">成功提示</span></div>
-    </button> <button class="van-button van-button--danger van-button--normal">
-      <div class="van-button__content"><span class="van-button__text">失败提示</span></div>
-    </button></div>
-  <div><button class="van-button van-button--primary van-button--normal">
-      <div class="van-button__content"><span class="van-button__text">自定义图标</span></div>
-    </button> <button class="van-button van-button--primary van-button--normal">
-      <div class="van-button__content"><span class="van-button__text">展示图片</span></div>
-    </button></div>
-  <div><button class="van-button van-button--primary van-button--normal">
-      <div class="van-button__content"><span class="van-button__text">动态更新提示</span></div>
-    </button></div>
+  <div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+      <div class="van-cell__title"><span>文字提示</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+      <div class="van-cell__title"><span>加载提示</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+      <div class="van-cell__title"><span>成功提示</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+      <div class="van-cell__title"><span>失败提示</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
+  </div>
+  <div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+      <div class="van-cell__title"><span>自定义图标</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+      <div class="van-cell__title"><span>自定义图片</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+      <div class="van-cell__title"><span>自定义加载图标</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
+  </div>
+  <div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+      <div class="van-cell__title"><span>动态更新提示</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
+  </div>
 </div>
 `;