简介

fs-radio-picker-m 是 fs-radio-picker 的模块化调用版本，通过 JavaScript 方法调用的方式使用单选多选器，无需在页面中声明组件，使用更加便捷。

使用方法

局部引入，在需要引入的页面或组件的 index.json 中配置：

"usingComponents": {
  "dialog-center": "ava-ui/fxui/DialogCenter/DialogCenter"
}

方法调用

import dialogSet from "../DialogCenter/DialogSet";
dialogSet.fsRadioPicker.show(options);

代码演示

基础用法

---

API

Options 参数

参数	说明	类型	可选值	默认值
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	circle
overlay	遮罩层配置	object	—	{}
allowDeselect	单选模式下是否支持反选	boolean	true/false	true
confirm	确认回调函数，回调参数包含	function	—	—
cancel	取消回调函数	function	—	—
close	关闭回调函数	function	—	—
overlayClick	遮罩点击回调函数	function	—	—

属性	说明	类型	默认值
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	''

---

注意事项

1. 组件引入：需要在页面的 JSON 文件中引入 dialog-center 组件
2. 回调处理：建议同时处理 confirm 和 cancel 回调
3. 参数验证：options 数组不能为空
4. 内存管理：组件会自动管理生命周期，无需手动销毁
5. 遮罩配置：overlay 配置会透传给 fs-popup 组件，支持所有 fs-popup 的遮罩选项
6. 事件处理：overlayClick 事件在点击遮罩时触发，无论 closeOnOverlayClick 设置如何
7. 层级控制：如果页面有其他弹窗，可以通过 overlay.zIndex 调整层级
8. 全选功能：showSelectAll 仅在 mode='multiple' 时生效，支持智能状态切换和搜索兼容

---

预览

打开预览