# Subsection 分段器 v1.2.6

该分段器一般用于用户从几个选项中选择某一个的场景

# 平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
√	√	√	√	√	√	√

# 示例

# 基本用法

通过 items 数组参数传递分段的选项，数组元素可为字符串，或者通过keyField参数传入对象(默认为 name)
通过 v-model 指定初始化时激活的选项

<template>
  <pi-subsection v-model="current" :items="items" @change="handleChangeItem" />
</template>

<script>
export default {
  name: 'Subsection',
  data() {
    return {
      items: ['到店吃', '精选', '次日自提'],
      // 或者如下，也可以配置keyField参数修改对象键值
      // items: [{name: '到店吃'}, {name: '精选'}, {name: '次日自提'}],
      current: 1
    }
  },
  methods: {
    handleChangeItem(index) {
      console.log('切换到第' + index + '个')
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 模式选择

通过mode设置分段器的模式

值为button时为按钮类型
值为subsection时为分段器形式

<pi-subsection v-model="current" :items="items" mode="subsection" />

# 更换主题

通过activeColor配置激活选项的文字颜色
通过inactiveColor配置未激活选项的文字颜色
通过bgColor配置背景颜色，mode 为 button 时有效（默认 '#eeeeef' ）

<pi-subsection active-color="#DC6CBC" inactive-color="#f9ae3d" bg-color="#5a7dff" />

# 默认位置

通过value配置激活项

<pi-subsection :value="2" :items="items" active-color="#f9ae3d" />

# 基础圆角模式

通过round配置是否开启圆角
设置模式mode为分段器 subsection

<pi-subsection v-model="current" :items="items" mode="subsection" round />

# 按钮圆角模式

通过round配置是否开启圆角

<pi-subsection v-model="current" :items="items" round />

# 自定义样式

可通过custom-class, custom-style 设置分段器样式

<pi-subsection custom-class="className" :custom-style="{ padding: '0 24rpx' }" />

# API

# Props

名称	描述	类型	必选	默认值
value/v-model	初始化时默认选中的选项索引值	`Number`	`false`	0
customStyle	自定义样式，对象形式	`Object`	`false`	{}
customClass	自定义样式类，字符串形式	`String`	`false`	''
items	选项的数组，形式见上方"基本用法"	`Array`	`true`	[]
activeColor	激活时的颜色	`String`	`false`	#5a7dff
inactiveColor	未激活时的颜色	`String`	`false`	#303133
mode	模式选择，见上方"模式选择"说明	`String`	`false`	button
round	是否开启圆角	`Boolean`	`false`	false
fontSize	字体大小，单位 rpx	`String`/`Number`	`false`	24
bold	激活选项的字体是否加粗	`Boolean`	`false`	true
bgColor	组件背景颜色，`mode`为`button`时有效	`String`	`false`	#eeeeef
keyField	从`items`元素对象中读取的键名	`String`	`false`	name

# Events

方法名称	说明	参数
change	分段器选项发生改变时触发	index：选项的 index 索引值，从 0 开始

← Tabs 标签栏 Gap 间隔 →