SubmitBar 提交订单栏

使用指南

在 app.json 或 index.json 中引入组件

  1. "usingComponents": {
  2.   "van-submit-bar": "path/to/vant-weapp/dist/submit-bar/index"
  3. }

代码演示

基础用法

  1. <van-submit-bar
  2.   price="{{ 3050 }}"
  3.   button-text="提交订单"
  4.   bind:submit="onSubmit"
  5. />

禁用状态

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

  1. <van-submit-bar
  2.   disabled
  3.   price="{{ 3050 }}"
  4.   button-text="提交订单"
  5.   tip="您的收货地址不支持同城送, 我们已为您推荐快递"
  6.   bind:submit="onSubmit"
  7. />

加载状态

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

  1. <van-submit-bar
  2.   loading
  3.   price="{{ 3050 }}"
  4.   button-text="提交订单"
  5.   bind:submit="onSubmit"
  6. />

高级用法

通过插槽插入自定义内容

  1. <van-submit-bar
  2.   price="{{ 3050 }}"
  3.   button-text="提交订单"
  4.   bind:submit="onClickButton"
  5.   tip="{{ true }}"
  6. >
  7.   <van-tag type="primary">标签</van-tag>
  8.   <view slot="tip">
  9.     您的收货地址不支持同城送, <text>修改地址</text>
  10.   </view>
  11. </van-submit-bar>

API

参数说明类型默认值
price价格（单位分）Number-
label价格文案String合计：
button-text按钮文字String-
button-type按钮类型Stringdanger
tip提示文案String / Boolean-
disabled是否禁用按钮Booleanfalse
loading是否显示加载中的按钮Booleanfalse
currency货币符号String¥
safe-area-inset-bottom是否适配iPhoneXBooleantrue

Event

事件名说明参数
submit按钮点击事件回调-

Slot

名称说明
-自定义订单栏左侧内容
top自定义订单栏上方内容
tip提示文案中的额外操作和说明，tip 不为空时才显示

外部样式类

类名说明
custom-class根节点样式类
price-class价格样式类
button-class按钮样式类
bar-class订单栏样式类

更新日志

版本类型内容
0.3.3feature新增组件
0.3.4bugfix修复金额为空时仍然显示合计的问题

原文: https://youzan.github.io/vant-weapp/#/submit-bar