Vant4 SubmitBar 提交訂單欄

介紹

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

引入

通過以下方式來全局注冊組件，更多注冊方式請參考組件注冊。

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 { showToast } from 'vant';

export default {
  setup() {
    const onSubmit = () => showToast('點擊按鈕');
    return {
      onSubmit,
    };
  },
};

禁用狀態(tài)

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

<van-submit-bar
  disabled
  :price="3050"
  button-text="提交訂單"
  tip="你的收貨地址不支持配送"
  tip-icon="info-o"
  @submit="onSubmit"
/>

加載狀態(tài)

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

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

高級用法

通過插槽插入自定義內(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 { showToast } from 'vant';

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

API

Props

Events

Slots

類型定義

組件導(dǎo)出以下類型定義：

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

主題定制

樣式變量

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