Vant3 中文入门教程 Vant3 SubmitBar 提交订单栏

2024-02-25 开发教程 Vant3 中文入门教程 匿名 5

介绍

用于展示订单金额与提交订单。

实例演示

引入

通过以下方式来全局注册组件,更多注册方式请参考组件注册。

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

代码演示

基础用法

<van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit" />
import { Toast } from 'vant';
export default {
setup() {
const onSubmit = () => Toast('点击按钮');
return {
onSubmit,
};
},
};

禁用状态

禁用状态下不会触发 submit 事件。

<van-submit-bar
disabled
:price="3050"
button-text="提交订单"
tip="你的收货地址不支持同城送, 我们已为你推荐快递"
tip-icon="info-o"
@submit="onSubmit"
/>

加载状态

加载状态下不会触发 submit 事件。

<van-submit-bar
loading
:price="3050"
button-text="提交订单"
@submit="onSubmit"
/>

高级用法

通过插槽插入自定义内容。

<van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit">
<van-checkbox v-model="checked">全选</van-checkbox>
<template #tip>
你的收货地址不支持同城送, <span @click="onClickLink">修改地址</span>
</template>
</van-submit-bar>
import { Toast } from 'vant';
export default {
setup() {
const onSubmit = () => Toast('点击按钮');
const onClickLink = () => Toast('修改地址');
return {
onSubmit,
onClickLink,
};
},
};

API

Props

参数说明类型默认值
price金额(单位分)

number

-
decimal-length金额小数点位数

number | string

2

label金额左侧文案

string

合计:

suffix-label金额右侧文案

string

-
text-align

金额文案对齐方向,可选值为 left

string

right

button-text按钮文字

string

-
button-type按钮类型

string

danger

button-color自定义按钮颜色

string

-
tip在订单栏上方的提示文案

string

-
tip-icon提示文案左侧的图标名称或图片链接

string

-
currency货币符号

string

¥

disabled是否禁用按钮

boolean

false

loading是否显示将按钮显示为加载中状态

boolean

false

safe-area-inset-bottom

是否开启底部安全区适配

boolean

true

Events

事件名说明回调参数
submit按钮点击事件回调-

Slots

名称说明
default自定义订单栏左侧内容
button自定义按钮
top自定义订单栏上方内容
tip提示文案中的额外内容

样式变量

组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。

名称默认值描述
--van-submit-bar-height

50px

-
--van-submit-bar-z-index

100

-
--van-submit-bar-background-color

var(--van-white)

-
--van-submit-bar-button-width

110px

-
--van-submit-bar-price-color

var(--van-danger-color)

-
--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

#f56723

-
--van-submit-bar-tip-background-color

#fff7cc

-
--van-submit-bar-tip-icon-size

12px

-
--van-submit-bar-button-height

40px

-
--van-submit-bar-padding

0 var(--van-padding-md)

-
--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)

-