TnSubsection 分段器

该组件一般用于从多个选项中选择一个选项

组件位置

nodeuni_modules

typescript

import TnSubsection from '@tuniao/tnui-vue3-uniapp/components/subsection/src/subsection.vue'
import TnSubsectionItem from '@tuniao/tnui-vue3-uniapp/components/subsection/src/subsection-item.vue'

import TnSubsection from '@tuniao/tnui-vue3-uniapp/components/subsection/src/subsection.vue'
import TnSubsectionItem from '@tuniao/tnui-vue3-uniapp/components/subsection/src/subsection-item.vue'

typescript

import TnSubsection from '@/uni_modules/tuniaoui-vue3/components/subsection/src/subsection.vue'
import TnSubsectionItem from '@/uni_modules/tuniaoui-vue3/components/subsection/src/subsection-item.vue'

import TnSubsection from '@/uni_modules/tuniaoui-vue3/components/subsection/src/subsection.vue'
import TnSubsectionItem from '@/uni_modules/tuniaoui-vue3/components/subsection/src/subsection-item.vue'

平台差异说明

App(vue)	H5	微信小程序	支付宝小程序	...
√	√	√	√	适配中

基础使用

通过v-model绑定当前选中item的索引值，默认选中第一个item
在TnSubsection中使用TnSubsectionItem组件，TnSubsectionItem组件的title属性表示item的文本内容

vue

<script lang="ts" setup>
import { ref } from 'vue'

const subsectionValue = ref<number>(0)
</script>

<template>
  <TnSubsection v-model="subsectionValue">
    <TnSubsectionItem title="全部" />
    <TnSubsectionItem title="待发货" />
    <TnSubsectionItem title="待收货" />
    <TnSubsectionItem title="待评价" />
    <TnSubsectionItem title="已完成" />
  </TnSubsection>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const subsectionValue = ref<number>(0)
</script>

<template>
  <TnSubsection v-model="subsectionValue">
    <TnSubsectionItem title="全部" />
    <TnSubsectionItem title="待发货" />
    <TnSubsectionItem title="待收货" />
    <TnSubsectionItem title="待评价" />
    <TnSubsectionItem title="已完成" />
  </TnSubsection>
</template>

设置选中颜色

通过active-color设置选中item的颜色，TnSubsectionItem中设置的active-color会覆盖TnSubsection中设置的active-color，可以传递hex、rgb、rgba和图鸟内置颜色的值文本颜色

vue

<template>
  <TnSubsection v-model="subsectionValue" active-color="tn-blue">
    <TnSubsectionItem title="全部" />
    <TnSubsectionItem title="待发货" />
    <TnSubsectionItem active-color="tn-green" title="待收货" />
    <TnSubsectionItem title="待评价" />
    <TnSubsectionItem title="已完成" />
  </TnSubsection>
</template>

<template>
  <TnSubsection v-model="subsectionValue" active-color="tn-blue">
    <TnSubsectionItem title="全部" />
    <TnSubsectionItem title="待发货" />
    <TnSubsectionItem active-color="tn-green" title="待收货" />
    <TnSubsectionItem title="待评价" />
    <TnSubsectionItem title="已完成" />
  </TnSubsection>
</template>

分段器模式

通过mode属性设置分段器的模式

默认模式 - `default`

在该模式下active-color属性设置的是滑块的背景颜色

vue

<template>
  <TnSubsection v-model="subsectionValue">
    <TnSubsectionItem title="全部" />
    <TnSubsectionItem title="待发货" />
    <TnSubsectionItem title="待收货" />
    <TnSubsectionItem title="待评价" />
    <TnSubsectionItem title="已完成" />
  </TnSubsection>
</template>

<template>
  <TnSubsection v-model="subsectionValue">
    <TnSubsectionItem title="全部" />
    <TnSubsectionItem title="待发货" />
    <TnSubsectionItem title="待收货" />
    <TnSubsectionItem title="待评价" />
    <TnSubsectionItem title="已完成" />
  </TnSubsection>
</template>

按钮模式 - `button`

在改模式下active-color属性设置被选中后字体的颜色

vue

<template>
  <TnSubsection v-model="subsectionValue" mode="button">
    <TnSubsectionItem title="全部" />
    <TnSubsectionItem title="待发货" />
    <TnSubsectionItem title="待收货" />
    <TnSubsectionItem title="待评价" />
    <TnSubsectionItem title="已完成" />
  </TnSubsection>
</template>

<template>
  <TnSubsection v-model="subsectionValue" mode="button">
    <TnSubsectionItem title="全部" />
    <TnSubsectionItem title="待发货" />
    <TnSubsectionItem title="待收货" />
    <TnSubsectionItem title="待评价" />
    <TnSubsectionItem title="已完成" />
  </TnSubsection>
</template>

API

Subsection Props

属性名	说明	类型	默认值	可选值
v-model / model-value	分段器 item 绑定的索引值	Number	0	-
mode	分段器模式，详细说明可以查看上方说明	String	`default`	`button`
size	分段器尺寸，可以传递默认值`sm`、`lg`、`xl`，也可以传递指定的单位值设置`font-size`的有效值	String	-	`sm` \ `lg` \ `xl`
radius	分段器圆角的值，默认单位为 rpx，可以传入带单位的尺寸值	String	8	-
disabled	是否禁止选择	Boolean	`false`	`true`
active-color	激活后的颜色，可以使用图鸟内置的背景色、hex、rgb、rgba	String	-	-

Subsection Emits

事件名	说明	类型
change	分段器选择发生修改时触发	`(index: number) => void`

SubsectionItem Props

属性名	说明	类型	默认值	可选值
title	文本内容	String	-	-
disabled	是否禁止选择	Boolean	`false`	`true`
active-color	激活后的颜色，可以使用图鸟内置的背景色、hex、rgb、rgba	String	-	-

SubsectionItem Emits

事件名	说明	类型
click	点击事件	`(title: string) => void`

SubsectionItem Slots

插槽名	说明
default	分段器自定义内容

TnSubsection 分段器 ​

组件位置 ​

平台差异说明 ​

基础使用 ​

设置选中颜色 ​

分段器模式 ​

默认模式 - default ​

按钮模式 - button ​

API ​

Subsection Props ​

Subsection Emits ​

SubsectionItem Props ​

SubsectionItem Emits ​

SubsectionItem Slots ​