Install

import { createApp } from 'vue';
import { SubmitBar } from 'vant';

const app = createApp();
app.use(SubmitBar);

Usage

Basic Usage

<van-submit-bar :price="3050" button-text="Submit" @submit="onSubmit" />

import { Toast } from 'vant';

export default {
  setup() {
    const onSubmit = () => Toast('Submit');
    return {
      onSubmit,
    };
  },
};

Disabled

submit event will not triggered when disabled.

<van-submit-bar
  disabled
  :price="3050"
  button-text="Submit"
  tip="Some tips"
  tip-icon="info-o"
  @submit="onSubmit"
/>

Loading

submit event will not triggered when loading.

<van-submit-bar loading :price="3050" button-text="Submit" @submit="onSubmit" />

Advanced Usage

Use slot to add custom contents.

<van-submit-bar :price="3050" button-text="Submit" @submit="onSubmit">
  <van-checkbox v-model="checked">Check</van-checkbox>
  <template #tip> Some tips, <span @click="onClickLink">Link</span> </template>
</van-submit-bar>

import { Toast } from 'vant';

export default {
  setup() {
    const onSubmit = () => Toast('Submit');
    const onClickLink = () => Toast('Click Link');
    return {
      onSubmit,
      onClickLink,
    };
  },
};

API

Props

Attribute	Description	Type	Default
price	Price	number	-
decimal-length	Price decimal length	number \| string	`2`
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	`\xA5`
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 `v3.5.1`	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:

import type { 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-color	var(--van-background-color-light)	-
--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-family	var(--van-price-integer-font-family)	-
--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-color	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)	-

SubmitBar

Intro