SubmitBar 提交栏

用于电商结算页或购物车底部，用于展示合计金额、已选件数及提交按钮。支持吸底适配（Safe Area）和全选功能。

基础用法

展示合计金额和点击结算按钮。要求 height: 56px 或其他包裹容器来占据正常文档流高度，若吸底则无需占位。

基础用法

购物车模式（带全选）

集成全选复选框，适用于购物车页面。通过配置 cent-unit 属性可以直接传入按"分"计算的后端金额。

购物车模式

禁用与加载状态

组件内置了 disabled 和 loading 状态，并且可以通过 tip 属性在结算栏上方展示醒目的警告/提示横幅（如不在配送范围等）。

状态控制与提示横幅

高级插槽自定义

你可以通过 #tip, #left, #button, 和 #right 插槽实现高度定制化的购物结算块布局。

高级插槽

在 Nuxt 中使用

本组件完美支持 Nuxt 3/4 SSR 数据在服务端的预渲染计算。

Nuxt 中使用

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@yh-ui/nuxt'],
  yhUI: {
    // 默认已自动按需引入，无需特殊配置
    // options...
  }
})

API

Props

参数	说明	类型	默认值
price	金额	`number`	`0`
currency	货币符号	`string`	`¥`
cent-unit	price 是否以分为单位	`boolean`	`false`
decimal-length	金额保留几位小数	`number`	`2`
label	金额说明前缀文字	`string`	`'合计：'`
button-text	提交按钮文字	`string`	—
button-type	按钮预设类型 (`primary` `danger` 等)	`SubmitBarButtonType`	`'primary'`
show-checkbox	是否显示全选复选框	`boolean`	`false`
checked	全选状态，支持 `v-model:checked`	`boolean`	`false`
indeterminate	半选状态	`boolean`	`false`
selected-count	已选件数	`number`	`0`
tip	顶部提示文案	`string`	—
disabled	是否禁用按钮	`boolean`	`false`
loading	是否处于加载状态	`boolean`	`false`
safe-area-inset-bottom	是否开启底部安全区适配	`boolean`	`true`
theme-overrides	自定义主题 CSS 变量	`Record<string, string>`	`{}`

Events

事件名	说明	回调参数
submit	点击提交按钮时触发	`(e: MouseEvent)`
update:checked	复选框状态发生双向绑定变化	`(val: boolean)`
check-change	勾选框主动改变时触发	`(val: boolean)`

Slots (插槽)

插槽名	说明	参数
default	默认插槽	-
tip	自定义顶部提示横幅内容	-
left	自定义左侧全选框旁的内容补充	-
right	自定义右侧提交按钮旁的内容补充	-
price	完全复写整个中间金额区域展示	-
button	复写提交按钮里的所有样式/文案结构	-

Expose

当前组件未暴露公开实例方法或属性。

主题变量 (CSS Variables)

通过传入 theme-overrides prop 或全局定制，可轻松定制组件主题。

变量名	说明	默认值
`--yh-submit-bar-bg`	组件整体背景色	`var(--yh-bg-color)`
`--yh-submit-bar-border`	顶部上边框颜色	`var(--yh-border-color-lighter)`
`--yh-submit-bar-height`	组件整体高度	`56px`
`--yh-submit-bar-price-color`	金额主色偏红	`var(--yh-color-danger)`
`--yh-submit-bar-price-size`	金额整体部分数字大小	`22px`
`--yh-submit-bar-label-color`	合计标签颜色	`var(--yh-text-color-regular)`
`--yh-submit-bar-btn-radius`	结算按钮圆角	`var(--yh-radius-large)`
`--yh-submit-bar-btn-min-width`	结算按钮最小宽度	`108px`
`--yh-submit-bar-tip-bg`	顶部提示横幅的背景色	`var(--yh-color-warning-light-9)`
`--yh-submit-bar-tip-color`	顶部提示横幅的文字主色	`var(--yh-color-warning)`
`--yh-submit-bar-shadow`	吸底时的阴影	`0 -2px 12px var(--yh-shadow-color)`
`--yh-submit-bar-z-index`	组件吸底时的固定层级	`200`

类型导出

名称	说明
`YhSubmitBarProps`	组件 Props 类型
`YhSubmitBarEmits`	组件事件类型
`YhSubmitBarSlots`	组件插槽类型
`YhSubmitBarButtonType`	按钮类型联合类型
`YhSubmitBarInstance`	组件实例类型

SubmitBar 提交栏 ​

基础用法 ​

购物车模式（带全选） ​

禁用与加载状态 ​

高级插槽自定义 ​

在 Nuxt 中使用 ​

API ​

Props ​

Events ​

Slots (插槽) ​

Expose ​

主题变量 (CSS Variables) ​

类型导出 ​

SubmitBar 提交栏

基础用法

购物车模式（带全选）

禁用与加载状态

高级插槽自定义

在 Nuxt 中使用

API

Props

Events

Slots (插槽)

Expose

主题变量 (CSS Variables)

类型导出