mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[improvement] SubmitBar: jsx (#2625)
This commit is contained in:
neverland
GitHub
parent
8c8973be06
commit
4e6d0b9c79
63
packages/submit-bar/index.js
Normal file
63
packages/submit-bar/index.js
Normal file
@ -0,0 +1,63 @@
|
||||
import { use } from '../utils';
|
||||
import Button from '../button';
|
||||
|
||||
const [sfc, bem, t] = use('submit-bar');
|
||||
|
||||
export default sfc({
|
||||
props: {
|
||||
tip: String,
|
||||
label: String,
|
||||
loading: Boolean,
|
||||
disabled: Boolean,
|
||||
buttonText: String,
|
||||
price: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
currency: {
|
||||
type: String,
|
||||
default: '¥'
|
||||
},
|
||||
buttonType: {
|
||||
type: String,
|
||||
default: 'danger'
|
||||
}
|
||||
},
|
||||
|
||||
render(h) {
|
||||
const { tip, price, $slots } = this;
|
||||
const hasPrice = typeof price === 'number';
|
||||
|
||||
return (
|
||||
<div class={bem()}>
|
||||
{$slots.top}
|
||||
{($slots.tip || tip) && (
|
||||
<div class={bem('tip')}>
|
||||
{tip}
|
||||
{$slots.tip}
|
||||
</div>
|
||||
)}
|
||||
<div class={bem('bar')}>
|
||||
{$slots.default}
|
||||
<div class={bem('text')}>
|
||||
{hasPrice && [
|
||||
<span>{this.label || t('label')}</span>,
|
||||
<span class={bem('price')}>{`${this.currency} ${(price / 100).toFixed(2)}`}</span>
|
||||
]}
|
||||
</div>
|
||||
<Button
|
||||
square
|
||||
size="large"
|
||||
type={this.buttonType}
|
||||
loading={this.loading}
|
||||
disabled={this.disabled}
|
||||
text={this.loading ? '' : this.buttonText}
|
||||
onClick={() => {
|
||||
this.$emit('submit');
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -1,74 +0,0 @@
|
||||
<template>
|
||||
<div :class="b()">
|
||||
<slot name="top" />
|
||||
<div
|
||||
v-if="tip || $slots.tip"
|
||||
:class="b('tip')"
|
||||
>
|
||||
{{ tip }}<slot name="tip" />
|
||||
</div>
|
||||
<div :class="b('bar')">
|
||||
<slot />
|
||||
<div :class="b('text')">
|
||||
<template v-if="hasPrice">
|
||||
<span v-text="label || $t('label')" />
|
||||
<span :class="b('price')">{{ currency }} {{ price | format }}</span>
|
||||
</template>
|
||||
</div>
|
||||
<van-button
|
||||
square
|
||||
size="large"
|
||||
:type="buttonType"
|
||||
:disabled="disabled"
|
||||
:loading="loading"
|
||||
:text="loading ? '' : buttonText"
|
||||
@click="$emit('submit')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VanButton from '../button';
|
||||
import create from '../utils/create';
|
||||
|
||||
export default create({
|
||||
name: 'submit-bar',
|
||||
|
||||
components: {
|
||||
VanButton
|
||||
},
|
||||
|
||||
props: {
|
||||
tip: String,
|
||||
label: String,
|
||||
loading: Boolean,
|
||||
disabled: Boolean,
|
||||
buttonText: String,
|
||||
price: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
currency: {
|
||||
type: String,
|
||||
default: '¥'
|
||||
},
|
||||
buttonType: {
|
||||
type: String,
|
||||
default: 'danger'
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
hasPrice() {
|
||||
return typeof this.price === 'number';
|
||||
}
|
||||
},
|
||||
|
||||
filters: {
|
||||
format(price) {
|
||||
return (price / 100).toFixed(2);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@ -4,26 +4,23 @@ exports[`renders demo correctly 1`] = `
|
||||
<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"><span class="van-button__text">提交订单</span></button>
|
||||
<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"><span class="van-button__text">提交订单</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-submit-bar">
|
||||
<div class="van-submit-bar__tip">
|
||||
你的收货地址不支持同城送, 我们已为你推荐快递</div>
|
||||
<div class="van-submit-bar__tip">你的收货地址不支持同城送, 我们已为你推荐快递</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--square van-button--disabled"><span class="van-button__text">提交订单</span></button>
|
||||
<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--square van-button--disabled"><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-button--loading">
|
||||
<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-button--loading">
|
||||
<div class="van-loading van-loading--circular van-loading" style="color:;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>
|
||||
</button>
|
||||
</div>
|
||||
@ -31,8 +28,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-submit-bar">
|
||||
<div class="van-submit-bar__tip">
|
||||
<span>
|
||||
<div class="van-submit-bar__tip"><span>
|
||||
你的收货地址不支持同城送,
|
||||
<span class="edit-address">
|
||||
修改地址
|
||||
@ -42,7 +38,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" style="color:undefined;font-size:undefined;">
|
||||
<!----></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"><span class="van-button__text">提交订单</span></button>
|
||||
<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"><span class="van-button__text">提交订单</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,9 +2,8 @@
|
||||
|
||||
exports[`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--square van-button--disabled"><span class="van-button__text"></span></button>
|
||||
<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--square van-button--disabled"><span class="van-button__text"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user