介绍

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

实例演示

引入

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

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

Events

Slots

样式变量

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