fs-popup

约 1107 字大约 4 分钟

2026-06-25

简介

fs-popup 弹出层组件用于在当前页面显示一个弹窗，支持顶部、底部、左侧、右侧、居中等多种弹出方向，具备遮罩、动画、内容自定义、操作栏、关闭按钮等能力，适用于多种业务弹窗场景。

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

"usingComponents": {
  "fs-popup": "ava-ui/fxui/fs-popup/index"
}

支持通过overlay属性自定义遮罩层的行为和样式：

属性名	说明	类型	可选值/格式	默认值
show	是否显示弹窗	boolean	true/false	false
position	弹出方向	string	bottom/top/left/right/center	bottom
slide	滑动动画	boolean	true/false	true
contentHeight	内容高度	number	—	0
contentWidth	内容宽度	number	—	0
isOptimize	性能优化	boolean	true/false	false
extStyle	外部样式	string	—	''
headerStyle	头部区域样式	string	—	''
topOffset	顶部弹窗距离顶部	number	—	60
title	弹窗标题	string	—	''
showClose	显示关闭按钮	boolean	true/false	true
searchType	搜索模式	string	null/icon/input	null
searchProps	搜索组件配置	object	见下方说明	{}
actions	操作栏按钮	array	[{type:'text'/'icon',text,icon,...}]	[]
overlay	遮罩层配置	object	透传给fs-overlay组件的属性	{}

searchType 说明：

searchProps 配置说明：

searchProps 对象用于配置 fs-search 组件的属性，支持以下配置：

属性名	类型	默认值	说明
type	string	'bordered'	搜索框类型：bordered/plain
size	string	'mini'	搜索框尺寸：small/normal/large/mini
value	string	''	输入框内容
placeholder	string	'搜索...'	占位符文本
showCancel	boolean	-	是否显示取消按钮，优先级高于默认逻辑
cancelText	string	'取消'	取消按钮文字
focus	boolean	-	是否自动聚焦，优先级高于默认逻辑
disabled	boolean	false	是否禁用
readonly	boolean	false	是否只读
maxlength	number	200	最大输入长度
extStyle	string	''	外部样式

overlay 配置说明：

overlay 对象用于配置 fs-overlay 组件的属性，支持以下配置：

headerStyle 说明：