docs(Toast): add loadingType demo (#4783)

src/toast/README.md

@@ -24,6 +24,12 @@ Toast.loading({
   message: 'Loading...',
   forbidClick: true
 });
+
+Toast.loading({
+  message: 'Loading...',
+  forbidClick: true,
+  loadingType: 'spinner'
+});
 ```
 
 ### Success/Fail
@@ -47,12 +53,12 @@ Toast({
 });
 ```
 
-### Advanced Usage
+### Update Message
 
 ```javascript
 const toast = Toast.loading({
-  duration: 0,       // continuous display toast
+  duration: 0, // continuous display toast
-  forbidClick: true, // forbid click background
+  forbidClick: true,
   loadingType: 'spinner',
   message: '3 seconds'
 });

src/toast/README.zh-CN.md

@@ -19,11 +19,20 @@ Toast('提示内容');
 
 ### 加载提示
 
+使用`Toast.loading`方法展示加载提示，通过`forbidClick`属性可以禁用背景点击，通过`loadingType`属性可以自定义加载图标类型。
+
 ```js
 Toast.loading({
   message: '加载中...',
   forbidClick: true
 });
+
+// 自定义加载图标
+Toast.loading({
+  message: '加载中...',
+  forbidClick: true,
+  loadingType: 'spinner'
+});
 ```
 
 ### 成功/失败提示
@@ -47,13 +56,12 @@ Toast({
 });
 ```
 
-### 高级用法
+### 动态更新提示
 
 ```js
 const toast = Toast.loading({
-  duration: 0,       // 持续展示 toast
+  duration: 0, // 持续展示 toast
-  forbidClick: true, // 禁用背景点击
+  forbidClick: true,
-  loadingType: 'spinner',
   message: '倒计时 3 秒'
 });
 
@@ -64,6 +72,7 @@ const timer = setInterval(() => {
     toast.message = `倒计时 ${second} 秒`;
   } else {
     clearInterval(timer);
+    // 手动清除 Toast
     Toast.clear();
   }
 }, 1000);

src/toast/demo/index.vue

@@ -1,70 +1,27 @@
 <template>
   <demo-section>
     <demo-block :title="$t('title1')">
-      <van-button
+      <van-button type="primary" :text="$t('title1')" @click="$toast($t('text'))" />
-        type="primary"
+      <van-button type="primary" :text="$t('longTextButton')" @click="$toast($t('longText'))" />
-        @click="$toast($t('text'))"
-      >
-        {{ $t('title1') }}
-      </van-button>
-      <van-button
-        type="primary"
-        @click="$toast($t('longText'))"
-      >
-        {{ $t('longTextButton') }}
-      </van-button>
     </demo-block>
 
     <demo-block :title="$t('title2')">
-      <van-button
+      <van-button type="primary" :text="$t('title2')" @click="showLoadingToast()" />
-        type="primary"
+      <van-button type="primary" :text="$t('loadingType')" @click="showLoadingToast('spinner')" />
-        @click="showLoadingToast"
-      >
-        {{ $t('title2') }}
-      </van-button>
     </demo-block>
 
     <demo-block :title="$t('title3')">
-      <van-button
+      <van-button type="info" :text="$t('success')" @click="showSuccessToast" />
-        type="info"
+      <van-button type="danger" :text="$t('fail')" @click="showFailToast" />
-        @click="showSuccessToast"
-      >
-        {{ $t('success') }}
-      </van-button>
-      <van-button
-        type="danger"
-        @click="showFailToast"
-      >
-        {{ $t('fail') }}
-      </van-button>
     </demo-block>
 
-    <demo-block
+    <demo-block v-if="!$attrs.weapp" :title="$t('customIcon')">
-      v-if="!$attrs.weapp"
+      <van-button type="primary" :text="$t('customIcon')" @click="showIconToast" />
-      :title="$t('customIcon')"
+      <van-button type="primary" :text="$t('customImage')" @click="showImageToast" />
-    >
-      <van-button
-        type="primary"
-        @click="showIconToast"
-      >
-        {{ $t('customIcon') }}
-      </van-button>
-
-      <van-button
-        type="primary"
-        @click="showImageToast"
-      >
-        {{ $t('customImage') }}
-      </van-button>
     </demo-block>
 
-    <demo-block :title="$t('advancedUsage')">
+    <demo-block :title="$t('updateMessage')">
-      <van-button
+      <van-button type="primary" :text="$t('updateMessage')" @click="showCustomizedToast" />
-        type="primary"
-        @click="showCustomizedToast"
-      >
-        {{ $t('advancedUsage') }}
-      </van-button>
     </demo-block>
   </demo-section>
 </template>
@@ -85,7 +42,9 @@ export default {
       customIcon: '自定义图标',
       customImage: '展示图片',
       text4: second => `倒计时 ${second} 秒`,
-      longTextButton: '长文字提示'
+      longTextButton: '长文字提示',
+      updateMessage: '动态更新提示',
+      loadingType: '自定义加载图标'
     },
     'en-US': {
       title1: 'Text',
@@ -100,13 +59,19 @@ export default {
       customIcon: 'Custom Icon',
       customImage: 'Custom Image',
       text4: second => `${second} seconds`,
-      longTextButton: 'Long Text'
+      longTextButton: 'Long Text',
+      updateMessage: 'Update Message',
+      loadingType: 'Loading Type'
     }
   },
 
   methods: {
-    showLoadingToast() {
+    showLoadingToast(loadingType) {
-      this.$toast.loading({ forbidClick: true, message: this.$t('loading') });
+      this.$toast.loading({
+        forbidClick: true,
+        message: this.$t('loading'),
+        loadingType
+      });
     },
 
     showSuccessToast() {
@@ -135,7 +100,6 @@ export default {
       const toast = this.$toast.loading({
         duration: 0,
         forbidClick: true,
-        loadingType: 'spinner',
         message: this.$t('text4', 3)
       });
 
@@ -155,7 +119,7 @@ export default {
 </script>
 
 <style lang="less">
-@import "../../style/var";
+@import '../../style/var';
 
 .demo-toast {
   background-color: @white;

src/toast/test/__snapshots__/demo.spec.js.snap

@@ -2,26 +2,10 @@
 
 exports[`renders demo correctly 1`] = `
 <div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">文字提示</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">长文字提示</span></button></div>
-      文字提示
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">加载提示</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">自定义加载图标</span></button></div>
-    </span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
+  <div><button class="van-button van-button--info van-button--normal"><span class="van-button__text">成功提示</span></button> <button class="van-button van-button--danger van-button--normal"><span class="van-button__text">失败提示</span></button></div>
-      长文字提示
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">自定义图标</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">展示图片</span></button></div>
-    </span></button></div>
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">动态更新提示</span></button></div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
-      加载提示
-    </span></button></div>
-  <div><button class="van-button van-button--info van-button--normal"><span class="van-button__text">
-      成功提示
-    </span></button> <button class="van-button van-button--danger van-button--normal"><span class="van-button__text">
-      失败提示
-    </span></button></div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
-      自定义图标
-    </span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
-      展示图片
-    </span></button></div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
-      高级用法
-    </span></button></div>
 </div>
 `;