[Doc] beautify demo

packages/toast/demo/index.vue

@@ -1,21 +1,51 @@
 <template>
   <demo-section>
     <demo-block :title="$t('title1')">
-      <van-button @click="$toast($t('text'))">{{ $t('title1') }}</van-button>
-      <van-button @click="$toast($t('longText'))">{{ $t('longTextButton') }}</van-button>
+      <van-button
+        type="primary"
+        @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 @click="showLoadingToast">{{ $t('title2') }}</van-button>
+      <van-button
+        type="primary"
+        @click="showLoadingToast"
+      >
+        {{ $t('title2') }}
+      </van-button>
     </demo-block>
 
     <demo-block :title="$t('title3')">
-      <van-button @click="showSuccessToast">{{ $t('success') }}</van-button>
-      <van-button @click="showFailToast">{{ $t('fail') }}</van-button>
+      <van-button
+        type="info"
+        @click="showSuccessToast"
+      >
+        {{ $t('success') }}
+      </van-button>
+      <van-button
+        type="danger"
+        @click="showFailToast"
+      >
+        {{ $t('fail') }}
+      </van-button>
     </demo-block>
 
     <demo-block :title="$t('advancedUsage')">
-      <van-button @click="showCustomizedToast">{{ $t('advancedUsage') }}</van-button>
+      <van-button
+        type="primary"
+        @click="showCustomizedToast"
+      >
+        {{ $t('advancedUsage') }}
+      </van-button>
     </demo-block>
   </demo-section>
 </template>
@@ -88,7 +118,11 @@ export default {
 </script>
 
 <style lang="less">
+@import "../../style/var";
+
 .demo-toast {
+  background-color: @white;
+
   .van-button {
     margin-left: 15px;
   }

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

@@ -2,9 +2,21 @@
 
 exports[`renders demo correctly 1`] = `
 <div>
-  <div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">文字提示</span></button> <button class="van-button van-button--default van-button--normal"><span class="van-button__text">长文字提示</span></button></div>
-  <div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">加载提示</span></button></div>
-  <div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">成功提示</span></button> <button class="van-button van-button--default van-button--normal"><span class="van-button__text">失败提示</span></button></div>
-  <div><button class="van-button van-button--default 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><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></div>
 </div>
 `;