FirstUI UNI版

Select 选择器 VIP专属

概述

Select 选择器，用于弹出一个底部菜单给用户选择操作，可单选或多选。

# 支持平台

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

温馨提示

  • 组件内部使用了 fui-icon（字体图标）组件 和 fui-list-cell（列表）组件，非 easycom 组件模式下需要手动引入组件（打开组件内部注释的引入内容，引入路径按实际调整）。

  • 一般来说我们会通过 z-index + position 来进行层级的设置，但是 weex （Nvue）不支持 z-index 设置层级关系，默认越靠后的元素层级越高。

# 引入

以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiSelect from "@/components/firstui/fui-select/fui-select.vue"
export default {
	components:{
		fuiSelect
	}
}
1
2
3
4
5
6
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

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

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

# 代码演示

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

通过 show 属性控制显示隐藏组件，options 属性设置组件数据，title 属性设置标题。

<!--通过按钮打开组件-->
<fui-button type="gray" width="400rpx" height="84rpx" text="单选" bold @click="btnClick"></fui-button>

<fui-select :show="show" :options="items"  title="请选择平台" @confirm="onConfirm" @close="onClose"></fui-select>
1
2
3
4
data() {
	return {
		//数据格式一
		items: [{
			text: 'First UI（App-vue）',
			src: '/static/images/common/logo.png'
		}, {
			text: 'First UI（App-Nvue）',
			src: '/static/images/common/logo.png'
		}, {
			text: 'First UI（微信小程序）',
			src: '/static/images/common/logo.png'
		}, {
			text: 'First UI（支付宝小程序）',
			src: '/static/images/common/logo.png'
		}, {
			text: 'First UI（百度小程序）',
			src: '/static/images/common/logo.png'
		}, {
			text: 'First UI（字节小程序）',
			src: '/static/images/common/logo.png'
		}, {
			text: 'First UI（QQ小程序）',
			src: '/static/images/common/logo.png'
		}, {
			text: 'First UI（H5）',
			src: '/static/images/common/icon_tabbar.png'
		}],
		show: false
	}
},
methods: {
	btnClick() {
		this.show = true;
	},
	//仅type=select时有效，返回选中的值
	onConfirm(e) {
		console.log(e)
		this.onClose()
	},
	//关闭组件
	onClose() {
		this.show = false
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
多项选择

通过 show 属性控制组件显示隐藏，options 属性设置数据，title 属性设置标题，multiple 属性设置是否为多选，isReverse 属性设置选择框与内容是否次序颠倒，checkboxColor 属性设置选择框选中后的颜色，btnBackground 属性设置确定按钮背景色，btnColor 属性设置确定按钮字体颜色，closeColor 属性设置关闭图标颜色。

<!--通过按钮打开组件-->
<fui-button type="gray" width="400rpx" height="84rpx" text="多选" bold @click="btnClick"></fui-button>

<fui-select :show="show" :options="items"  title="请选择银行" multiple isReverse checkboxColor="#FFC529" btnBackground="#FFC529" btnColor="#1A1D26" closeColor="#6D758A" @confirm="onConfirm" @close="onClose"></fui-select>
1
2
3
4
data() {
	return {
		//数据格式二
		items:['中国银行','中国建设银行','中国工商银行','中国农业银行','中国邮政储蓄银行'],
		show: false
	}
},
methods: {
	btnClick() {
		this.show = true;
	},
	//仅type=select时有效，返回选中的值
	onConfirm(e) {
		console.log(e)
		this.onClose()
	},
	//关闭组件
	onClose() {
		this.show = false
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# Slots

插槽名称 说明
default 用于替换header部分内容，自定义头部信息，高度尽量保持为98rpx

# Props

属性名 类型 说明 默认值 平台差异说明
show Boolean 是否显示 false -
options Array 选择数据，具体格式见下方说明 [ ] -
textKey V1.9.9+ String options 选择数据中text key 值 text -
srcKey V1.9.9+ String options 选择数据中src key 值 src -
height Number, String 选择器数据区域高度，单位rpx 600 -
type String 展示类型，可选值：select（选择）、list（列表） select -
radius Number, String 选择器上方左右圆角值，单位rpx 24 -
headerBackground String 头部背景色 #fff -
title String 标题文本 请选择 -
titleSize Number, String 标题字体大小，单位rpx 32 -
titleColor String 标题字体颜色 #181818 -
fontWeight Number, String 标题字体字重 400 -
multiple Boolean 是否为多项选择，type为select时有效 false -
background String 内容区域背景颜色 #fff -
padding Array item项padding值，[上，右，下，左] ['32rpx', '32rpx'] -
checkboxColor String 选择框选中后颜色 #465CFF 非Nvue端默认为空，可通过css变量(--fui-color-primary)来改变颜色
borderColor String 选择框未选中时边框颜色 #ccc -
isCheckMark Boolean 选择框是否仅展示对号，无边框背景 false -
checkmarkColor String 选择框对号颜色 #fff -
isReverse Boolean 选择框与内容是否颠倒排列 false -
splitLine Boolean item项之间是否需要分割线条 true -
lineColor String 所有线条颜色 #EEEEEE -
bottomLeft Number, String item线条距离左边偏移距离，单位rpx 32 -
arrowColor String 箭头颜色，type为list时有效 #B2B2B2 -
highlight Boolean item项点击是否有高亮效果 true -
iconWidth Number, String item项图片图标宽度，单位rpx，高度与宽度相等 48 -
iconBgColor V1.9.1+ String item项图片背景色 rgba(0,0,0,0) -
iconMode V1.9.1+ String item项图片裁剪、缩放的模式 widthFix -
size Number, String item项字体大小，单位rpx 30 -
color String item项字体颜色 #181818 -
btnText String 确定按钮文本，type为select时有效 确定 -
btnBackground String 确定按钮背景颜色，type为select时有效 #465CFF 非Nvue端默认为空，可通过css变量(--fui-color-primary)来改变颜色
btnColor String 确定按钮文本颜色 #fff -
maskBackground String 遮罩背景颜色 rgba(0,0,0,.6) -
maskClosable Boolean 点击遮罩是否可关闭选择器，为true时点击触发@close事件 false -
zIndex Number, String 选择器层级z-index值 1001 Nvue端无效，默认越靠后的元素层级越高
safeArea V1.5.0+ Boolean 是否适配底部安全区 true -
//options 数据格式说明

//数据格式一，字符串数组（当需要设置默认选中时，使用数据格式二）
options:['中国银行','中国建设银行','中国工商银行','中国农业银行','中国邮政储蓄银行']

//数据格式二，以下text（可通过textKey属性修改）、src（可通过srcKey属性修改）、checked、disabled为约定属性，其他属性可自行扩展
options:[{
	//item文本
	text: 'First UI（App-vue）',
	//item图标地址，可选
	src: '/static/images/common/logo.png',
	//自行扩展属性
	id:1,
	//自行扩展属性
	value:10001,
	//是否选中，可选
	checked:false,
	//是否禁用，可选 【V2.0.0+】
	disabled:false
}]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# Events

事件名 说明 回调参数
@click 点击item项时触发，仅type=list时有效 {
  index:点击项索引
  options:点击项数据
}
@confirm 点击确定按钮时触发，仅type=select时有效 单选时：
{
  index:选中项索引
  options:选中项数据
}
多选时:
{
  options:选中项数据
}
@close 点击背景（maskClosable=true时有效）或关闭图标时触发 -
// 特别说明，当type为select时:

//1、单选且未选择任何选项时，点击确定按钮返回值为：

{
	//索引为-1，表示未选择
	index:-1,
	options:''
}

//2、多选且未选择任何选项时，点击确定按钮返回值为：

{
	//options为空数组表示未选择任何选项
	options:[]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

示例预览

# 特别说明

该组件为付费组件，UNI-APP版VIP用户可免费使用 。

开通会员 (opens new window)

Last Updated: 8/18/2023, 5:05:05 PM

← Input 输入框 →