From 7ad9223ace6db866f8f91253ab4c5bb136f71944 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Fri, 23 Nov 2018 20:59:57 +0800
Subject: [PATCH] [improvement] Radio: add checked-color prop (#939)

---
 example/pages/radio/index.wxml | 11 +++++++++++
 packages/radio/README.md       | 11 +++++++++++
 packages/radio/index.less      |  4 ++++
 packages/radio/index.ts        |  3 ++-
 packages/radio/index.wxml      |  7 ++++++-
 5 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/example/pages/radio/index.wxml b/example/pages/radio/index.wxml
index a0d508d2..c2fbf7f3 100644
--- a/example/pages/radio/index.wxml
+++ b/example/pages/radio/index.wxml
@@ -23,6 +23,17 @@
   </van-radio-group>
 </demo-block>
 
+<demo-block title="自定义颜色" padding>
+  <van-radio
+    name="1"
+    value="1"
+    custom-class="demo-radio"
+    checked-color="#4b0"
+  >
+    单选框
+  </van-radio>
+</demo-block>
+
 <demo-block title="与 Cell 组件一起使用">
   <van-radio-group value="{{ radio3 }}">
     <van-cell-group>
diff --git a/packages/radio/README.md b/packages/radio/README.md
index abf8419c..5d0102b0 100644
--- a/packages/radio/README.md
+++ b/packages/radio/README.md
@@ -1,6 +1,7 @@
 ## Radio 单选框
 
 ### 使用指南
+
 在 app.json 或 index.json 中引入组件
 ```json
 "usingComponents": {
@@ -12,6 +13,7 @@
 ### 代码演示
 
 #### 基础用法
+
 通过`value`绑定值当前选中项的 name
 
 ```html
@@ -22,6 +24,7 @@
 ```
 
 #### 禁用状态
+
 通过`disabled`属性禁止选项切换，在`van-radio`上设置`diabled`可以禁用单个选项
 
 ```html
@@ -31,7 +34,14 @@
 </van-radio-group>
 ```
 
+#### 自定义颜色
+
+ ```html
+<van-radio checked-color="#4b0">复选框</van-radio>
+```
+
 #### 与 Cell 组件一起使用
+
 此时你需要再引入`Cell`和`CellGroup`组件。
 
 ```html
@@ -56,6 +66,7 @@
 | disabled | 是否为禁用状态 | `Boolean` | `false` |
 | label-disabled | 是否禁用文本内容点击 | `Boolean` | `false` |
 | label-position | 文本位置，可选值为 `left` | `String` | `right` |
+| checked-color | 选中状态颜色 | `String` | `#1989fa` |
 
 ### Radio Event
 
diff --git a/packages/radio/index.less b/packages/radio/index.less
index 59c43e78..062b24b2 100644
--- a/packages/radio/index.less
+++ b/packages/radio/index.less
@@ -39,6 +39,10 @@
       margin: 0 10px 0 0;
       float: left;
     }
+
+    &:empty {
+      margin: 0;
+    }
   }
 
   &__icon {
diff --git a/packages/radio/index.ts b/packages/radio/index.ts
index 71e83349..e1f1e1e2 100644
--- a/packages/radio/index.ts
+++ b/packages/radio/index.ts
@@ -15,7 +15,8 @@ VantComponent({
     value: null,
     disabled: Boolean,
     labelDisabled: Boolean,
-    labelPosition: String
+    labelPosition: String,
+    checkedColor: String
   },
 
   computed: {
diff --git a/packages/radio/index.wxml b/packages/radio/index.wxml
index 011a7e0e..29d73956 100644
--- a/packages/radio/index.wxml
+++ b/packages/radio/index.wxml
@@ -8,7 +8,12 @@
         class="van-radio__control"
       />
     </radio-group>
-    <van-icon class="{{ iconClass }}" custom-class="icon-class" name="{{ value === name ? 'checked' : 'check' }}" />
+    <van-icon
+      class="{{ iconClass }}"
+      custom-class="icon-class"
+      color="{{ value === name ? checkedColor : '' }}"
+      name="{{ value === name ? 'checked' : 'check' }}"
+    />
   </view>
   <view class="van-radio__label van-radio__label--{{ labelPosition }} label-class" bindtap="onClickLabel">
     <slot />