blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-24 23:49:14 +08:00
Code Issues Projects Releases Wiki Activity

feat(SubmitBar): SubmitBar组件样式调整及新增文案对齐方向属性 (#5130)

Browse Source
This commit is contained in:
Lindy 2019-11-28 19:07:50 +08:00 committed by neverland
parent 00f6b5274f
commit a7ae694dbb
9 changed files with 61 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/style/var.less
View File

@ -596,7 +596,7 @@
@submit-bar-background-color: @white;
@submit-bar-button-width: 110px;
@submit-bar-price-color: @red;
@submit-bar-price-font-size: 18px;
@submit-bar-price-font-size: @font-size-md;
@submit-bar-currency-font-size: @font-size-md;
@submit-bar-text-color: @text-color;
@submit-bar-text-font-size: @font-size-md;
@ -606,6 +606,10 @@
@submit-bar-tip-color: #f56723;
@submit-bar-tip-background-color: #fff7cc;
@submit-bar-tip-icon-size: 12px;
@submit-bar-button-height: 40px;
@submit-bar-padding: 0 @padding-md;
@submit-bar-price-integer-font-size: 20px;
@submit-bar-price-font-family: Avenir-Heavy PingFang SC, Helvetica Neue, Arial, sans-serif;
// Swipe
@swipe-indicator-size: 6px;

1
src/submit-bar/README.md
View File

@ -75,6 +75,7 @@ Use slot to add custom contents.
| price | Price | *number* | - | - |
| label | Price left label | *string* | `Total：` | - |
| suffix-label | Price right label | *string* | - | - |
| text-align | Price label text align can be set to `right` `left` | *string* | `right` | - |
| button-text | Button text | *string* | - | - |
| button-type | Button type | *string* | `danger` | - |
| tip | Tip | *string* | - | - |

3
src/submit-bar/README.zh-CN.md
View File

@ -75,6 +75,7 @@ Vue.use(SubmitBar);
| price | 价格（单位分） | *number* | - | - |
| label | 价格左侧文案 | *string* | `合计：` | - |
| suffix-label | 价格右侧文案 | *string* | - | - |
| text-align | 价格文案对齐方向，可选值为 `right` `left` | *string* | `right` | - |
| button-text | 按钮文字 | *string* | - | - |
| button-type | 按钮类型 | *string* | `danger` | - |
| tip | 提示文案 | *string* | - | - |
@ -82,7 +83,7 @@ Vue.use(SubmitBar);
| disabled | 是否禁用按钮 | *boolean* | `false` | - |
| loading | 是否显示加载中的按钮 | *boolean* | `false` | - |
| currency | 货币符号 | *string* | `¥` | - |
| decimal-length | 价格小数点后位数 | *number* | `2` | - |
| decimal-length | 价格小数点后位数 | *number* | `2` | - |
| safe-area-inset-bottom | 是否开启底部安全区适配，[详细说明](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `false` | - |
### Events

2
src/submit-bar/demo/index.vue
View File

@ -102,7 +102,7 @@ export default {
}
.van-checkbox {
margin-left: @padding-sm;
margin-right: @padding-sm;
}
}
</style>

15
src/submit-bar/index.less
View File

@ -32,6 +32,7 @@
align-items: center;
justify-content: flex-end;
height: @submit-bar-height;
padding: @submit-bar-padding;
font-size: @submit-bar-text-font-size;
}
@ -53,15 +54,23 @@
&__price {
color: @submit-bar-price-color;
font-size: @submit-bar-price-font-size;
font-size: @font-size-sm;
&::first-letter {
font-size: @submit-bar-currency-font-size;
&--integer {
font-size: @submit-bar-price-integer-font-size;
font-family: @submit-bar-price-font-family;
}
}
&__button {
width: @submit-bar-button-width;
height: @submit-bar-button-height;
line-height: @submit-bar-button-height;
border: none;
&--danger {
background: @goods-action-button-danger-color;
}
}
&--safe-area-inset-bottom {

19
src/submit-bar/index.tsx
View File

@ -20,6 +20,7 @@ export type SubmitBarProps = {
suffixLabel?: string;
decimalLength: number;
safeAreaInsetBottom?: boolean;
textAlign?: 'right' | 'left';
};
export type SubmitBarSlots = DefaultSlots & {
@ -39,12 +40,14 @@ function SubmitBar(
function Text() {
if (typeof price === 'number') {
const priceText = `${props.currency} ${(price / 100).toFixed(props.decimalLength)}`;
const priceArr = (price / 100).toFixed(props.decimalLength).split('.');
return (
<div class={bem('text')}>
<div style={{ textAlign: props.textAlign ? props.textAlign : '' }} class={bem('text')}>
<span>{props.label || t('label')}</span>
<span class={bem('price')}>{priceText}</span>
<span class={bem('price')}>
{props.currency}
<span class={bem('price', 'integer')}>{priceArr[0]}</span>.{priceArr[1]}
</span>
{props.suffixLabel && (
<span class={bem('suffix-label')}>{props.suffixLabel}</span>
)}
@ -76,9 +79,8 @@ function SubmitBar(
{slots.default && slots.default()}
{Text()}
<Button
square
size="large"
class={bem('button')}
round
class={bem('button', props.buttonType)}
type={props.buttonType}
loading={props.loading}
disabled={props.disabled}
@ -113,7 +115,8 @@ SubmitBar.props = {
buttonType: {
type: String,
default: 'danger'
}
},
textAlign: String,
};
export default createComponent<SubmitBarProps, {}, SubmitBarSlots>(SubmitBar);

8
src/submit-bar/test/__snapshots__/demo.spec.js.snap
View File

@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
<div>
<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">¥ 30.50</span></div><button class="van-button van-button--danger van-button--large van-button--square van-submit-bar__button"><span class="van-button__text">提交订单</span></button>
<div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price van-submit-bar__price--integer">30</span>.50</span></div><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger"><span class="van-button__text">提交订单</span></button>
</div>
</div>
</div>
@ -14,14 +14,14 @@ exports[`renders demo correctly 1`] = `
<div class="van-submit-bar__tip"><i class="van-icon van-icon-info-o van-submit-bar__tip-icon">
<!----></i><span class="van-submit-bar__tip-text">你的收货地址不支持同城送, 我们已为你推荐快递</span></div>
<div class="van-submit-bar__bar">
<div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥ 30.50</span></div><button disabled="disabled" class="van-button van-button--danger van-button--large van-button--disabled van-button--square van-submit-bar__button"><span class="van-button__text">提交订单</span></button>
<div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price van-submit-bar__price--integer">30</span>.50</span></div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--disabled van-button--round van-submit-bar__button van-submit-bar__button--danger"><span class="van-button__text">提交订单</span></button>
</div>
</div>
</div>
<div>
<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">¥ 30.50</span></div><button class="van-button van-button--danger van-button--large van-button--square van-submit-bar__button">
<div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price van-submit-bar__price--integer">30</span>.50</span></div><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-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
</button>
</div>
@ -39,7 +39,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label">全选</span>
</div>
<div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥ 30.50</span></div><button class="van-button van-button--danger van-button--large van-button--square van-submit-bar__button"><span class="van-button__text">提交订单</span></button>
<div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price van-submit-bar__price--integer">30</span>.50</span></div><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger"><span class="van-button__text">提交订单</span></button>
</div>
</div>
</div>

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

@ -3,7 +3,7 @@
exports[`decimal-length prop 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 van-submit-bar__button"></button>
<div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price van-submit-bar__price--integer">1</span>.1</span></div><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger"></button>
</div>
</div>
`;
@ -11,7 +11,7 @@ exports[`decimal-length prop 1`] = `
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.01</span></div><button disabled="disabled" class="van-button van-button--danger van-button--large van-button--disabled van-button--square van-submit-bar__button"></button>
<div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price van-submit-bar__price--integer">0</span>.01</span></div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--disabled van-button--round van-submit-bar__button van-submit-bar__button--danger"></button>
</div>
</div>
`;
@ -19,18 +19,26 @@ exports[`disable submit 1`] = `
exports[`suffix-label prop 1`] = `
<div class="van-submit-bar">
<div class="van-submit-bar__bar">
<div class="van-submit-bar__text"><span>Label</span><span class="van-submit-bar__price">¥ 1.11</span><span class="van-submit-bar__suffix-label">Suffix Label</span></div><button class="van-button van-button--danger van-button--large van-button--square van-submit-bar__button"></button>
<div class="van-submit-bar__text"><span>Label</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price van-submit-bar__price--integer">1</span>.11</span><span class="van-submit-bar__suffix-label">Suffix Label</span></div><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger"></button>
</div>
</div>
`;
exports[`text-align prop 1`] = `
<div class="van-submit-bar">
<div class="van-submit-bar__bar">
<div class="van-submit-bar__text" style="text-align: left;"><span>合计：</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price van-submit-bar__price--integer">1</span>.11</span></div><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger"></button>
</div>
</div>
`;
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--large van-button--square van-submit-bar__button"></button></div>
<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"></button></div>
</div>
`;
exports[`without price 1`] = `
<div class="van-submit-bar">
<div class="van-submit-bar__bar"><button class="van-button van-button--danger van-button--large van-button--square van-submit-bar__button"></button></div>
<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"></button></div>
</div>
`;

12
src/submit-bar/test/index.spec.js
View File

@ -85,3 +85,15 @@ test('suffix-label prop', () => {
expect(wrapper).toMatchSnapshot();
});
test('text-align prop', () => {
const wrapper = mount(SubmitBar, {
context: {
props: {
price: 111,
textAlign: 'left'
}
}
});
expect(wrapper).toMatchSnapshot();
});