引入
代码演示
基础用法
禁用状态
禁用状态下不会触发 `submit` 事件。
加载状态
加载状态下不会触发 `submit` 事件。
高级用法
通过插槽插入自定义内容。
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 v2.9.1 | 自定义按钮颜色 | string | - | |
| tip | 在订单栏上方的提示文案 | string | - | |
| tip-icon | 提示文案左侧的[图标名称](https://youzan.github.io/vant/v2/#/zh-CN/icon)或图片链接 | string | - | |
| currency | 货币符号 | string | ¥ | |
| disabled | 是否禁用按钮 | boolean | false | |
| loading | 是否显示将按钮显示为加载中状态 | boolean | false | |
| safe-area-inset-bottom | 是否开启[底部安全区适配](https://youzan.github.io/vant/v2/#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | boolean | true |
Events
| 事件名 | 说明 | 回调参数 | |
|---|---|---|---|
| submit | 按钮点击事件回调 | - |
Slots
| 名称 | 说明 | |
|---|---|---|
| default | 自定义订单栏左侧内容 | |
button v2.10.12 | 自定义按钮 | |
| top | 自定义订单栏上方内容 | |
| tip | 提示文案中的额外内容 |
样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考
。
| 名称 | 默认值 | 描述 | |
|---|---|---|---|
| @submit-bar-height | 50px | - | |
| @submit-bar-z-index | 100 | - | |
| @submit-bar-background-color | @white | - | |
| @submit-bar-button-width | 110px | - | |
| @submit-bar-price-color | @red | - | |
| @submit-bar-price-font-size | @font-size-md | - | |
| @submit-bar-currency-font-size | @font-size-md | - | |
| @submit-bar-text-color | @text-color | - | |
| @submit-bar-text-font-size | @font-size-md | - | |
| @submit-bar-tip-padding | @padding-xs @padding-sm | - | |
| @submit-bar-tip-font-size | @font-size-sm | - | |
| @submit-bar-tip-line-height | 1.5 | - | |
| @submit-bar-tip-color | #f56723 | - | |
| @submit-bar-tip-background-color | #fff7cc | - | |
| @submit-bar-tip-icon-size | 12px | - | |
| @submit-bar-button-height | 40px | - | |
| @submit-bar-padding | 0 @padding-md | - | |
| @submit-bar-price-integer-font-size | 20px | - | |
| @submit-bar-price-font-family | @price-integer-font-family | - |
效果图：
