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

样式变量

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