mirror of
https://github.com/youzan/vant.git
synced 2025-10-20 02:31:21 +00:00
[Improvement] SubmitBar: upgrade style (#1631)
This commit is contained in:
@@ -84,4 +84,5 @@ Use slot to add custom contents.
|
||||
| Name | Description |
|
||||
|-----------|-----------|
|
||||
| default | Custom left content |
|
||||
| top | Custom top content |
|
||||
| tip | Custom tips |
|
||||
|
@@ -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);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
@@ -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">
|
||||
提交订单
|
||||
|
@@ -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">
|
||||
|
||||
|
@@ -84,4 +84,5 @@ Vue.use(SubmitBar);
|
||||
| 名称 | 说明 |
|
||||
|-----------|-----------|
|
||||
| default | 自定义订单栏左侧内容 |
|
||||
| top | 自定义订单栏上方内容 |
|
||||
| tip | 提示文案中的额外操作和说明 |
|
||||
|
Reference in New Issue
Block a user