底部导航 TabBar

固定于移动端视口底部的 5 栏主导航（首页 / 商品 / 快速下单 / 购物车 / 我的）。核心导航栏标准高度 50px，内置可选的 iOS 全面屏底部安全区与小黑条（总高度约 74px）。

基本用法（含底部安全区小黑条）

默认开启 showHomeIndicator，适用于移动端完整页面预览与真机全面屏适配。

首页

商品

快速下单

购物车

我的

<template>
  <TabBar @change="handleTabChange" v-model="activeTab"/>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import TabBar from '@/components/common/TabBar.vue'

const activeTab = ref('quick')
const handleTabChange = (key: string) => {
  console.log('切换栏目:', key)
}
</script>

隐藏底部安全区小黑条（show-home-indicator="false"）

当页面嵌入到小程序或自定义容器、不需要模拟底部小黑条时，可将 show-home-indicator 设为 false，导航栏收紧为纯 50px 高度。

首页

商品

快速下单

购物车

我的

<TabBar :show-home-indicator="false" v-model="activeTab"/>

API 参数说明

参数名	说明	类型	默认值
modelValue	当前选中的导航项 key（home / category / quick / cart / mine）	string	'quick'
showHomeIndicator	是否显示底部 iOS 全面屏小黑条安全区（24px）	boolean	true

事件说明

事件名	说明	回调参数
update:modelValue	选中项变化时触发（支持 v-model）	(key: string)
change	点击切换底部导航项时触发	(key: string)