From cdf3bebfab194f3cc3a39ac8229b4e07c7b1f8d2 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sat, 25 Jul 2020 14:28:29 +0800
Subject: [PATCH] docs(Button): update demo (#6871)

---
 src/button/README.md                          | 18 ++++-----
 src/button/README.zh-CN.md                    | 40 +++++++++----------
 src/button/demo/index.vue                     | 12 +++---
 .../test/__snapshots__/demo.spec.js.snap      | 14 +++----
 4 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/src/button/README.md b/src/button/README.md
index 3414b3b30..922c2de2b 100644
--- a/src/button/README.md
+++ b/src/button/README.md
@@ -14,9 +14,9 @@ Vue.use(Button);
 ### Type
 
 ```html
-<van-button type="default">Default</van-button>
 <van-button type="primary">Primary</van-button>
 <van-button type="info">Info</van-button>
+<van-button type="default">Default</van-button>
 <van-button type="danger">Danger</van-button>
 <van-button type="warning">Warning</van-button>
 ```
@@ -60,11 +60,11 @@ Vue.use(Button);
 ### Icon
 
 ```html
-<van-button icon="star-o" type="primary" />
-<van-button icon="star-o" type="primary">Button</van-button>
-<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="info"
-  >Button</van-button
->
+<van-button icon="plus" type="primary" />
+<van-button icon="plus" type="primary">Button</van-button>
+<van-button icon="https://img.yzcdn.cn/vant/user-active.png" type="info">
+  Button
+</van-button>
 ```
 
 ### Size
@@ -94,9 +94,9 @@ Vue.use(Button);
 ```html
 <van-button color="#7232dd">Pure</van-button>
 <van-button color="#7232dd" plain>Pure</van-button>
-<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)"
-  >Gradient</van-button
->
+<van-button color="linear-gradient(to right, #ff6034, #ee0a24)">
+  Gradient
+</van-button>
 ```
 
 ## API
diff --git a/src/button/README.zh-CN.md b/src/button/README.zh-CN.md
index 092bd1211..8c01ac951 100644
--- a/src/button/README.zh-CN.md
+++ b/src/button/README.zh-CN.md
@@ -13,19 +13,19 @@ Vue.use(Button);
 
 ### 按钮类型
 
-支持`default`、`primary`、`info`、`warning`、`danger`五种类型，默认为`default`
+按钮支持 `default`、`primary`、`info`、`warning`、`danger` 五种类型，默认为 `default`。
 
 ```html
-<van-button type="default">默认按钮</van-button>
 <van-button type="primary">主要按钮</van-button>
 <van-button type="info">信息按钮</van-button>
+<van-button type="default">默认按钮</van-button>
 <van-button type="warning">警告按钮</van-button>
 <van-button type="danger">危险按钮</van-button>
 ```
 
 ### 朴素按钮
 
-通过`plain`属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。
+通过 `plain` 属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。
 
 ```html
 <van-button plain type="primary">朴素按钮</van-button>
@@ -34,7 +34,7 @@ Vue.use(Button);
 
 ### 细边框
 
-设置`hairline`属性可以开启 0.5px 边框，基于伪类实现
+设置 `hairline` 属性可以展示 0.5px 的细边框。
 
 ```html
 <van-button plain hairline type="primary">细边框按钮</van-button>
@@ -43,7 +43,7 @@ Vue.use(Button);
 
 ### 禁用状态
 
-通过`disabled`属性来禁用按钮，禁用状态下按钮不可点击
+通过 `disabled` 属性来禁用按钮，禁用状态下按钮不可点击。
 
 ```html
 <van-button disabled type="primary">禁用状态</van-button>
@@ -52,7 +52,7 @@ Vue.use(Button);
 
 ### 加载状态
 
-通过`loading`属性设置按钮为加载状态，加载状态下默认会隐藏按钮文字，可以通过`loading-text`设置加载状态下的文字
+通过 `loading` 属性设置按钮为加载状态，加载状态下默认会隐藏按钮文字，可以通过 `loading-text` 设置加载状态下的文字。
 
 ```html
 <van-button loading type="primary" />
@@ -62,7 +62,7 @@ Vue.use(Button);
 
 ### 按钮形状
 
-通过`square`设置方形按钮，通过`round`设置圆形按钮
+通过 `square` 设置方形按钮，通过 `round` 设置圆形按钮。
 
 ```html
 <van-button square type="primary">方形按钮</van-button>
@@ -71,19 +71,19 @@ Vue.use(Button);
 
 ### 图标按钮
 
-通过`icon`属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL
+通过 `icon` 属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL。
 
 ```html
-<van-button icon="star-o" type="primary" />
-<van-button icon="star-o" type="primary">按钮</van-button>
-<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="info"
-  >按钮</van-button
->
+<van-button icon="plus" type="primary" />
+<van-button icon="plus" type="primary">按钮</van-button>
+<van-button icon="https://img.yzcdn.cn/vant/user-active.png" type="info">
+  按钮
+</van-button>
 ```
 
 ### 按钮尺寸
 
-支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`
+支持 `large`、`normal`、`small`、`mini` 四种尺寸，默认为 `normal`。
 
 ```html
 <van-button type="primary" size="large">大号按钮</van-button>
@@ -94,7 +94,7 @@ Vue.use(Button);
 
 ### 块级元素
 
-按钮在默认情况下为行内块级元素，通过`block`属性可以将按钮的元素类型设置为块级元素
+按钮在默认情况下为行内块级元素，通过 `block` 属性可以将按钮的元素类型设置为块级元素。
 
 ```html
 <van-button type="primary" block>块级元素</van-button>
@@ -102,7 +102,7 @@ Vue.use(Button);
 
 ### 页面导航
 
-可以通过`url`属性进行 URL 跳转，或通过`to`属性进行路由跳转
+可以通过 `url` 属性进行 URL 跳转，或通过 `to` 属性进行路由跳转。
 
 ```html
 <van-button type="primary" url="/vant/mobile.html">URL 跳转</van-button>
@@ -111,14 +111,14 @@ Vue.use(Button);
 
 ### 自定义颜色
 
-通过`color`属性可以自定义按钮的颜色
+通过 `color` 属性可以自定义按钮的颜色。
 
 ```html
 <van-button color="#7232dd">单色按钮</van-button>
 <van-button color="#7232dd" plain>单色按钮</van-button>
-<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)"
-  >渐变色按钮</van-button
->
+<van-button color="linear-gradient(to right, #ff6034, #ee0a24)">
+  渐变色按钮
+</van-button>
 ```
 
 ## API
diff --git a/src/button/demo/index.vue b/src/button/demo/index.vue
index 2eb52e3bd..befe6c9b4 100644
--- a/src/button/demo/index.vue
+++ b/src/button/demo/index.vue
@@ -2,9 +2,9 @@
   <demo-section>
     <demo-block :title="t('type')">
       <div class="demo-button-row">
-        <van-button type="default">{{ t('default') }}</van-button>
         <van-button type="primary">{{ t('primary') }}</van-button>
         <van-button type="info">{{ t('info') }}</van-button>
+        <van-button type="default">{{ t('default') }}</van-button>
       </div>
       <van-button type="danger">{{ t('danger') }}</van-button>
       <van-button type="warning">{{ t('warning') }}</van-button>
@@ -37,12 +37,12 @@
     </demo-block>
 
     <demo-block :title="t('icon')">
-      <van-button type="primary" icon="star-o" />
-      <van-button type="primary" icon="star-o" :text="t('button')" />
+      <van-button type="primary" icon="plus" />
+      <van-button type="primary" icon="plus" :text="t('button')" />
       <van-button
         plain
-        type="primary"
-        icon="https://img.yzcdn.cn/vant/logo.png"
+        type="info"
+        icon="https://img.yzcdn.cn/vant/user-active.png"
         :text="t('button')"
       />
     </demo-block>
@@ -71,7 +71,7 @@
       <van-button color="#7232dd" :text="t('pure')" />
       <van-button plain color="#7232dd" :text="t('pure')" />
       <van-button
-        color="linear-gradient(to right, #4bb0ff, #6149f6)"
+        color="linear-gradient(to right, #ff6034, #ee0a24)"
         :text="t('gradient')"
       />
     </demo-block>
diff --git a/src/button/test/__snapshots__/demo.spec.js.snap b/src/button/test/__snapshots__/demo.spec.js.snap
index 9d218df71..466a4c918 100644
--- a/src/button/test/__snapshots__/demo.spec.js.snap
+++ b/src/button/test/__snapshots__/demo.spec.js.snap
@@ -3,12 +3,12 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="demo-button-row"><button class="van-button van-button--default 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="demo-button-row"><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--info van-button--normal">
         <div class="van-button__content"><span class="van-button__text">信息按钮</span></div>
+      </button> <button class="van-button van-button--default van-button--normal">
+        <div class="van-button__content"><span class="van-button__text">默认按钮</span></div>
       </button></div> <button class="van-button van-button--danger van-button--normal">
       <div class="van-button__content"><span class="van-button__text">危险按钮</span></div>
     </button> <button class="van-button van-button--warning van-button--normal">
@@ -49,13 +49,13 @@ exports[`renders demo correctly 1`] = `
       <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"><i class="van-icon van-icon-star-o van-button__icon">
+      <div class="van-button__content"><i class="van-icon van-icon-plus van-button__icon">
           <!----></i></div>
     </button> <button class="van-button van-button--primary van-button--normal">
-      <div class="van-button__content"><i class="van-icon van-icon-star-o van-button__icon">
+      <div class="van-button__content"><i class="van-icon van-icon-plus van-button__icon">
           <!----></i><span class="van-button__text">按钮</span></div>
-    </button> <button class="van-button van-button--primary van-button--normal van-button--plain">
-      <div class="van-button__content"><i class="van-icon van-button__icon"><img src="https://img.yzcdn.cn/vant/logo.png" class="van-icon__image">
+    </button> <button class="van-button van-button--info van-button--normal van-button--plain">
+      <div class="van-button__content"><i class="van-icon van-button__icon"><img src="https://img.yzcdn.cn/vant/user-active.png" class="van-icon__image">
           <!----></i><span class="van-button__text">按钮</span></div>
     </button></div>
   <div><button class="van-button van-button--primary van-button--large">