feat(SubmitBar): add button-color prop (#6757)

src/submit-bar/README.md

@@ -65,6 +65,7 @@ Use slot to add custom contents.
 | text-align `v2.3.0` | Price label text align can be set to `left` | _string_ | `right` |
 | button-text | Button text | _string_ | - |
 | button-type | Button type | _string_ | `danger` |
+| button-color `v2.9.1` | Button color | _string_ | - |
 | tip | Tip | _string_ | - |
 | tip-icon | Icon | _string_ | - |
 | currency | Currency symbol | _string_ | `¥` |

src/submit-bar/README.zh-CN.md

@@ -70,6 +70,7 @@ Vue.use(SubmitBar);
 | text-align `v2.3.0` | 价格文案对齐方向，可选值为 `left` | _string_ | `right` |
 | button-text | 按钮文字 | _string_ | - |
 | button-type | 按钮类型 | _string_ | `danger` |
+| button-color `v2.9.1` | 自定义按钮颜色 | _string_ | - |
 | tip | 提示文案 | _string_ | - |
 | tip-icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
 | currency | 货币符号 | _string_ | `¥` |

src/submit-bar/index.tsx

@@ -20,6 +20,7 @@ export type SubmitBarProps = {
   disabled?: boolean;
   buttonType: ButtonType;
   buttonText?: string;
+  buttonColor?: string;
   suffixLabel?: string;
   decimalLength: number;
   safeAreaInsetBottom?: boolean;
@@ -87,6 +88,7 @@ function SubmitBar(
           round
           class={bem('button', props.buttonType)}
           type={props.buttonType}
+          color={props.buttonColor}
           loading={props.loading}
           disabled={props.disabled}
           text={props.loading ? '' : props.buttonText}
@@ -108,6 +110,7 @@ SubmitBar.props = {
   disabled: Boolean,
   textAlign: String,
   buttonText: String,
+  buttonColor: String,
   suffixLabel: String,
   safeAreaInsetBottom: {
     type: Boolean,

src/submit-bar/test/__snapshots__/index.spec.js.snap

@@ -1,5 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`button-color prop 1`] = `
+<div class="van-submit-bar">
+  <div class="van-submit-bar__bar"><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger" style="color: rgb(255, 255, 255); background: red; border-color: red;">
+      <div class="van-button__content"></div>
+    </button></div>
+</div>
+`;
+
 exports[`decimal-length prop 1`] = `
 <div class="van-submit-bar">
   <div class="van-submit-bar__bar">

src/submit-bar/test/index.spec.js

@@ -108,3 +108,14 @@ test('disable safe-area-inset-bottom prop', () => {
   });
   expect(wrapper).toMatchSnapshot();
 });
+
+test('button-color prop', () => {
+  const wrapper = mount(SubmitBar, {
+    context: {
+      props: {
+        buttonColor: 'red',
+      },
+    },
+  });
+  expect(wrapper).toMatchSnapshot();
+});