From da514e100d73c32e95b5fdc42649e2f15d326410 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Fri, 14 Jun 2019 20:29:11 +0800
Subject: [PATCH] [Doc] Button: add demo of image icon (#3516)

---
 packages/button/demo/index.vue                | 12 ++++++++++-
 packages/button/en-US.md                      | 11 ++++------
 .../test/__snapshots__/demo.spec.js.snap      | 14 ++++++++++---
 packages/button/zh-CN.md                      | 21 +++++++++++--------
 4 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/packages/button/demo/index.vue b/packages/button/demo/index.vue
index 47cba8f93..9b7a846e9 100644
--- a/packages/button/demo/index.vue
+++ b/packages/button/demo/index.vue
@@ -58,7 +58,11 @@
       />
       <van-button
         loading
+        type="primary"
         loading-type="spinner"
+      />
+      <van-button
+        loading
         :loading-text="$t('loadingText')"
         type="danger"
       />
@@ -83,10 +87,16 @@
         icon="star-o"
       />
       <van-button
-        type="danger"
+        type="primary"
         icon="star-o"
         :text="$t('button')"
       />
+      <van-button
+        plain
+        type="primary"
+        icon="https://img.yzcdn.cn/vant/logo.png"
+        :text="$t('button')"
+      />
     </demo-block>
 
     <demo-block :title="$t('size')">
diff --git a/packages/button/en-US.md b/packages/button/en-US.md
index 6555860fb..934bdd4e2 100644
--- a/packages/button/en-US.md
+++ b/packages/button/en-US.md
@@ -45,12 +45,8 @@ Vue.use(Button);
 
 ```html 
 <van-button loading type="primary" />
-<van-button
-  loading
-  type="danger"
-  loading-type="spinner"
-  loading-text="Loading..."
-/>
+<van-button loading type="primary" loading-type="spinner" />
+<van-button loading type="danger" loading-text="Loading..." />
 ```
 
 ### Shape
@@ -64,7 +60,8 @@ Vue.use(Button);
 
 ```html 
 <van-button icon="star-o" type="primary" />
-<van-button icon="star-o" type="danger">Button</van-button>
+<van-button icon="star-o" type="primary">Button</van-button>
+<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="danger">Button</van-button>
 ```
 
 ### Size
diff --git a/packages/button/test/__snapshots__/demo.spec.js.snap b/packages/button/test/__snapshots__/demo.spec.js.snap
index 982e98aa0..94c9a2ec5 100644
--- a/packages/button/test/__snapshots__/demo.spec.js.snap
+++ b/packages/button/test/__snapshots__/demo.spec.js.snap
@@ -10,13 +10,21 @@ exports[`renders demo correctly 1`] = `
   <div><button disabled="disabled" class="van-button van-button--primary van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button> <button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button></div>
   <div><button class="van-button van-button--primary van-button--normal">
       <div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+    </button> <button class="van-button van-button--primary van-button--normal">
+      <div class="van-loading van-loading--spinner van-button__loading"><span class="van-loading__spinner van-loading__spinner--spinner" style="width: 20px; height: 20px;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
     </button> <button class="van-button van-button--danger van-button--normal">
-      <div class="van-loading van-loading--spinner van-button__loading"><span class="van-loading__spinner van-loading__spinner--spinner" style="width: 20px; height: 20px;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div><span class="van-button__text">加载中...</span>
+      <div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div><span class="van-button__text">加载中...</span>
     </button></div>
   <div><button class="van-button van-button--primary van-button--normal van-button--square"><span class="van-button__text">方形按钮</span></button> <button class="van-button van-button--danger van-button--normal van-button--round"><span class="van-button__text">圆形按钮</span></button></div>
   <div><button class="van-button van-button--primary van-button--normal"><i class="van-icon van-icon-star-o van-button__icon">
-        <!----></i></button> <button class="van-button van-button--danger van-button--normal"><i class="van-icon van-icon-star-o van-button__icon">
-        <!----></i><span class="van-button__text">按钮</span></button></div>
+        <!----></i></button> <button class="van-button van-button--primary van-button--normal"><i class="van-icon van-icon-star-o van-button__icon">
+        <!----></i><span class="van-button__text">按钮</span></button> <button class="van-button van-button--primary van-button--normal van-button--plain"><i class="van-icon van-button__icon">
+        <div class="van-image van-icon__image"><img src="https://img.yzcdn.cn/vant/logo.png" class="van-image__img">
+          <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
+              <!----></i></div>
+        </div>
+        <!---->
+      </i><span class="van-button__text">按钮</span></button></div>
   <div><button class="van-button van-button--primary van-button--large"><span class="van-button__text">
       大号按钮
     </span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
diff --git a/packages/button/zh-CN.md b/packages/button/zh-CN.md
index 6473e9fb2..9338b183e 100644
--- a/packages/button/zh-CN.md
+++ b/packages/button/zh-CN.md
@@ -42,7 +42,7 @@ Vue.use(Button);
 
 ### 禁用状态
 
-通过`disabled`属性来禁用按钮，此时按钮不可点击
+通过`disabled`属性来禁用按钮，禁用状态下按钮不可点击
 
 ```html
 <van-button disabled type="primary">禁用状态</van-button>
@@ -51,18 +51,18 @@ Vue.use(Button);
 
 ### 加载状态
 
+通过`loading`属性设置按钮为加载状态，加载状态下默认会隐藏按钮文字，可以通过`loading-text`设置加载状态下的文字
+
 ```html 
 <van-button loading type="primary" />
-<van-button
-  loading
-  type="danger"
-  loading-type="spinner"
-  loading-text="加载中..."
-/>
+<van-button loading type="primary" loading-type="spinner" />
+<van-button loading type="danger" loading-text="加载中..." />
 ```
 
 ### 按钮形状
 
+通过`square`设置方形按钮，通过`round`设置圆形按钮
+
 ```html 
 <van-button square type="primary">方形按钮</van-button>
 <van-button round type="danger">圆形按钮</van-button>
@@ -70,9 +70,12 @@ Vue.use(Button);
 
 ### 图标按钮
 
+通过`icon`属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL
+
 ```html 
 <van-button icon="star-o" type="primary" />
-<van-button icon="star-o" type="danger">按钮</van-button>
+<van-button icon="star-o" type="primary">按钮</van-button>
+<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="danger">按钮</van-button>
 ```
 
 ### 按钮尺寸
@@ -117,4 +120,4 @@ Vue.use(Button);
 | 事件名 | 说明 | 回调参数 |
 |------|------|------|
 | click | 点击按钮，且按钮状态不为加载或禁用时触发 | event: Event |
-| touchstart | 原生 touchstart 事件 | event: TouchEvent |
+| touchstart | 开始触摸按钮时触发 | event: TouchEvent |