CartBar 购物车栏

商品详情页底部操作栏，组合图标区与购买按钮，覆盖购物车、店铺和立即下单等常见场景。

演示

9:41

代码示例

<!-- 基本用法 -->
  <re-cart-bar class="demo-cart-bar" :fixed="false" :icons="basicIcons" :actions="actions" @icon-click="onBasicIconClick" @action-click="onActionClick" />

<!-- 带有徽标 -->
  <re-cart-bar class="demo-cart-bar" :fixed="false" :icons="badgeIcons" :actions="actions" @icon-click="onBadgeIconClick" @action-click="onActionClick" />

<!-- 自定义图标颜色 -->
  <re-cart-bar class="demo-cart-bar" :fixed="false" :icons="customColorIcons" :actions="actions" @icon-click="onCustomColorClick" @action-click="onActionClick" />

<!-- 图标无文本 -->
  <re-cart-bar class="demo-cart-bar" :fixed="false" :icons="iconOnlyIcons" :actions="actions" @icon-click="onIconOnlyClick" @action-click="onActionClick" />

<!-- 胶囊型按钮 -->
  <re-cart-bar class="demo-cart-bar" :fixed="false" :icons="basicIcons" :actions="actions" :hasCapsuleButtons="true" @icon-click="onBasicIconClick" @action-click="onActionClick" />

<!-- 顶部内容 -->
  <re-cart-bar class="demo-cart-bar" :fixed="false" topText="顶部自定义内容" topStyle="justify-content:center;align-items:center;" topTextStyle="color:#ff0000;text-align:center;font-size:14px;" :icons="basicIcons" :actions="actions" @icon-click="onBasicIconClick" @action-click="onActionClick" />

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-cart-bar />。

API

CartBar Props

名称	类型	默认值	描述	必传
icons	`Array<CartBarIconItem>`		图标区数据	N
actions	`Array<CartBarActionItem>`		按钮区数据	N
hasCapsuleButtons	`boolean`	false	是否使用胶囊按钮样式	N
topText	`string`	""	顶部提示文案	N
topStyle	`string`	""	顶部提示区域样式	N
topTextStyle	`string`	""	顶部提示文案样式	N
safeAreaInsetBottom	`boolean`	true	是否开启底部安全区适配	N
fixed	`boolean`	true	是否固定在底部	N
placeholder	`boolean`	false	是否生成占位高度	N
placeholderHeight	`number`	88	占位高度	N
customStyle	`string`	""	自定义样式	N

CartBar Events

名称	参数	描述
icon-click	index: number	-
action-click	index: number	操作按钮点击时触发

CartBar Slots

名称	描述
-	-

Turntable 大转盘

参考本地 nutui-bingo-dev 的基础 demo，实现大转盘抽奖展示。

Chat 智能对话

智能对话组件，基于 re-chat 系列子组件构建，支持消息列表、操作栏、发送器与思考过程，用于搭建 AI 对话界面

内容锚点

演示
代码示例
引入
API