From dbb74fedf0c4f112f0cde1aad3198067c446d48e Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Thu, 15 Aug 2019 20:30:29 +0800
Subject: [PATCH] [new feature] Button: add color prop (#1869)

---
 example/pages/button/index.wxml | 13 +++++++++----
 packages/button/README.md       | 18 ++++++++++++++----
 packages/button/index.ts        |  1 +
 packages/button/index.wxml      |  1 +
 4 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/example/pages/button/index.wxml b/example/pages/button/index.wxml
index 8f8ba2b3..37e6839a 100644
--- a/example/pages/button/index.wxml
+++ b/example/pages/button/index.wxml
@@ -41,9 +41,14 @@
   </demo-block>
 
   <demo-block title="按钮尺寸" padding>
-    <van-button size="large" block custom-class="demo-margin-bottom">大号按钮</van-button>
-    <van-button class="demo-margin-right">普通按钮</van-button>
-    <van-button size="small" class="demo-margin-right">小型按钮</van-button>
-    <van-button size="mini">迷你按钮</van-button>
+    <van-button type="primary" size="large" block custom-class="demo-margin-bottom">大号按钮</van-button>
+    <van-button type="primary" class="demo-margin-right">普通按钮</van-button>
+    <van-button type="primary" size="small" class="demo-margin-right">小型按钮</van-button>
+    <van-button type="primary" size="mini">迷你按钮</van-button>
+  </demo-block>
+
+  <demo-block title="自定义颜色" padding>
+    <van-button color="#7232dd" class="demo-margin-right">自定义颜色</van-button>
+    <van-button color="#7232dd" plain>自定义颜色</van-button>
   </demo-block>
 </demo-section>
diff --git a/packages/button/README.md b/packages/button/README.md
index a7dcff01..3e4d2916 100644
--- a/packages/button/README.md
+++ b/packages/button/README.md
@@ -77,13 +77,23 @@
 ```
 
 ### 按钮尺寸
+
 支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`
 
 ```html
-<van-button size="large">大号按钮</van-button>
-<van-button size="normal">普通按钮</van-button>
-<van-button size="small">小型按钮</van-button>
-<van-button size="mini">迷你按钮</van-button>
+<van-button type="primary" size="large">大号按钮</van-button>
+<van-button type="primary" size="normal">普通按钮</van-button>
+<van-button type="primary" size="small">小型按钮</van-button>
+<van-button type="primary" size="mini">迷你按钮</van-button>
+```
+
+### 自定义颜色
+
+通过`color`属性可以自定义按钮的颜色
+
+```html
+<van-button color="#7232dd">自定义颜色</van-button>
+<van-button color="#7232dd" plain>自定义颜色</van-button>
 ```
 
 ### Props
diff --git a/packages/button/index.ts b/packages/button/index.ts
index b528a683..1d3e82bd 100644
--- a/packages/button/index.ts
+++ b/packages/button/index.ts
@@ -9,6 +9,7 @@ VantComponent({
 
   props: {
     icon: String,
+    color: String,
     plain: Boolean,
     block: Boolean,
     round: Boolean,
diff --git a/packages/button/index.wxml b/packages/button/index.wxml
index 6b3cf016..dec0e7d5 100644
--- a/packages/button/index.wxml
+++ b/packages/button/index.wxml
@@ -5,6 +5,7 @@
   class="custom-class {{ utils.bem('button', [type, size, { block, round, plain, square, loading, disabled, hairline, unclickable: disabled || loading }]) }} {{ hairline ? 'van-hairline--surround' : '' }}"
   open-type="{{ openType }}"
   hover-class="van-button--active hover-class"
+  style="{{ color ? 'border-color: ' + color + ';' + (plain ? 'color: ' + color : 'color: #fff; background-color: ' + color) : '' }}"
   lang="{{ lang }}"
   business-id="{{ businessId }}"
   session-from="{{ sessionFrom }}"