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