SubmitBar

基础渲染

基础用法。

合计： ¥ 30 .5

提交订单

<template>
  <d-submit-bar price="30.5" button-text="提交订单" @submit="handleClick">
  </d-submit-bar>
</template>

<script>
  export default {
    methods: {
      handleClick() {
        alert('hello');
      },
    },
  };
</script>

<style lang="scss">
  .d-submit_bar {
    position: relative;
    padding-bottom: 0;
  }
</style>

禁用状态

通过 disabled 属性设置按钮状态。

你的收货地址不支持同城送，我们已为你推荐快递

合计： ¥ 30 .5

提交订单

<template>
  <d-submit-bar
    price="30.5"
    button-text="提交订单"
    tip="你的收货地址不支持同城送，我们已为你推荐快递"
    tip-icon="fire_fill"
    disabled
  >
  </d-submit-bar>
</template>

<script>
  export default {
    methods: {},
  };
</script>

<style lang="scss">
  .d-submit_bar {
    position: relative;
    padding-bottom: 0;
  }
</style>

高级用法

可自定义提示。

你的收货地址不支持同城送，修改地址

全选

合计： ¥ 30 .5

提交订单

<template>
  <d-submit-bar
    price="30.5"
    button-text="提交订单"
    :tip="true"
    @submit="handleClick"
  >
    <div>全选</div>
    <template #tip>
      <div class="tips">你的收货地址不支持同城送，<span>修改地址</span></div>
    </template>
  </d-submit-bar>
</template>

<script>
  export default {
    methods: {
      handleClick() {
        alert('hello');
      },
    },
  };
</script>

<style lang="scss">
  .d-submit_bar {
    position: relative;
    padding-bottom: 0;
    .tips {
      span {
        color: #479dff;
      }
    }
  }
</style>

API

属性

名称	说明	类型	默认值
price	价格（单位元）	string	-
label	价格文案	string	合计：
suffixLabel	价格右侧文案	string	-
buttonText	按钮文字	string	提交订单
tip	提示文案	string | boolean	-
tipIcon	图标名称，可选值见 Icon 组件	string	-
disabled	是否禁用按钮	boolean	false
currency	货币符号	string	¥
safeAreaInsetBottom	是否为 iPhoneX 留出底部安全距离	boolean	true
decimalLength	价格小数点后位数	number	2

插槽

名称	说明	参数
-	自定义订单栏左侧内容	无
tip	自定义订单栏上方内容	无

事件

名称	说明	参数
submit	点击提交时触发	名称 说明 类型 e 事件对象 object

贡献者

无