t-tabs-item

TabsItem 标签页项

组件介绍

t-tabs-item 是标签导航组件的子组件，用于定义单个标签项的内容，支持标题、徽标等配置。

平台兼容

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

基础用法

基础用法参考 demo/tabs/tabs.uvue，作为 t-tabs 的子组件使用。

<t-tabs v-model="current">
  <t-tabs-item title="标签1" :value="0"></t-tabs-item>
  <t-tabs-item title="标签2" :value="1" :badge="true" :badgeAttrs="{text: '5'}"></t-tabs-item>
  <t-tabs-item title="标签3" :value="2"></t-tabs-item>
</t-tabs>

<!-- 自定义内容 -->
<t-tabs v-model="current">
  <t-tabs-item :value="0">
    <template #default>
      <text class="c-primary">自定义内容</text>
    </template>
  </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'
title	标题文本	string	''
titleClass	文本样式，对应外部类 title-class	any	''
value	标签对应的值，一般后端需要	number	0
badge	是否显示徽标	boolean	true
badgeAttrs	徽标组件的属性配置，支持 t-badge 组件的所有属性	UTSJSONObject	{}

Events

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

外部类

类名	说明
title-class	标题文本样式

Slots

插槽名	说明
default	默认插槽，可自定义标签内容