Select 选择器

底部弹出单选、多选或操作列表，适合从一组项目中选择。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

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

基础用法

<!-- 选择完成或关闭时由页面更新 showSelect -->
<fui-select :show="showSelect" :options="options" @confirm="handleSelect"
  @close="showSelect = false" />

在页面中声明 showSelect、options 和 handleSelect。选项可使用对象，其中 text 为显示文本，src 为可选图标地址，字段名可通过 textKey、srcKey 调整。

属性

尺寸单位为 rpx。

属性	类型	说明	官网默认值
show	Boolean	是否显示	false
options	Array	选择项数据	[]
textKey	String	选项文本字段名	text
srcKey	String	选项图片字段名	src
height	Number / String	选项区域高度	600
type	String	select 选择模式或 list 列表模式	select
radius	Number / String	顶部圆角	24
headerBackground	String	头部背景色	#fff
title	String	标题	请选择
titleSize	Number / String	标题字号	32
titleColor	String	标题颜色	#181818
fontWeight	Number / String	标题字重	400
multiple	Boolean	select 模式是否多选	false
background	String	内容背景色	#fff
padding	Array	选项内边距	['32rpx', '32rpx']
checkboxColor	String	选中颜色	#465CFF
borderColor	String	未选中边框色	#ccc
isCheckMark	Boolean	是否只显示对勾	false
checkmarkColor	String	对勾颜色	#fff
isReverse	Boolean	是否颠倒选择框与内容位置	false
splitLine	Boolean	是否显示项间分隔线	true
lineColor	String	分隔线颜色	#EEEEEE
bottomLeft	Number / String	项分隔线左侧偏移	32
arrowColor	String	list 模式箭头颜色	#B2B2B2
highlight	Boolean	是否显示点击反馈	true
iconWidth	Number / String	选项图片宽高	48
iconBgColor	String	选项图片背景色	rgba(0,0,0,0)
iconMode	String	图片缩放裁剪模式	widthFix
size	Number / String	选项字号	30
color	String	选项文字颜色	#181818
btnText	String	select 模式确认按钮文字	确定
btnBackground	String	确认按钮背景色	#465CFF
btnColor	String	确认按钮文字颜色	#fff
maskBackground	String	遮罩颜色	rgba(0,0,0,.6)
maskClosable	Boolean	点击遮罩是否触发 close	false
zIndex	Number / String	层级，nvue 不支持	1001
safeArea	Boolean	是否适配底部安全区	true

事件

事件	说明	回调参数
click	list 模式点击选项	{ index, options }
change	select 模式选项变化	单选 { index, options }，多选 { options }
confirm	select 模式点击确认	单选 { index, options }，多选 { options }
close	点击关闭图标或可关闭的遮罩	{}

插槽和平台说明

默认插槽可替换头部，list 插槽位于选择列表下方。非 nvue 的默认选中和按钮颜色可通过 --fui-color-primary 配置；nvue 的层级受元素顺序影响。

插槽

插槽	说明
default	替换选择器头部内容
list	列表区域自定义内容