BottomNav 底部栏

多功能底部操作栏，支持自由插槽自定义 (type="custom")、电商商品详情页交易工具栏 (type="action") 与社区帖子评论点赞互动栏 (type="bar")，底栏全端自动防遮挡避让。

---

代码示例

1. 自由插槽自定义 (Custom Slot)

使用默认插槽在底部栏中自由编排全选复选框、合计金额与结算按钮。

<template>
  <mu-bottom-nav type="custom">
    <view class="custom-cart-bar">
      <mu-checkbox v-model="checked" label="全选" />
      <view class="cart-price">
        <text>合计:</text>
        <text class="price">￥899.00</text>
      </view>
      <mu-button type="primary" size="medium" radius="full" @click="onCheckout">
        去结算 (3)
      </mu-button>
    </view>
  </mu-bottom-nav>
</template>

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

const checked = ref(true)
const onCheckout = () => console.log('去结算')
</script>

---

2. 电商交易工具栏 (Action Mode)

<template>
  <mu-bottom-nav
    type="action"
    :items="navItems"
    :buttons="navButtons"
    @click-icon="onIconClick"
    @click-button="onButtonClick"
  />
</template>

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

const navItems = ref([
  { text: '店铺', icon: 'home' },
  { text: '客服', icon: 'message-circle' },
  { text: '购物车', icon: 'shopping-cart', badge: '3' }
])

const navButtons = ref([
  { text: '加入购物车', color: '#F59E0B' },
  { text: '立即购买', color: '#171717' }
])

const onIconClick = ({ item }) => console.log('点击小图标:', item)
const onButtonClick = ({ btn }) => console.log('点击按钮:', btn)
</script>

---

3. 社区互动评论栏 (Bar Mode)

<template>
  <mu-bottom-nav
    type="bar"
    :actions="socialActions"
    placeholder="表达你的极客观点..."
    @click-action="onActionClick"
  />
</template>

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

const socialActions = ref([
  { icon: 'heart', count: 128, active: true },
  { icon: 'star', count: 45 },
  { icon: 'share', count: 12 }
])

const onActionClick = ({ act }) => console.log('点击点赞/收藏:', act)
</script>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
type	底部栏展示形态	String	action | bar | nav | custom	'action'
items	左侧快捷小图标集合	Array	-	[]
buttons	右侧购买/提交大胶囊按钮集合	Array	-	[]
actions	社交点赞/收藏图标集合	Array	-	[]
placeholder	输入框占位符文本	String	-	'写下你的精彩评论...'
current	当前激活的导航项索引（type="nav" 时使用）	Number	-	0
fixed	是否固定在页面底部	Boolean	true | false	true
background	底部栏背景颜色	String	-	''

---

插槽说明 (Slots)

插槽名	说明
default	完全自定义底部栏内部 DOM 结构（type="custom" 或直接嵌套）

---

事件说明 (Events)

事件名	说明	回调参数
change	导航项切换时触发（type="nav" 时）	({ index: Number, item: Object })
click-icon	点击左侧小图标时触发	({ index: Number, item: Object })
click-button	点击右侧购买胶囊按钮时触发	({ index: Number, btn: Object })
click-action	点击点赞/收藏图标时触发	({ index: Number, act: Object })
click-input	点击输入框占位区域时触发	-