forked from youzan/vant
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.tsx
More file actions
119 lines (108 loc) · 2.71 KB
/
Copy pathindex.tsx
File metadata and controls
119 lines (108 loc) · 2.71 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
import { createNamespace } from '../utils';
import { emit, inherit } from '../utils/functional';
import Button, { ButtonType } from '../button';
import Icon from '../icon';
// Types
import { CreateElement, RenderContext } from 'vue/types';
import { ScopedSlot, DefaultSlots } from '../utils/types';
export type SubmitBarProps = {
tip?: string;
tipIcon?: string;
label?: string;
price?: number;
loading?: boolean;
currency: string;
disabled?: boolean;
buttonType: ButtonType;
buttonText?: string;
suffixLabel?: string;
decimalLength: number;
safeAreaInsetBottom?: boolean;
};
export type SubmitBarSlots = DefaultSlots & {
top?: ScopedSlot;
tip?: ScopedSlot;
};
const [createComponent, bem, t] = createNamespace('submit-bar');
function SubmitBar(
h: CreateElement,
props: SubmitBarProps,
slots: SubmitBarSlots,
ctx: RenderContext<SubmitBarProps>
) {
const { tip, price, tipIcon } = props;
function Text() {
if (typeof price === 'number') {
const priceText = `${props.currency} ${(price / 100).toFixed(props.decimalLength)}`;
return (
<div class={bem('text')}>
<span>{props.label || t('label')}</span>
<span class={bem('price')}>{priceText}</span>
{props.suffixLabel && (
<span class={bem('suffix-label')}>{props.suffixLabel}</span>
)}
</div>
);
}
}
function Tip() {
if (slots.tip || tip) {
return (
<div class={bem('tip')}>
{tipIcon && <Icon class={bem('tip-icon')} name={tipIcon} />}
{tip && <span class={bem('tip-text')}>{tip}</span>}
{slots.tip && slots.tip()}
</div>
);
}
}
return (
<div
class={bem({ 'safe-area-inset-bottom': props.safeAreaInsetBottom })}
{...inherit(ctx)}
>
{slots.top && slots.top()}
{Tip()}
<div class={bem('bar')}>
{slots.default && slots.default()}
{Text()}
<Button
square
size="large"
class={bem('button')}
type={props.buttonType}
loading={props.loading}
disabled={props.disabled}
text={props.loading ? '' : props.buttonText}
onClick={() => {
emit(ctx, 'submit');
}}
/>
</div>
</div>
);
}
SubmitBar.props = {
tip: String,
label: String,
price: Number,
tipIcon: String,
loading: Boolean,
disabled: Boolean,
buttonText: String,
suffixLabel: String,
safeAreaInsetBottom: Boolean,
decimalLength: {
type: Number,
default: 2
},
currency: {
type: String,
default: '¥'
},
buttonType: {
type: String,
default: 'danger'
}
};
export default createComponent<SubmitBarProps, {}, SubmitBarSlots>(SubmitBar);