SubmitBar 提交订单栏

介绍

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

引入

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

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

代码演示

基础用法

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

import { showToast } from 'vant';
export default {
  setup() {
    const onSubmit = () => showToast('点击按钮');
    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 { showToast } from 'vant';
export default {
  setup() {
    const onSubmit = () => showToast('点击按钮');
    const onClickLink = () => showToast('修改地址');
    return {
      onSubmit,
      onClickLink,
    };
  },
};

API

Props

Events

Slots

类型定义

组件导出以下类型定义：

import type { SubmitBarProps, SubmitBarTextAlign } from 'vant';

主题定制

样式变量

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