SubmitBar 注文提出バー - Vant 4
SubmitBar 注文提出バー
紹介
注文金額の表示と注文の提出に使用されます。
インポート
以下の方法でコンポーネントをグローバルに登録します。詳細な登録方法についてはコンポーネントの登録を参照してください。
import { createApp } from'vue'; import { SubmitBar } from'vant'; const app = createApp(); app.use(SubmitBar);コードデモ
基本的な使い方
import { showToast } from'vant'; exportdefault { setup() { constonSubmit = () => showToast('ボタンをクリック'); return { onSubmit, }; }, };無効状態
無効状態では submit イベントはトリガーされません。
読み込み状態
読み込み状態では submit イベントはトリガーされません。
高度な使い方
スロットを通じてカスタムコンテンツを挿入します。
import { showToast } from'vant'; exportdefault { setup() { constonSubmit = () => showToast('ボタンをクリック'); constonClickLink = () => showToast('住所を変更'); return { onSubmit, onClickLink, }; }, };API
Props
| パラメータ | 説明 | タイプ | デフォルト値 | | price | 金額（単位は分） | number | - | | decimal-length | 金額の小数点以下桁数 | number | string | 2 | | label | 金額の左側のテキスト | string | 合計： | | suffix-label | 金額の右側のテキスト | string | - | | text-align | 金額のテキストの配置方向、オプション値は left | string | right | | button-text | ボタン文言 | string | - | | button-type | ボタンタイプ | string | danger | | button-color | ボタン色のカスタマイズ | string | - | | tip | バー上部の注意文言 | string | - | | tip-icon | 注意文言の左側アイコン名または画像 URL（Icon の name と同等） | string | - |
| currency | 通貨記号 | string | ¥ | | disabled | ボタンを無効化するかどうか | boolean | false | | loading | ボタンをローディング表示にするかどうか | boolean | false | | safe-area-inset-bottom | 下部セーフエリア対応 を有効化 | boolean | true |
| placeholder | 同高さのプレースホルダを生成するかどうか | boolean | false |
Events
| イベント名 | 説明 | コールバック引数 |
|---|---|---|
| submit | ボタンのクリック時に発火 | - |
Slots
| 名前 | 説明 |
|---|---|
| default | バー左側のカスタム内容 |
| button | カスタムボタン |
| top | バー上部のカスタム内容 |
| tip | 注意文言内の追加内容 |
型定義
コンポーネントは以下の型定義を提供します：
importtype { SubmitBarProps, SubmitBarTextAlign } from'vant';テーマカスタマイズ
スタイル変数
以下の CSS 変数でスタイルをカスタマイズできます。使用方法は ConfigProvider コンポーネント を参照してください。
| 名称 | デフォルト | 説明 |
|---|---|---|
| --van-submit-bar-height | 50px | - |
| --van-submit-bar-z-index | 100 | - |
| --van-submit-bar-background | var(--van-background-2) | - |
| --van-submit-bar-button-width | 110px | - |
| --van-submit-bar-price-color | var(--van-danger-color) | - |
| --van-submit-bar-price-font-size | var(--van-font-size-sm) | - |
| --van-submit-bar-price-integer-font-size | 20px | - |
| --van-submit-bar-price-font | var(--van-price-font) | - |
| --van-submit-bar-text-color | var(--van-text-color) | - |
| --van-submit-bar-text-font-size | var(--van-font-size-md) | - |
| --van-submit-bar-tip-padding | var(--van-padding-xs) var(--van-padding-sm) | - |
| --van-submit-bar-tip-font-size | var(--van-font-size-sm) | - |
| --van-submit-bar-tip-line-height | 1.5 | - |
| --van-submit-bar-tip-color | var(--van-orange-dark) | - |
| --van-submit-bar-tip-background | var(--van-orange-light) | - |
| --van-submit-bar-tip-icon-size | 12px | - |
| --van-submit-bar-button-height | 40px | - |
| --van-submit-bar-padding | 0 var(--van-padding-md) | - |