Vant SubmitBar 提交訂單欄

引入

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

Vue.use(SubmitBar);

代碼演示

基礎(chǔ)用法

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

禁用狀態(tài)

禁用狀態(tài)下不會(huì)觸發(fā)submit事件

<van-submit-bar
  disabled
  :price="3050"
  button-text="提交訂單"
  tip="你的收貨地址不支持同城送, 我們已為你推薦快遞"
  tip-icon="info-o"
  @submit="onSubmit"
/>

加載狀態(tài)

加載狀態(tài)下不會(huì)觸發(fā)submit事件

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

高級(jí)用法

通過(guò)插槽插入自定義內(nèi)容

<van-submit-bar
  :price="3050"
  button-text="提交訂單"
  @submit="onSubmit"
>
  <van-checkbox v-model="checked">全選</van-checkbox>
  <span slot="tip">
    你的收貨地址不支持同城送, <span>修改地址</span>
  </span>
</van-submit-bar>

API

Props

Events

Slots