t-subsection

Subsection 分段器

组件介绍

t-subsection 是分段器组件，用于多个选项卡切换，常用于订单状态切换、菜单切换等场景。

平台兼容

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

基础用法

基础用法参考 demo/subsection/subsection.uvue，配合 t-subsection-item 使用。

<template>
  <t-subsection v-model="current" @change="onChange">
    <t-subsection-item title="全部" :value="0"></t-subsection-item>
    <t-subsection-item title="待付款" :value="1"></t-subsection-item>
    <t-subsection-item title="待发货" :value="2"></t-subsection-item>
    <t-subsection-item title="已完成" :value="3"></t-subsection-item>
  </t-subsection>
</template>

<script setup>
const current = ref(0)

function onChange(index: number) {
  console.log('切换到：', index)
}
</script>

Props

属性名	说明	类型	默认值
current	当前激活的选项索引	number	0
barClass	移动区域的样式	string	-
path	点击组件后跳转的页面路径	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题	string	'normal'
size	组件尺寸	string	'medium'

Events

事件名	说明	回调参数
change	当选项卡改变时触发	index: number

Slots

插槽名	说明
default	默认插槽，放置 t-subsection-item 子组件