[improvement] Radio: add checked-color prop (#2129)

packages/checkbox/zh-CN.md

@@ -10,6 +10,7 @@ Vue.use(Checkbox).use(CheckboxGroup);
 ### 代码演示
 
 #### 基础用法
+
 通过`v-model`绑定 checkbox 的勾选状态
 
 ```html

packages/radio/demo/index.vue

@@ -21,7 +21,18 @@
       </van-radio-group>
     </demo-block>
 
-    <demo-block :title="$t('title3')">
+    <demo-block :title="$t('customColor')">
+      <van-radio
+        name="1"
+        value="1"
+        checked-color="#4b0"
+        class="demo-radio-group"
+      >
+        {{ $t('radio') }}
+      </van-radio>
+    </demo-block>
+
+    <demo-block :title="$t('withCell')">
       <van-radio-group v-model="radio3">
         <van-cell-group>
           <van-cell
@@ -51,13 +62,15 @@ export default {
       radio: '单选框',
       text1: '未选中禁用',
       text2: '选中且禁用',
-      title3: '与 Cell 组件一起使用'
+      customColor: '自定义颜色',
+      withCell: '与 Cell 组件一起使用'
     },
     'en-US': {
       radio: 'Radio',
       text1: 'Disabled',
       text2: 'Disabled and checked',
-      title: 'Inside a Cell'
+      customColor: 'Custom Color',
+      withCell: 'Inside a Cell'
     }
   },
 

packages/radio/en-US.md

@@ -11,6 +11,7 @@ Vue.use(Radio);
 ### Usage
 
 #### Basic Usage
+
 Use `v-model` to bind the name of checked radio
 
 ```html
@@ -39,6 +40,12 @@ export default {
 </van-radio-group>
 ```
 
+#### Custom Color
+
+```html
+<van-radio checked-color="#4b0">Radio</van-radio>
+```
+
 #### Inside a Cell
 
 ```html
@@ -62,6 +69,7 @@ export default {
 | disabled | Whether to disable radio | `Boolean` | `false` |
 | label-disabled | Whether to disable label click | `Boolean` | `false` |
 | label-position | Can be set to `left` | `String` | `right` |
+| checked-color | Checked color | `String` | `#1989fa` | - |
 
 ### RadioGroup API
 

packages/radio/index.vue

@@ -5,13 +5,16 @@
   >
     <span :class="b('input')">
       <input
-        :value="name"
         v-model="currentValue"
         type="radio"
+        :value="name"
         :class="b('control')"
         :disabled="isDisabled"
       >
-      <icon :name="currentValue === name ? 'checked' : 'check'" />
+      <icon
+        :style="iconStyle"
+        :name="checked ? 'checked' : 'check'"
+      />
     </span>
     <span
       v-if="$slots.default"
@@ -36,6 +39,7 @@ export default create({
     name: null,
     value: null,
     disabled: Boolean,
+    checkedColor: String,
     labelDisabled: Boolean,
     labelPosition: Boolean
   },
@@ -51,10 +55,23 @@ export default create({
       }
     },
 
+    checked() {
+      return this.currentValue === this.name;
+    },
+
     isDisabled() {
       return this.parent
         ? this.parent.disabled || this.disabled
         : this.disabled;
+    },
+
+    iconStyle() {
+      const { checkedColor } = this;
+      if (checkedColor && this.checked && !this.isDisabled) {
+        return {
+          color: checkedColor
+        };
+      }
     }
   },
 

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

@@ -14,6 +14,11 @@ exports[`renders demo correctly 1`] = `
       <div class="van-radio van-radio--disabled"><span class="van-radio__input"><input type="radio" disabled="disabled" value="2" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"> <!----></i></span> <span class="van-radio__label">单选框 2</span></div>
     </div>
   </div>
+  <div>
+    <div class="demo-radio-group van-radio"><span class="van-radio__input"><input type="radio" value="1" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:#4b0;font-size:undefined;"> <!----></i></span> <span class="van-radio__label">
+      单选框
+    </span></div>
+  </div>
   <div>
     <div class="van-radio-group">
       <div class="van-cell-group van-hairline--top-bottom">

packages/radio/zh-CN.md

@@ -11,6 +11,7 @@ Vue.use(Radio);
 ### 代码演示
 
 #### 基础用法
+
 通过`v-model`绑定值当前选中项的 name
 
 ```html
@@ -31,6 +32,7 @@ export default {
 ```
 
 #### 禁用状态
+
 通过`disabled`属性禁止选项切换，在`van-radio`上设置`disabled`可以禁用单个选项
 
 ```html
@@ -40,7 +42,14 @@ export default {
 </van-radio-group>
 ```
 
+#### 自定义颜色
+
+```html
+<van-radio checked-color="#4b0">复选框</van-radio>
+```
+
 #### 与 Cell 组件一起使用
+
 此时你需要再引入`Cell`和`CellGroup`组件。
 
 ```html
@@ -64,6 +73,7 @@ export default {
 | disabled | 是否为禁用状态 | `Boolean` | `false` | - |
 | label-disabled | 是否禁用文本内容点击 | `Boolean` | `false` | 1.1.13 |
 | label-position | 文本位置，可选值为 `left` | `String` | `right` | 1.1.13 |
+| checked-color | 选中状态颜色 | `String` | `#1989fa` | 1.4.5 |
 
 ### RadioGroup API
 

packages/tab/zh-CN.md

@@ -128,7 +128,7 @@ export default {
 
 #### 切换动画
 
-通过`animated`属性可以开启切换tab时的动画
+通过`animated`属性可以开启切换标签内容时的转场动画
 
 ```html
 <van-tabs v-model="active" animated>
@@ -140,7 +140,7 @@ export default {
 
 #### 滑动切换
 
-通过`swipeable`属性可以开启滑动切换tab
+通过`swipeable`属性可以开启滑动切换标签页
 
 ```html
 <van-tabs v-model="active" swipeable>
@@ -163,7 +163,7 @@ export default {
 | sticky | 是否使用粘性定位布局 | `Boolean` | `false` | - |
 | offset-top | 粘性定位布局下与顶部的最小距离，单位 px | `Number` | `0` | 1.1.15 |
 | swipe-threshold | 滚动阈值，标签数量超过多少个可滚动 | `Number` | `4` | - |
-| animated | 是否使用动画切换 Tabs | `false` | - | 1.4.5 |
+| animated | 是否开启切换标签内容时的转场动画 | `false` | - | 1.4.5 |
 
 ### Tab API