blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[Improvement] SubmitBar: upgrade style (#1631)

Browse Source
This commit is contained in:
neverland 2018-08-14 20:00:05 +08:00 committed by GitHub
parent 225bdaef01
commit b24e21b9cb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 21 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/submit-bar/en-US.md
View File

@ -84,4 +84,5 @@ Use slot to add custom contents.
| Name | Description |
|-----------|-----------|
| default | Custom left content |
| top | Custom top content |
| tip | Custom tips |

19
packages/submit-bar/index.vue
View File

@ -1,15 +1,15 @@
<template>
<div :class="b()">
<slot name="top" />
<div :class="b('tip')" v-if="tip || $slots.tip">
{{ tip }}<slot name="tip" />
</div>
<div :class="b('bar')">
<slot />
<div :class="b('price')">
<div :class="b('text')">
<template v-if="hasPrice">
<span>{{ label || $t('label') }}</span>
<span :class="b('price-integer')">{{ currency }}{{ priceInterger }}.</span>
<span :class="b('price-decimal')">{{ priceDecimal }}</span>
<span :class="b('price')">{{ currency }} {{ price | format }}</span>
</template>
</div>
<van-button :type="buttonType" :disabled="disabled" :loading="loading" @click="$emit('submit')">
@ -51,13 +51,12 @@ export default create({
computed: {
hasPrice() {
return typeof this.price === 'number';
},
priceInterger() {
return Math.floor(this.price / 100);
},
priceDecimal() {
const decimal = Math.floor(this.price % 100);
return (decimal < 10 ? '0' : '') + decimal;
}
},
filters: {
format(price) {
return (price / 100).toFixed(2);
}
}
});

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

@ -6,7 +6,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-submit-bar">
<!---->
<div class="van-submit-bar__bar">
<div class="van-submit-bar__price"><span>合计：</span> <span class="van-submit-bar__price-integer">¥30.</span> <span class="van-submit-bar__price-decimal">50</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--normal">
<!----><span class="van-button__text">
提交订单
@ -19,7 +19,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-submit-bar__tip">
您的收货地址不支持同城送, 我们已为您推荐快递</div>
<div class="van-submit-bar__bar">
<div class="van-submit-bar__price"><span>合计：</span> <span class="van-submit-bar__price-integer">¥30.</span> <span class="van-submit-bar__price-decimal">50</span></div>
<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--normal van-button--disabled van-button--unclickable">
<!----><span class="van-button__text">
提交订单
@ -31,7 +31,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-submit-bar">
<!---->
<div class="van-submit-bar__bar">
<div class="van-submit-bar__price"><span>合计：</span> <span class="van-submit-bar__price-integer">¥30.</span> <span class="van-submit-bar__price-decimal">50</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--normal van-button--loading van-button--unclickable">
<div class="van-loading van-loading--circular van-loading--white" style="width:20px;height:20px;"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div> <span class="van-button__text">
@ -52,7 +52,7 @@ exports[`renders demo correctly 1`] = `
<!---->
</i>
</div> <span class="van-checkbox__label">全选</span></div>
<div class="van-submit-bar__price"><span>合计：</span> <span class="van-submit-bar__price-integer">¥30.</span> <span class="van-submit-bar__price-decimal">50</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--normal">
<!----><span class="van-button__text">
提交订单

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

@ -4,7 +4,7 @@ exports[`submit 1`] = `
<div class="van-submit-bar">
<!---->
<div class="van-submit-bar__bar">
<div class="van-submit-bar__price"><span>合计：</span> <span class="van-submit-bar__price-integer">¥0.</span> <span class="van-submit-bar__price-decimal">00</span></div>
<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--normal van-button--disabled van-button--unclickable">
<!----><span class="van-button__text">

1
packages/submit-bar/zh-CN.md
View File

@ -84,4 +84,5 @@ Vue.use(SubmitBar);
| 名称 | 说明 |
|-----------|-----------|
| default | 自定义订单栏左侧内容 |
| top | 自定义订单栏上方内容 |
| tip | 提示文案中的额外操作和说明 |

14
packages/vant-css/src/submit-bar.css
View File

@ -19,15 +19,16 @@
&__bar {
height: 50px;
display: flex;
font-size: 16px;
font-size: 14px;
align-items: center;
background-color: $white;
}
&__price {
&__text {
flex: 1;
font-weight: bold;
text-align: right;
color: $gray-darker;
color: $text-color;
padding-right: 12px;
span {
@ -35,15 +36,10 @@
}
}
&__price-integer {
&__price {
color: $red;
}
&__price-decimal {
color: $red;
font-size: 12px;
}
.van-button {
width: 110px;
height: 100%;