t-tabs

Tabs 标签页

组件介绍

t-tabs 用于组织和管理多个页面的切换，支持横向滚动、自定义滑块样式和右侧图标。

平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

基础用法

基础用法参考 demo/tabs/tabs.uvue，通过 t-tabs-item 子组件定义标签项。

<!-- 基础标签导航 -->
<t-tabs v-model="current">
  <t-tabs-item title="标签1" :value="0"></t-tabs-item>
  <t-tabs-item title="标签2" :value="1"></t-tabs-item>
  <t-tabs-item title="标签3" :value="2"></t-tabs-item>
</t-tabs>

<!-- 带右侧图标 -->
<t-tabs v-model="current" rightIcon="arrow-down">
  <t-tabs-item title="全部" :value="0"></t-tabs-item>
  <t-tabs-item title="待处理" :value="1" :badge="true" :badgeAttrs="{text: '5'}"></t-tabs-item>
  <t-tabs-item title="已完成" :value="2"></t-tabs-item>
</t-tabs>

<!-- 可滚动标签 -->
<t-tabs v-model="current" :scrollable="true">
  <t-tabs-item v-for="i in 10" :title="'标签' + i" :value="i - 1"></t-tabs-item>
</t-tabs>

Props

属性名	说明	类型	默认值
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型，可选 info、primary、error、warning、success	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	'normal'
size	组件尺寸，可选 large、medium、small、mini	string	'medium'
barClass	滑块的样式，对应外部类 bar-class	string	''
current	当前滑块所在的索引	number	1
scrollable	是否可滚动	boolean	false
rightIcon	右侧图标名称	string	''
rightIconClass	右侧图标的样式，对应外部类 right-icon-class	string	''

Events

事件名	说明	回调参数
change	当标签切换时触发	value: number
click	点击时触发	-
transitionend	动画结束时触发	-
initFinished	组件初始化完成时触发，返回组件节点信息	-
touchstart	触摸开始时触发	-
touchend	触摸结束时触发	-
touchmove	触摸移动时触发	-
touchcancel	触摸取消时触发	-

外部类

类名	说明
bar-class	滑块样式
right-icon-class	右侧图标样式

Slots

插槽名	说明
default	默认插槽，放置 t-tabs-item 子组件
right	右侧内容插槽，默认显示右侧图标
bar	滑块内容插槽，可自定义滑块样式