[new feature] ActionSheet: add color option (#4073)

src/action-sheet/README.md

@@ -58,7 +58,7 @@ export default {
     return {
       show: false,
       actions: [
-        { name: 'Option' },
+        { name: 'Option', color: '#07c160' },
         { loading: true },
         { name: 'Disabled Option', disabled: true }
       ]
@@ -124,6 +124,7 @@ export default {
 |------|------|------|
 | name | Title | `string` |
 | subname | Subtitle | `string` |
+| color | Text color | `string` |
 | className | className for the option | `any` |
 | loading | Whether to be loading status | `boolean` |
 | disabled | Whether to be disabled | `boolean` |

src/action-sheet/README.zh-CN.md

@@ -61,8 +61,8 @@ export default {
     return {
       show: false,
       actions: [
-        { name: '选项' },
+        { name: '选项', color: '#07c160' },
-        { name: '选项', loading: true },
+        { loading: true },
         { name: '禁用选项', disabled: true }
       ]
     };
@@ -133,6 +133,7 @@ export default {
 |------|------|------|
 | name | 标题 | `string` |
 | subname | 二级标题 | `string` |
+| color | 选项文字颜色 | `string` |
 | className | 为对应列添加额外的 class | `any` |
 | loading | 是否为加载状态 | `boolean` |
 | disabled | 是否为禁用状态 | `boolean` |

src/action-sheet/demo/index.vue

@@ -66,6 +66,8 @@
 </template>
 
 <script>
+import { GREEN } from '../../utils/color';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -106,7 +108,7 @@ export default {
 
     statusActions() {
       return [
-        { name: this.$t('option') },
+        { name: this.$t('option'), color: GREEN },
         { loading: true },
         { name: this.$t('disabledOption'), disabled: true }
       ];

src/action-sheet/index.tsx

@@ -12,6 +12,7 @@ import { PopupMixinProps } from '../mixins/popup/type';
 
 export type ActionSheetItem = {
   name: string;
+  color?: string;
   subname?: string;
   loading?: boolean;
   disabled?: boolean;
@@ -96,6 +97,7 @@ function ActionSheet(
     return (
       <div
         class={[bem('item', { disabled }), item.className, 'van-hairline--top']}
+        style={{ color: item.color }}
         onClick={onClickOption}
       >
         {OptionContent()}

src/action-sheet/test/__snapshots__/index.spec.js.snap

@@ -12,6 +12,12 @@ exports[`callback events 1`] = `
 </div>
 `;
 
+exports[`color option 1`] = `
+<div class="van-popup van-popup--bottom van-action-sheet" name="van-popup-slide-bottom">
+  <div class="van-action-sheet__item van-hairline--top" style="color: red;"><span class="van-action-sheet__name">Option</span></div>
+</div>
+`;
+
 exports[`disable lazy-render 1`] = `
 <div class="van-popup van-popup--bottom van-action-sheet" style="display: none;" name="van-popup-slide-bottom">
   <div class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></div>

src/action-sheet/test/index.spec.js

@@ -151,3 +151,14 @@ test('round prop', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('color option', () => {
+  const wrapper = mount(ActionSheet, {
+    propsData: {
+      value: true,
+      actions: [{ name: 'Option', color: 'red' }]
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});

src/radio/README.zh-CN.md

@@ -114,7 +114,7 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
-| name | 标识符 | 任意类型 | - | - |
+| name | 标识符 | `any` | - | - |
 | shape | 形状，可选值为 `square` | `string` | `round` | 1.6.0 |
 | disabled | 是否为禁用状态 | `boolean` | `false` | - |
 | icon-size | 图标大小，默认单位为`px` | `string | number` | `20px` | 2.0.0 |
@@ -126,7 +126,7 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
-| v-model | 当前选中项的标识符 | 任意类型 | - | - |
+| v-model | 当前选中项的标识符 | `any` | - | - |
 | disabled | 是否禁用所有单选框 | `boolean` | `false` | - |
 
 ### Radio Events