@tanzhenxing/zx-submit-bar v1.0.2

zx-submit-bar 提交订单栏

zx-submit-bar 是一个用于展示订单金额与提交订单的组件，通常用于购物车结算、订单确认等场景。

特性

• 支持自定义金额展示
• 支持自定义按钮样式和文字
• 支持提示信息展示
• 支持多种插槽，灵活定制内容
• 支持底部安全区适配
• 完全兼容 H5、小程序、App

使用方法

<template>
  <zx-submit-bar
    :price="3050"
    button-text="提交订单"
    @submit="onSubmit"
  />
</template>

<script setup>
import { ref } from 'vue';

const onSubmit = () => {
  uni.showToast({
    title: '点击按钮',
    icon: 'none'
  });
};
</script>

属性说明

基础属性

事件

插槽

代码示例

基础用法

<zx-submit-bar
  :price="3050"
  button-text="提交订单"
  @submit="onSubmit"
/>

禁用状态

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

<zx-submit-bar
  disabled
  :price="3050"
  button-text="提交订单"
  tip="你的收货地址不支持配送"
  tip-icon="info"
  @submit="onSubmit"
/>

加载状态

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

<zx-submit-bar
  loading
  :price="3050"
  button-text="提交订单"
  @submit="onSubmit"
/>

高级用法

通过插槽插入自定义内容。

<zx-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit">
  <zx-checkbox v-model="checked">全选</zx-checkbox>
  <template #tip>
    你的收货地址不支持配送, <text class="link" @tap="onClickLink">修改地址</text>
  </template>
</zx-submit-bar>

const checked = ref(false);

const onSubmit = () => {
  uni.showToast({
    title: '点击按钮',
    icon: 'none'
  });
};

const onClickLink = () => {
  uni.showToast({
    title: '修改地址',
    icon: 'none'
  });
};

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式：

.zx-submit-bar {
  --submit-bar-height: 100rpx;
  --submit-bar-z-index: 100;
  --submit-bar-background: #ffffff;
  --submit-bar-button-width: 220rpx;
  --submit-bar-price-color: #ee0a24;
  --submit-bar-price-font-size: 24rpx;
  --submit-bar-price-integer-font-size: 40rpx;
  --submit-bar-text-color: #323233;
  --submit-bar-text-font-size: 28rpx;
  --submit-bar-tip-padding: 8rpx 24rpx;
  --submit-bar-tip-font-size: 24rpx;
  --submit-bar-tip-line-height: 1.5;
  --submit-bar-tip-color: #f56723;
  --submit-bar-tip-background: #fff7e8;
  --submit-bar-tip-icon-size: 24rpx;
  --submit-bar-button-height: 80rpx;
  --submit-bar-padding: 0 32rpx;
}