简介

fs-radio-picker 是一个功能强大的弹出式选择组件，支持单选和多选模式，提供搜索功能和手动输入功能，适用于各种选择场景。

使用场景

• 需要从大量选项中选择一个或多个时
• 需要搜索功能来快速定位选项
• 移动端友好的选择体验
• 支持单选和多选两种模式
• 需要用户自定义输入选项值
• 不同的 radio 显示样式需求（circle/list/card）

代码演示

选择模式（mode 属性）

Radio 类型（radioType 属性）

---

API

属性

属性	说明	类型	可选值	默认值
show	是否显示选择器	boolean	true/false	false
title	选择器标题	string	—	'选择器'
options	选项数据	array	—	[]
value	当前选中的值	string/array	—	null
mode	选择模式	string	single/multiple	single
showSearch	是否显示搜索框	boolean	true/false	true
searchPlaceholder	搜索框占位符	string	—	'搜索'
showSelectAll	是否显示全选按钮（仅多选模式有效）	boolean	true/false	false
confirmButton	确认按钮配置	object	—	null
cancelButton	取消按钮配置	object	—	null
selectedCountText	选中项数量显示文字	string	—	'已选'
radioType	radio 的类型	string	circle/list/card	circle
overlay	遮罩层配置	object	—	{}
minHeight	弹出层最小高度	string	—	''
allowDeselect	单选模式下是否支持反选	boolean	true/false	true

Options 属性说明

属性	说明	类型	是否必填	默认值
value	选项的唯一标识值	string	是	—
label	选项显示的文字	string	是	—
handInput	是否为手动输入项	boolean	否	false

属性	说明	类型	可选值	默认值
text	按钮显示文字	string	—	—
type	按钮类型	string	primary/normal/danger	primary
style	自定义内联样式	string	—	—

遮罩层配置说明

属性	说明	类型	默认值
zIndex	遮罩层级	number	12000
backgroundColor	遮罩背景色	string	'rgba(0,0,0,0.7)'
duration	动画时长(ms)	number	300
preventScrollThrough	是否阻止滚动穿透	boolean	true
closeOnOverlayClick	点击遮罩是否关闭	boolean	true
customStyle	自定义样式	string	''
customClass	自定义样式类名	string	''

事件

事件名	说明	回调参数
confirm	确认选择时触发	{value: 选中的值, handInputValues: 手动输入值对象, confirmButton: 按钮配置, selectedIndices: 选中项的索引}
cancel	取消选择时触发	cancelButton 按钮配置对象
close	关闭选择器时触发	—
overlayClick	点击遮罩层时触发	—

---

设计说明

基础架构

• 基于 fs-popup 组件实现弹出效果，支持标题和搜索框
• 使用 fs-radio 组件实现选择功能，支持单选和多选模式
• 支持搜索功能，可快速筛选选项
• 底部显示已选数量和操作按钮
• 遵循移动端交互规范

选择模式

• 单选模式（single）：value 为字符串，点击选项后直接选中并关闭，不显示底部操作栏
• 多选模式（multiple）：value 为数组，选择时切换选中状态，显示底部操作栏进行确认

Radio 类型

• circle 类型：传统圆形选择框，适用于常规选择场景
• list 类型：列表样式，选中时显示对号，适用于列表选择场景
• card 类型：卡片样式（新样式），支持主题淡色自适应渲染（选中态主题淡色背景加主题色边框），支持手动输入框完美塞入卡片内部。

全选功能

• 仅在多选模式下有效，通过 showSelectAll 属性控制显示
• 支持智能状态切换：未全选时显示"全选"，已全选时显示"取消全选"
• 与搜索功能兼容：搜索后全选仅对当前显示的选项生效

手动输入功能

• 当选项设置 handInput: true 时，显示输入框供用户输入自定义值
• 手动输入的值通过 handInputValues 对象回传，格式为 {value: input}
• 支持与普通选项混合使用，提供更灵活的选择体验

搜索功能

• 集成 fs-popup 的搜索框功能
• 支持实时搜索过滤选项
• 搜索范围为选项的 label 字段

交互体验

• 单选模式下点击即选中，提供快速选择体验
• 多选模式下提供确认/取消操作，避免误操作
• 支持取消按钮的显示/隐藏控制
• 手动输入项支持点击防冒泡，避免意外触发选择

---

预览

打开预览