feat(SubmitBar): add button slot (#7458)

src/submit-bar/README.md

@@ -60,6 +60,7 @@ Use slot to add custom contents.
 | Attribute | Description | Type | Default |
 | --- | --- | --- | --- |
 | price | Price | _number_ | - |
+| decimal-length | Price dicemal length | _number \| string_ | `2` |
 | label | Price left label | _string_ | `Total：` |
 | suffix-label | Price right label | _string_ | - |
 | text-align `v2.3.0` | Price label text align can be set to `left` | _string_ | `right` |
@@ -69,7 +70,6 @@ Use slot to add custom contents.
 | tip | Tip | _string_ | - |
 | tip-icon | Icon | _string_ | - |
 | currency | Currency symbol | _string_ | `¥` |
-| decimal-length | number of digits to appear after the decimal point | _number \| string_ | `2` |
 | disabled | Whether to disable button | _boolean_ | `false` |
 | loading | Whether to show loading icon | _boolean_ | `false` |
 | safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |
@@ -82,8 +82,9 @@ Use slot to add custom contents.
 
 ### Slots
 
-| Name    | Description         |
+| Name              | Description         |
-| ------- | ------------------- |
+| ----------------- | ------------------- |
-| default | Custom left content |
+| default           | Custom left content |
-| top     | Custom top content  |
+| button `v2.10.12` | Custom button       |
-| tip     | Custom tips         |
+| top               | Custom top content  |
+| tip               | Custom tips         |

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

@@ -65,18 +65,18 @@ Vue.use(SubmitBar);
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | price | 价格（单位分） | _number_ | - |
+| decimal-length | 价格小数点位数 | _number \| string_ | `2` |
 | label | 价格左侧文案 | _string_ | `合计：` |
 | suffix-label | 价格右侧文案 | _string_ | - |
 | text-align `v2.3.0` | 价格文案对齐方向，可选值为 `left` | _string_ | `right` |
 | button-text | 按钮文字 | _string_ | - |
 | button-type | 按钮类型 | _string_ | `danger` |
 | button-color `v2.9.1` | 自定义按钮颜色 | _string_ | - |
-| tip | 提示文案 | _string_ | - |
+| tip | 在订单栏上方的提示文案 | _string_ | - |
-| tip-icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
+| tip-icon | 提示文案左侧的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
 | currency | 货币符号 | _string_ | `¥` |
-| decimal-length | 价格小数点后位数 | _number \| string_ | `2` |
 | disabled | 是否禁用按钮 | _boolean_ | `false` |
-| loading | 是否显示加载中的按钮 | _boolean_ | `false` |
+| loading | 是否显示将按钮显示为加载中状态 | _boolean_ | `false` |
 | safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` |
 
 ### Events
@@ -87,8 +87,9 @@ Vue.use(SubmitBar);
 
 ### Slots
 
-| 名称    | 说明                       |
+| 名称              | 说明                 |
-| ------- | -------------------------- |
+| ----------------- | -------------------- |
-| default | 自定义订单栏左侧内容       |
+| default           | 自定义订单栏左侧内容 |
-| top     | 自定义订单栏上方内容       |
+| button `v2.10.12` | 自定义按钮           |
-| tip     | 提示文案中的额外操作和说明 |
+| top               | 自定义订单栏上方内容 |
+| tip               | 提示文案中的额外内容 |

src/submit-bar/index.tsx

@@ -30,6 +30,7 @@ export type SubmitBarProps = {
 export type SubmitBarSlots = DefaultSlots & {
   top?: ScopedSlot;
   tip?: ScopedSlot;
+  button?: ScopedSlot;
 };
 
 const [createComponent, bem, t] = createNamespace('submit-bar');
@@ -84,18 +85,22 @@ function SubmitBar(
       <div class={bem('bar')}>
         {slots.default && slots.default()}
         {Text()}
-        <Button
+        {slots.button ? (
-          round
+          slots.button()
-          class={bem('button', props.buttonType)}
+        ) : (
-          type={props.buttonType}
+          <Button
-          color={props.buttonColor}
+            round
-          loading={props.loading}
+            type={props.buttonType}
-          disabled={props.disabled}
+            text={props.loading ? '' : props.buttonText}
-          text={props.loading ? '' : props.buttonText}
+            color={props.buttonColor}
-          onClick={() => {
+            class={bem('button', props.buttonType)}
-            emit(ctx, 'submit');
+            loading={props.loading}
-          }}
+            disabled={props.disabled}
-        />
+            onClick={() => {
+              emit(ctx, 'submit');
+            }}
+          />
+        )}
       </div>
     </div>
   );

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

@@ -1,5 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`button slot 1`] = `
+<div class="van-submit-bar">
+  <div class="van-submit-bar__bar">Custom button</div>
+</div>
+`;
+
 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;">
@@ -57,7 +63,7 @@ exports[`text-align prop 1`] = `
 `;
 
 exports[`top slot 1`] = `
-<div class="van-submit-bar">top<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">
+<div class="van-submit-bar">Custom Top<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">
       <div class="van-button__content"></div>
     </button></div>
 </div>

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

@@ -52,7 +52,7 @@ test('without price', () => {
 test('top slot', () => {
   const wrapper = mount(SubmitBar, {
     scopedSlots: {
-      top: () => 'top',
+      top: () => 'Custom Top',
     },
   });
 
@@ -119,3 +119,14 @@ test('button-color prop', () => {
   });
   expect(wrapper).toMatchSnapshot();
 });
+
+test('button slot', () => {
+  const wrapper = mount(SubmitBar, {
+    buttonText: 'text',
+    scopedSlots: {
+      button: () => 'Custom button',
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});