[new feature] SubmitBar: add decimal-length prop (#3151)

packages/button/index.tsx

@@ -7,10 +7,14 @@ import Loading from '../loading';
 import { CreateElement, RenderContext } from 'vue/types';
 import { DefaultSlots } from '../utils/use/sfc';
 
+export type ButtonType = 'default' | 'primary' | 'info' | 'warning' | 'danger';
+
+export type ButtonSize = 'large' | 'normal' | 'small' | 'mini';
+
 export type ButtonProps = RouteProps & {
   tag: keyof HTMLElementTagNameMap | string;
-  type: 'default' | 'primary' | 'info' | 'warning' | 'danger';
-  size: 'large' | 'normal' | 'small' | 'mini';
+  type: ButtonType;
+  size: ButtonSize;
   text?: string;
   block?: boolean;
   plain?: boolean;

packages/submit-bar/en-US.md

@@ -72,6 +72,7 @@ Use slot to add custom contents.
 | disabled | Whether to disable button |  `Boolean` | `false` |
 | loading | Whether to show loading icon |  `Boolean` | `false` |
 | currency | Currency symbol |  `String` | `¥` |
+| decimal-length | Number of digits to appear after the decimal point | `Number` | `2` |
 
 ### Event
 

packages/submit-bar/index.tsx

@@ -1,6 +1,6 @@
 import { use } from '../utils';
 import { emit, inherit } from '../utils/functional';
-import Button from '../button';
+import Button, { ButtonType } from '../button';
 
 // Types
 import { CreateElement, RenderContext } from 'vue/types';
@@ -13,8 +13,9 @@ export type SubmitBarProps = {
   loading?: boolean;
   currency: string;
   disabled?: boolean;
-  buttonType: string;
+  buttonType: ButtonType;
   buttonText?: string;
+  decimalLength: number;
 };
 
 export type SubmitBarSlots = DefaultSlots & {
@@ -49,7 +50,7 @@ function SubmitBar(
             <span>{props.label || t('label')}</span>,
             <span class={bem('price')}>{`${props.currency} ${(
               (price as number) / 100
-            ).toFixed(2)}`}</span>
+            ).toFixed(props.decimalLength)}`}</span>
           ]}
         </div>
         <Button
@@ -78,6 +79,10 @@ SubmitBar.props = {
     type: Number,
     default: null
   },
+  decimalLength: {
+    type: Number,
+    default: 2
+  },
   currency: {
     type: String,
     default: '¥'

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

@@ -1,9 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`decimal length 1`] = `
+<div class="van-submit-bar">
+  <div class="van-submit-bar__bar">
+    <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥ 1.1</span></div><button class="van-button van-button--danger van-button--large van-button--square"><span class="van-button__text"></span></button>
+  </div>
+</div>
+`;
+
 exports[`disable submit 1`] = `
 <div class="van-submit-bar">
   <div class="van-submit-bar__bar">
-    <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥ 0.00</span></div><button disabled="disabled" class="van-button van-button--danger van-button--large van-button--disabled van-button--square"><span class="van-button__text"></span></button>
+    <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥ 0.01</span></div><button disabled="disabled" class="van-button van-button--danger van-button--large van-button--disabled van-button--square"><span class="van-button__text"></span></button>
   </div>
 </div>
 `;

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

@@ -6,7 +6,7 @@ test('submit', () => {
   const wrapper = mount(SubmitBar, {
     context: {
       props: {
-        price: 0.01
+        price: 1
       },
       on: { submit }
     }
@@ -22,7 +22,7 @@ test('disable submit', () => {
   const wrapper = mount(SubmitBar, {
     context: {
       props: {
-        price: 0.01,
+        price: 1,
         disabled: true
       },
       on: { submit }
@@ -36,3 +36,16 @@ test('disable submit', () => {
   button.trigger('click');
   expect(submit).toHaveBeenCalledTimes(0);
 });
+
+test('decimal length', () => {
+  const wrapper = mount(SubmitBar, {
+    context: {
+      props: {
+        price: 111,
+        decimalLength: 1
+      }
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});

packages/submit-bar/zh-CN.md

@@ -75,6 +75,7 @@ Vue.use(SubmitBar);
 | disabled | 是否禁用按钮 | `Boolean` | `false` | - |
 | loading | 是否显示加载中的按钮 |  `Boolean` | `false` | - |
 | currency | 货币符号 | `String` | `¥` | 1.0.6 |
+| decimal-length | 价格小数点后位数 | `Number` | `2` | 1.6.15 | 
 
 ### Event