• SubmitBar 提交订单栏
    • 引入
  • 代码演示
    • 基础用法
    • 禁用状态
    • 加载状态
    • 高级用法
  • API
    • Props
    • Events
    • Slots

    SubmitBar 提交订单栏

    引入

    1. import { SubmitBar } from 'vant';
    2. Vue.use(SubmitBar);

    代码演示

    基础用法

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

    禁用状态

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

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

    加载状态

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

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

    高级用法

    通过插槽插入自定义内容

    1. <van-submit-bar
    2. :price="3050"
    3. button-text="提交订单"
    4. @submit="onSubmit"
    5. >
    6. <van-checkbox v-model="checked">全选</van-checkbox>
    7. <span slot="tip">
    8. 你的收货地址不支持同城送, <span>修改地址</span>
    9. </span>
    10. </van-submit-bar>

    API

    Props

    参数说明类型默认值版本
    price价格(单位分)Number--
    label价格左侧文案String合计:-
    suffix-label价格右侧文案String-2.0.0
    button-text按钮文字String--
    button-type按钮类型Stringdanger-
    tip提示文案String--
    tip-icon左侧图标名称或图片链接,可选值见 Icon 组件String--
    disabled是否禁用按钮Booleanfalse-
    loading是否显示加载中的按钮Booleanfalse-
    currency货币符号String¥1.0.6
    decimal-length价格小数点后位数Number21.6.15
    safe-area-inset-bottom是否开启 iPhone X 底部安全区适配,需要在 viewport meta 标签中设置 viewport-fit=coverBooleanfalse1.6.15

    Events

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

    Slots

    名称说明
    default自定义订单栏左侧内容
    top自定义订单栏上方内容
    tip提示文案中的额外操作和说明

    SubmitBar 提交订单栏 - 图1