TabBar 标签栏

介绍

标签栏，用于在不同功能模块之间进行切换，通常用于主页各个模块的底部切换。

导入

import TabBar from '@/components/nav/TabBar.vue';
import TabBarItem from '@/components/nav/TabBarItem.vue';

使用方法

基础用法

通过 v-model:selectedTabIndex 绑定选中的标签索引。

<template>
  <TabBar
    v-model:selectedTabIndex="tabIndex"
  >
    <TabBarItem icon="home" text="标签1" />
    <TabBarItem icon="data-view" text="标签2" />
    <TabBarItem icon="image-text" text="标签3" />
    <TabBarItem icon="user" text="标签4" />
  </TabBar>
</template>

<script setup>
import { ref } from 'vue';
import TabBar from '@/components/nav/TabBar.vue';
import TabBarItem from '@/components/nav/TabBarItem.vue';

const tabIndex = ref(0);
</script>

徽标提示

通过 badge 属性可以设置徽标数量。

<template>
  <TabBar
    v-model:selectedTabIndex="tabIndex"
  >
    <TabBarItem icon="home" text="标签1" />
    <TabBarItem icon="data-view" text="标签2" :badge="-1" />
    <TabBarItem icon="image-text" text="标签3" :badge="5" />
    <TabBarItem icon="user" text="标签4" :badge="100" />
  </TabBar>
</template>

自定义图标

通过 icon 插槽可以自定义图标内容。

<template>
  <TabBar
    v-model:selectedTabIndex="tabIndex"
  >
    <TabBarItem text="标签1">
      <template #icon="{ selected }">
        <Image v-if="selected" :src="test1" :innerStyle="customIcon" />
        <Image v-else :src="test11" :innerStyle="customIcon" />
      </template>
    </TabBarItem>
    <TabBarItem text="标签2">
      <template #icon>
        <Image :src="test2" :innerStyle="customIcon" />
      </template>
    </TabBarItem>
    <TabBarItem icon="user" text="标签4" />
  </TabBar>
</template>

<script setup>
import { ref } from 'vue';
import Image from '@/components/basic/Image.vue';

const customIcon = {
  width: '60rpx',
  height: '60rpx',
  backgroundColor: '#fff',
};
</script>

自定义颜色

通过 activeColor 和 inactiveColor 属性可以自定义选中和未选中的颜色。

<template>
  <TabBar
    v-model:selectedTabIndex="tabIndex"
    activeColor="danger"
    inactiveColor="success"
  >
    <TabBarItem icon="home" text="标签1" />
    <TabBarItem icon="data-view" text="标签2" />
    <TabBarItem icon="image-text" text="标签3" />
    <TabBarItem icon="user" text="标签4" />
  </TabBar>
</template>

凸起标签

通过 hump 属性可以设置凸起标签，humpHeight 属性可以设置凸起高度。

<template>
  <TabBar
    v-model:selectedTabIndex="tabIndex"
    activeColor="danger"
    inactiveColor="success"
  >
    <TabBarItem icon="home" text="标签1" />
    <TabBarItem icon="data-view" text="标签2" />
    <TabBarItem name="hump"
      icon="good"
      text="凸起标签"
      hump
      :humpHeight="[ 110, 55 ]"
    >
      <template #icon="{ selected, iconProps }">
        <Image v-if="selected" :src="test4" :innerStyle="humpIcon" />
        <Icon v-else v-bind="iconProps" />
      </template>
    </TabBarItem>
    <TabBarItem icon="image-text" text="标签3" />
    <TabBarItem icon="user" text="标签4" />
  </TabBar>
</template>

<script setup>
import Icon from '@/components/basic/Icon.vue';

const humpIcon = {
  width: '120rpx',
  height: '120rpx',
};
</script>

自定义背景

通过 innerStyle 属性可以自定义背景样式。

<template>
  <TabBar
    v-model:selectedTabIndex="tabIndex"
    activeColor="#f33"
    inactiveColor="#fff"
    :innerStyle="{ backgroundColor: '#9bbbd4' }"
  >
    <TabBarItem icon="home" text="标签1" />
    <TabBarItem icon="data-view" text="标签2" />
    <TabBarItem icon="image-text" text="标签3" />
    <TabBarItem icon="user" text="标签4" />
  </TabBar>
</template>

API 参考

TabBar

标签栏组件。

Props

名称	说明	类型	必填	默认值
innerStyle	自定义外层样式	ViewStyle	否	-
activeColor	选中颜色	string	否	'primary'
inactiveColor	未选中样式	string	否	'text.second'
textStyle	标签文字样式	TextStyle	否	-
v-model:selectedTabIndex	选中的标签索引	number	否	0
xbarSpace	预留底部安全区间距	boolean	否	false
fixed	是否固定在底部	boolean	否	false

Events

名称	说明	参数
update:selectedTabIndex	选中标签索引变更事件	index: number

Slots

名称	说明
default	默认插槽，用于放置TabBarItem组件
background	背景插槽，用于自定义背景内容

TabBarItem

标签栏项目组件。

Props

名称	说明	类型	必填	默认值
icon	图标名称	string	否	-
text	标签文字	string	否	-
badge	徽标数量，-1表示小红点	number	否	-
disabled	是否禁用	boolean	否	false
name	标签名称	string	否	-
hump	是否为凸起标签	boolean	否	false
humpHeight	凸起高度，[宽度, 高度]	[number, number]	否	-

Slots

名称	说明
icon	图标插槽，提供selected和iconProps参数
text	文字插槽

主题变量

名称	类型	默认值	说明
TabBarBackgroundColor	string	'white'	-
TabBarBorderTopWidth	number	2	-
TabBarBorderTopColor	string	'border.light'	-
TabBarPaddingVertical	number	20	-
TabBarPaddingHorizontal	number	0	-