Tabs 标签页

介绍

标签页组件，用于在不同的内容区域之间进行切换。

导入

import Tabs from '@/components/nav/Tabs.vue';
import TabsPage from '@/components/nav/TabsPage.vue';

使用方法

基础用法

<template>
  <Tabs
    :tabs="[
      { text: '标签页1' },
      { text: '标签页2' },
      { text: '标签页3' },
    ]"
    v-model:currentIndex="tabIndex"
  />
</template>

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

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

自定义标签宽度

设置 autoItemWidth=false 禁用标签自动大小，此时可通过 defaultItemWidth 设置所有标签宽度，也可通过条目的 width 单独设置宽度。

<template>
  <Tabs
    :tabs="[
      { text: '正常标签页' },
      { text: '自定义指示器宽度', width: 300, indicatorWidth: 300 },
      { text: '标签页3 宽度400', width: 400 },
      { text: '标签页4 宽度200', width: 200 },
    ]"
    :autoItemWidth="false"
    :defaultItemWidth="200"
    v-model:currentIndex="tabIndex"
  />
</template>

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

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

标签栏滚动

设置 autoItemWidth=false 禁用标签自动大小，当标签宽度超出父级时，标签栏可以在水平方向上滚动，切换时会自动将当前标签居中。

<template>
  <Tabs
    :tabs="[
      { text: '标签页1' },
      { text: '标签页2' },
      { text: '标签页3' },
      { text: '标签页4' },
      { text: '标签页5' },
      { text: '标签页6' },
      { text: '标签页7' },
      { text: '标签页8' },
      { text: '标签页9' },
      { text: '标签页10' },
    ]"
    :autoItemWidth="false"
    :defaultItemWidth="200"
    v-model:currentIndex="tabIndex"
  />
</template>

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

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

禁用标签

设置 disabled 属性即可禁用标签。

<template>
  <Tabs
    :tabs="[
      { text: '标签页1' },
      { text: '标签页2' },
      { text: '标签页3', disabled: true },
      { text: '标签页4', disabled: true },
      { text: '标签页5' },
    ]"
    v-model:currentIndex="tabIndex"
  />
</template>

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

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

带小红点

通过 badgeProps 属性可以在标签上添加徽标。

<template>
  <Tabs
    :tabs="[
      { text: '标签页1' },
      { text: '带小红点', badgeProps: { content: '', offset: { x: -8, y: 2 } } },
      { text: '带数字红点', badgeProps: { content: 423, maxCount: 99, offset: { x: 8, y: 2 } } },
    ]"
    v-model:currentIndex="tabIndex"
  />
</template>

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

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

自定义渲染

通过 tab 插槽可以自定义标签的内容和样式。

<template>
  <Tabs
    :tabs="[
      { text: '标签页1' },
      { text: '标签页2' },
    ]"
    v-model:currentIndex="tabIndex"
  >
    <template #tab="{ tab, active, index, width }">
      <FlexRow center :width="width">
        <Icon icon="warning" />
        <Text :color="active ? 'danger' : 'success'">{{tab.text}}</Text>
      </FlexRow>
    </template>
  </Tabs>
</template>

<script setup>
import { ref } from 'vue';
import Tabs from '@/components/nav/Tabs.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Icon from '@/components/basic/Icon.vue';
import Text from '@/components/basic/Text.vue';

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

标签页内容组件

使用 TabsPage 组件可以方便地管理标签页内容的显示与切换。

<template>
  <TabsPage
    :tabs="[
      { text: '标签页0' },
      { text: '标签页1', badgeProps: { offset: { x: 8, y: 2 } } },
      { text: '标签页2', badgeProps: { content: 423, maxCount: 99, offset: { x: 8, y: 2 } } },
    ]"
  >
    <template #page="{ key }">
      <FlexCol height="400rpx" :flex="1" center>
        <Text>标签页内容{{ key }}</Text>
      </FlexCol>
    </template>
  </TabsPage>
</template>

<script setup>
import TabsPage from '@/components/nav/TabsPage.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import Text from '@/components/basic/Text.vue';
</script>

API 参考

Tabs

Props

名称	说明	类型	必填	默认值
tabs	标签数据	TabsItemData[]	是	[]
v-model:currentIndex	当前选中的标签位置	number	否	0
height	整个组件的高度	number	否	90
width	整个组件的宽度	number	否	750
autoItemWidth	是否自动根据容器宽度调整标签宽度	boolean	否	true
indicatorAnim	指示器切换标签时是否有动画效果	boolean	否	true
autoScroll	是否在用户切换标签后自动滚动至当前选中的条目	boolean	否	true
defaultItemWidth	标签宽度，在 autoItemWidth 为 false 时有效	number	否	120
defaultIndicatorWidth	默认的指示器宽度	number	否	100
itemStyle	标签自定义样式	object	否	{}
textColor	标签正常状态的文字颜色	string	否	'text.title'
disableTextColor	标签禁用状态的文字颜色	string	否	'grey'
textStyle	标签正常状态的文字样式	object	否	{}
activeTextColor	标签激活状态的文字颜色	string	否	'primary'
activeTextStyle	标签激活状态的文字样式	object	否	{}
underlayColor	标签按下颜色	string	否	'pressed.white'
indicatorStyle	指示器自定义样式	object	否	{}
showIndicator	显示指示器	boolean	否	true
innerStyle	组件内部容器样式	object	否	{}

Events

名称	说明	参数
update:currentIndex	标签切换时触发	currentIndex: number

Slots

名称	说明	参数
tab	自定义标签内容	{ tab: TabsItemData, index: number, width: number, active: boolean, onClick: () => void }

TabsItemData

名称	说明	类型	必填	默认值
text	标签显示文字	string	是	-
data	自定义数据	any	否	undefined
visible	是否显示	boolean	否	true
disabled	是否禁用选择	boolean	否	false
badgeProps	红点标记的自定义属性，同 Badge 组件	object	否	{}
width	标签宽度	number	否	undefined
indicatorWidth	指示器宽度	number	否	undefined
lazy	懒加载，仅在TabsPage组件中有效	boolean	否	undefined

主题变量

名称	类型	默认值	说明
TabsDefaultHeight	number	90	标签栏默认高度
TabsDefaultWidth	number	750	标签栏默认宽度
TabsDefaultItemWidth	number	120	标签默认宽度
TabsDefaultIndicatorWidth	number	100	指示器默认宽度
TabsTextColor	string	'text.title'	标签正常状态文字颜色
TabsDisableTextColor	string	'grey'	标签禁用状态文字颜色
TabsActiveTextColor	string	'primary'	标签激活状态文字颜色
TabsUnderlayColor	string	'pressed.white'	标签按下颜色
TabsItemPaddingHorizontal	number	10	标签水平内边距