vant/docs/markdown/en-US/submit-bar.md
neverland 493371c7a1
[Improvement] SubmitBar: add left slot (#345)
* fix: Tabbar icon line-height

* [new feature] progress add showPivot prop

* [new feature] TabItem support vue-router

* [new feature] update document header style

* [Doc] add toast english ducoment

* [bugfix] Search box-sizing wrong

* [Doc] update vant-demo respo

* [Doc] translate theme & demo pages

* [Doc] add Internationalization document

* [bugfix] remove unnecessary props

* [fix] optimize clickoutside

* [new feature] optimize find-parent

* [new feature]: change document title accordinng to language

* [new feature] Pagination code review

* [improvement] adjust icon-font unicode

* [improvement] Icon spinner color inherit

* [improvement] icon default width

* [bugfix] DateTimePicker validate date props

* [bugfix] Tab item text ellipsis

* [improvement] optimize single line ellipsis

* [Improvement] optimzie staticClass

* [Improvement] Button: use sfc instread of jsx

* [Improvement] update actionsheet close icon style

* fix: yarn.lock

* fix: icon test cases

* [bugfix] errors during ssr

* [Improvement] SubmitBar add left slot
2017-11-23 20:23:42 +08:00

2.1 KiB

SubmitBar

Install

import { SubmitBar } from 'vant';

Vue.component(SubmitBar.name, SubmitBar);

Usage

Basic Usage

<van-submit-bar
  :price="3050"
  buttonText="提交订单"
  @submit="onClickButton"
/>

Disabled

禁用状态下不会触发submit事件

<van-submit-bar
  disabled
  :price="3050"
  buttonText="提交订单"
  tip="您的收货地址不支持同城送, 我们已为您推荐快递"
  @submit="onClickButton"
/>

Loading

加载状态下不会触发submit事件

<van-submit-bar
  loading
  :price="3050"
  buttonText="提交订单"
  @submit="onClickButton"
/>

Advanced Usage

通过 slot 插入自定义内容

<van-submit-bar
  :price="3050"
  buttonText="提交订单"
  @submit="onClickButton"
>
  <van-checkbox v-model="checked">全选</van-checkbox>
  <span slot="tip">
    您的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址 ></span>
  </span>
</van-submit-bar>

API

Attribute Description Type Default 必须
price 价格(单位分) Number -
buttonText 按钮文字 String -
buttonType 按钮类型 String danger
tip 提示文案 String -
disabled 是否禁用按钮 Boolean false
loading 是否显示加载中的按钮 Boolean false

Event

Event Description Attribute
submit 按钮点击事件回调 -

Slot

Name Description
default 自定义订单栏左侧内容
tip 提示文案中的额外操作和说明