Vant3 SubmitBar 提交訂單欄

介紹

用于展示訂單金額與提交訂單。

實(shí)例演示

引入

通過(guò)以下方式來(lái)全局注冊(cè)組件，更多注冊(cè)方式請(qǐng)參考組件注冊(cè)。

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

const app = createApp();
app.use(SubmitBar);

代碼演示

基礎(chǔ)用法

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

import { Toast } from 'vant';

export default {
  setup() {
    const onSubmit = () => Toast('點(diǎn)擊按鈕');
    return {
      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>
  <template #tip>
    你的收貨地址不支持同城送, <span @click="onClickLink">修改地址</span>
  </template>
</van-submit-bar>

import { Toast } from 'vant';

export default {
  setup() {
    const onSubmit = () => Toast('點(diǎn)擊按鈕');
    const onClickLink = () => Toast('修改地址');
    return {
      onSubmit,
      onClickLink,
    };
  },
};

API

Props

Events

Slots

樣式變量

組件提供了下列 CSS 變量，可用于自定義樣式，使用方法請(qǐng)參考 ConfigProvider 組件。