# SegmentedControl 分段器

概述

SegmentedControl 分段器，分段器由至少 2 个分段控件组成，用作不同视图的显示。

# 支持平台

App-vue	App-Nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

# 引入

以下介绍两种常用的引入方式。

第一种：在页面中引用、注册

import fuiSegmentedControl from "@/components/firstui/fui-segmented-control/fui-segmented-control.vue"
export default {
	components:{
		fuiSegmentedControl
	}
}

1
2
3
4
5
6

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看快速上手。

如果不了解easycom，可先查看官网文档 (opens new window)。

# 代码演示

部分示例演示，完整使用请参考示例程序以及文档API。

基础使用

通过 values 属性设置分段器数据。

<fui-segmented-control :values="values"></fui-segmented-control>

//values数据格式一
values: ['segmented1', 'segmented2']

1
2

不同数据格式

通过 values 属性设置分段器数据。

<fui-segmented-control :values="values"></fui-segmented-control>

//values数据格式二，其中约定属性为name（必选），disabled（可选）。其他为自定义属性。
values2: [{
	id: 1,
	name: 'segmented1'
}, {
	id: 2,
	name: 'segmented2'
}, {
	id: 3,
	name: 'segmented3'
}]

1
2
3
4
5
6
7
8
9
10
11

# Slots

插槽名称	说明
-	-

# Props

属性名	类型	说明	默认值	平台差异说明
values	Array	分段器列表数据，具体格式见下方详细说明	[ ]	-
nameKey V2.4.0+	String	values数据中 name 值指定的key	name	-
disabledKey V2.4.0+	String	values数据中 disabled 值指定的key	disabled	-
current	Number	分段器初始选中项索引	0	-
type	String	分段器显示类型，可选值：button、text	button	-
color	String	分段器颜色（边框颜色、未选中字体颜色、选中背景色）	#465CFF	非Nvue端默认为空，可以通过css变量（--fui-color-primary）修改默认颜色值
activeColor	String	分段器选中项字体颜色	#fff	-
bold	Boolean	分段器选中项字体是否加粗	false	-
height	Number, String	分段器高度，单位rpx	64	-
size	Number, String	分段器字体大小，单位rpx	28	-
radius	Number, String	分段器圆角值，单位rpx	8	-
disabled	Boolean	是否禁用所有项，单项禁用在values中传入属性控制，详见下方values属性说明	false	-
marginTop	Number, String	分段器margin-top值，单位rpx	0	-
marginBottom	Number, String	分段器margin-bottom值，单位rpx	0	-

values数据格式详细说明

values 为Array类型，内部数据格式有两种类型.

//第一种数据格式Array<String>：
['segmented1', 'segmented2']

//第二种数据格式Array<Object>，约定属性如下，其他属性可自行定义传入：
 [{
	//分段器显示文本，key值可使用nameKey属性指定，必选
	name: 'segmented1',
	//是否禁用当前项，key值可使用disabledKey属性指定，可选
	disabled: false
}, {
	//分段器显示文本，必选
	name: 'segmented2',
	//是否禁用当前项，可选
	disabled: true
}]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# Events

事件名	说明	回调参数
@click	分段器切换时触发	{ index:索引 ...values[index]:当前索引对应分段器数据 }

示例预览

# 示例代码地址

SegmentedControl 分段器

← BubbleBox 气泡框 Tabbar 标签栏 →