移动端专属组件

Tabbar 底部标签栏

移动端一级导航：EbTabbar + EbTabbarItem 固定吸底（fixed）+ 全面屏安全区适配 + 等高占位（placeholder，防止脱离文档流后遮挡内容尾部）。页内内容切换由业务持有 v-model；页签未设 name 时以注册顺序索引为标识。fixed: false 可作为普通块级标签栏内联使用（如卡片底部、演示壳内）。多级菜单压平为底部页签的完整规则见移动端 · 布局与导航壳。

基础用法

9:41

首页

快捷数据与待办

首页

订单

消息

我的

<MobileStage>
  <div class="mb-page">
    <div class="mb-card mb-card--pad">
      <div class="mb-card__title">{{ tabContent[tab].title }}</div>
      <div class="mb-card__label" style="margin-top: 4px;">{{ tabContent[tab].desc }}</div>
    </div>
  </div>
  <template #bottom>
    <eb-tabbar v-model="tab" :fixed="false">
      <eb-tabbar-item name="home" icon="home">首页</eb-tabbar-item>
      <eb-tabbar-item name="orders" icon="file-list" badge="6">订单</eb-tabbar-item>
      <eb-tabbar-item name="msgs" icon="chat" dot>消息</eb-tabbar-item>
      <eb-tabbar-item name="mine" icon="user">我的</eb-tabbar-item>
    </eb-tabbar>
  </template>
</MobileStage>

html

<!-- 真机：fixed 吸底 + 安全区适配 + 自动占位，内容切换由 v-model 驱动 -->
<eb-tabbar v-model="tab">
  <eb-tabbar-item name="home" icon="home">首页</eb-tabbar-item>
  <eb-tabbar-item name="orders" icon="file-list" badge="6">订单</eb-tabbar-item>
  <eb-tabbar-item name="msgs" icon="chat" dot>消息</eb-tabbar-item>
  <eb-tabbar-item name="mine" icon="user">我的</eb-tabbar-item>
</eb-tabbar>

const tab = ref('home')
// watch(tab) 切换页内内容；跨页跳转直接 tab.value = 'mine'

要点：

吸底三件：fixed 脱离文档流吸底、safe-area-inset-bottom 适配全面屏安全区、 placeholder 自动渲染等高占位——三者默认全开，普通页面零配置。
未读表达：dot 红点与 badge 角标都渲染在图标右上角，dot 优先；角标读数来自页面状态，标签栏与页面数据同源。

图标与选中态

页签图标用 icon 属性（eb-icon 名）；需要区分选中态时用 #icon 插槽（参数 active）。未注册的图标名需先注册（见 Icon）。

9:41

当前所在：feed

消息

New

我的

<MobileStage>
  <div class="mb-page">
    <div class="mb-card mb-card--pad">
      <div class="mb-card__title">当前所在：{{ tab2 }}</div>
    </div>
  </div>
  <template #bottom>
    <eb-tabbar v-model="tab2" :fixed="false">
      <eb-tabbar-item name="feed">
        <template #icon="{ active }">
          <eb-icon name="star" :size="20" :style="{ color: active ? 'var(--eb-color-primary)' : 'var(--eb-text-color-secondary)' }" />
        </template>
        订阅
      </eb-tabbar-item>
      <eb-tabbar-item name="msg" icon="chat" dot>消息</eb-tabbar-item>
      <eb-tabbar-item name="me" icon="user" badge="New">我的</eb-tabbar-item>
    </eb-tabbar>
  </template>
</MobileStage>

API

Tabbar Props

参数	说明	类型	默认值
v-model	当前激活项标识（v-model）	string \| number	''
fixed	吸底固定；false 时作为普通块级标签栏内联使用	boolean	true
placeholder	fixed 时渲染等高占位	boolean	true
border	顶部分隔线	boolean	true
safe-area-inset-bottom	适配全面屏底部安全区	boolean	true

TabbarItem Props

参数	说明	类型	默认值
name	标识，缺省用注册顺序索引	string \| number	''
icon	图标名（eb-icon），自定义选中态用 #icon 插槽	string	''
dot	红点提醒（优先于 badge）	boolean	false
badge	角标内容	string \| number	''
disabled	禁用切换	boolean	false

Tabbar Events

参数	说明	类型	默认值
change	激活项变化	(name) => void	—
update:modelValue	v-model 同步	(name) => void	—

TabbarItem Slots

参数	说明	类型	默认值
icon	自定义图标，支持选中态切换	{ active }	icon 属性
default	文字标签	—	—

Tabbar 底部标签栏 ​

基础用法 ​

图标与选中态 ​

API ​