# SegmentedControl 分段器 V1.1.0+
概述
SegmentedControl 分段器，分段器由至少 2 个分段控件组成，用作不同视图的显示。
温馨提示
- 使用该组件 需要 同时引入
fui-types类型文件。
# 支持平台
目前开发小程序与H5推荐使用 FirstUI nvue版本 (opens new window)。
| 安卓系统版本 | 安卓uni-app | 安卓uniapp-x | iOS系统版本 | iOS uniapp | iOS uniapp-x | 小程序 | H5/Web |
|---|---|---|---|---|---|---|---|
| 5.0 | × | ✓ | 9.0 | × | × | × | ✓ |
# 引入
以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiSegmentedControl from "@/components/firstui/fui-segmented-control/fui-segmented-control.uvue"
export default {
components:{
fuiSegmentedControl
}
}
1
2
3
4
5
6
2
3
4
5
6
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。
First UI easycom配置请查看 快速上手。
如果不了解easycom，可先查看 官网文档 (opens new window)。
# 代码演示
部分示例演示，完整使用请参考示例程序以及文档API。
基础使用
通过 values 属性设置分段器数据。
<fui-segmented-control :values="values" @onclick="itemClick"></fui-segmented-control>
1
import { FuiSegmentedControlValueParam } from '@/components/firstui/fui-types/index.uts'
export default {
data() {
return {
values:[{
name:'segmented1'
},{
name:'segmented2'
}] as FuiSegmentedControlValueParam[]
}
},
methods: {
itemClick(e : FuiSegmentedControlValueParam) {
console.log(JSON.stringify(e))
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
调整选项卡数
通过 values 属性设置分段器数据。
<fui-segmented-control :values="values2" @onclick="itemClick"></fui-segmented-control>
1
import { FuiSegmentedControlValueParam } from '@/components/firstui/fui-types/index.uts'
export default {
data() {
return {
values2: [{
value: 1,
name: 'segmented1'
}, {
value: 2,
name: 'segmented2'
}, {
value: 3,
name: 'segmented3'
}] as FuiSegmentedControlValueParam[]
}
},
methods: {
itemClick(e : FuiSegmentedControlValueParam) {
console.log(JSON.stringify(e))
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# Slots
| 插槽名称 | 说明 |
|---|---|
| - | - |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| values | Array<FuiSegmentedControlValueParam> | 分段器列表数据，具体格式见下方详细说明 | [ ] | - |
| current | Number | 分段器初始选中项索引 | 0 | - |
| type | String | 分段器显示类型，可选值：button、text | button | - |
| color | String | 分段器颜色（边框颜色、未选中字体颜色、选中背景色） | #465CFF | - |
| activeColor | String | 分段器选中项字体颜色 | #fff | - |
| bold | Boolean | 分段器选中项字体是否加粗 | false | - |
| height | Number | 分段器高度，单位rpx | 64 | - |
| size | Number | 分段器字体大小，单位rpx | 28 | - |
| radius | Number | 分段器圆角值，单位rpx | 8 | - |
| disabled | Boolean | 是否禁用所有项，单项禁用在values中传入属性控制，详见下方values属性说明 | false | - |
| marginTop | Number | 分段器margin-top值，单位rpx | 0 | - |
| marginBottom | Number | 分段器margin-bottom值，单位rpx | 0 | - |
# FuiSegmentedControlValueParam
/**
* fui-segmented-control 分段器 组件props 属性 values 参数类型
* @description props 属性 values 参数类型
* @param {string} name {string} 分段器显示文本，必选
* @param {boolean} disabled {boolean} 是否禁用当前项，可选
* @param {number} value {number} 对应的值，可选
* @param {string} param {string} 自定义参数，可选
* @param {number} index {number} 当前点击项索引值，点击事件返回，无需传值，可选
*/
export type FuiSegmentedControlValueParam = {
name : string;
disabled ?: boolean;
value ?: number;
param ?: string;
index ?: number;
}
/*页面引入*/
import { FuiSegmentedControlValueParam } from '@/components/firstui/fui-types/index.uts'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Events
| 事件名 | 类型 | 说明 | 回调参数 |
|---|---|---|---|
| @onclick | (event: FuiSegmentedControlValueParam) => void | 分段器切换时触发 | FuiSegmentedControlValueParam |
# FuiSegmentedControlValueParam
同上。
SegmentedControl 分段器