SubmitBar - Vant 4

SubmitBar

Intro

Used to display the order amount and submit the order.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

import { createApp } from'vue'; import { SubmitBar } from'vant'; const app = createApp(); app.use(SubmitBar);

Usage

Basic Usage

import { showToast } from'vant'; exportdefault { setup() { constonSubmit = () => showToast('Submit'); return { onSubmit, }; }, };

Disabled

submit event will not triggered when disabled.

Loading

submit event will not triggered when loading.

Advanced Usage

Use slot to add custom contents.

import { showToast } from'vant'; exportdefault { setup() { constonSubmit = () => showToast('Submit'); constonClickLink = () => showToast('Click Link'); return { onSubmit, onClickLink, }; }, };

API

Props

Attribute	Description	Type	Default
price	Price	number	-
decimal-length	Price decimal length	*number	string*
label	Price left label	string	Total:
suffix-label	Price right label	string	-
text-align	Price label text align can be set to left	string	right
button-text	Button text	string	-
button-type	Button type	string	danger
button-color	Button color	string	-
tip	Tip	string	-
tip-icon	Tip left icon	string	-
currency	Currency symbol	string	��
disabled	Whether to disable button	boolean	false
loading	Whether to show loading icon	boolean	false
safe-area-inset-bottom	Whether to enable bottom safe area adaptation	boolean	true
placeholder	Whether to generate a placeholder element	boolean	false

Events

Event	Description	Arguments
submit	Triggered when click submit button	-

Slots

Name	Description
default	Custom left content
button	Custom button
top	Custom top content
tip	Custom tips

Types

The component exports the following type definitions:

importtype { SubmitBarProps, SubmitBarTextAlign } from'vant';

Theming

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

Name	Default Value	Description
--van-submit-bar-height	50px	-
--van-submit-bar-z-index	100	-
--van-submit-bar-background	var(--van-background-2)	-
--van-submit-bar-button-width	110px	-
--van-submit-bar-price-color	var(--van-danger-color)	-
--van-submit-bar-price-font-size	var(--van-font-size-sm)	-
--van-submit-bar-price-integer-font-size	20px	-
--van-submit-bar-price-font	var(--van-price-font)	-
--van-submit-bar-text-color	var(--van-text-color)	-
--van-submit-bar-text-font-size	var(--van-font-size-md)	-
--van-submit-bar-tip-padding	var(--van-padding-xs) var(--van-padding-sm)	-
--van-submit-bar-tip-font-size	var(--van-font-size-sm)	-
--van-submit-bar-tip-line-height	1.5	-
--van-submit-bar-tip-color	var(--van-orange-dark)	-
--van-submit-bar-tip-background	var(--van-orange-light)	-
--van-submit-bar-tip-icon-size	12px	-
--van-submit-bar-button-height	40px	-
--van-submit-bar-padding	0 var(--van-padding-md)	-