# 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>
1
//values数据格式一
values: ['segmented1', 'segmented2']
1
2
不同数据格式

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

<fui-segmented-control :values="values"></fui-segmented-control>
1
//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]:当前索引对应分段器数据
}

示例预览

# 示例代码地址

FirstUISegmentedControl 分段器
Last Updated: 5/30/2024, 10:36:36 AM