Introduction

The fs-popup popup component is used to display a popup on the current page. It supports multiple popup directions including top, bottom, left, right, and center, and provides capabilities such as overlay, animation, customizable content, action bar, and close button. It is suitable for a variety of business popup scenarios.

Usage

Import locally by configuring it in the index.json of the page or component that needs it:

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

Code Demos

1. Header Content (Title/Search/Actions/Close)

2. Popup Direction

3. Long Content Scrolling

4. Overlay Configuration

You can customize the behavior and style of the overlay via the overlay property:

API

Properties

Property	Description	Type	Optional Values/Format	Default
show	Whether to show the popup	boolean	true/false	false
position	Popup direction	string	bottom/top/left/right/center	bottom
slide	Slide animation	boolean	true/false	true
minHeight	Minimum content height	string	—	30vh
isOptimize	Performance optimization	boolean	true/false	false
extStyle	External style	string	—	''
headerStyle	Header area style	string	—	''
topOffset	Top popup distance from top	number	—	60
title	Popup title	string	—	''
showClose	Show close button	boolean	true/false	true
searchType	Search mode	string	null/icon/input	null
searchProps	Search component configuration	object	see description below	{}
actions	Action bar buttons	array	[{type:'text'/'icon',text,icon,...}]	[]
overlay	Overlay configuration	object	properties passed through to fs-overlay	{}

searchType Notes:

• null: No search box
• icon: Displays a search icon on the right side of actions; clicking it shows an input box with clear and cancel
• input: Directly displays the input box with clear and cancel

searchProps Configuration Notes:

The searchProps object is used to configure the properties of the fs-search component, supporting the following configurations:

Property	Type	Default	Description
type	string	'bordered'	Search box type: bordered/plain
size	string	'mini'	Search box size: small/normal/large/mini
value	string	''	Input box content
placeholder	string	'Search...'	Placeholder text
showCancel	boolean	-	Whether to show the cancel button; takes precedence over the default logic
cancelText	string	'Cancel'	Cancel button text
focus	boolean	-	Whether to auto focus; takes precedence over the default logic
disabled	boolean	false	Whether to disable
readonly	boolean	false	Whether to be read-only
maxlength	number	200	Maximum input length
extStyle	string	''	External style

overlay Configuration Notes:

The overlay object is used to configure the properties of the fs-overlay component, supporting the following configurations:

Property	Type	Default	Description
zIndex	number	11000	Overlay z-index
backgroundColor	string	'rgba(0, 0, 0, 0.7)'	Overlay background color
duration	number	300	Animation duration (milliseconds)
preventScrollThrough	boolean	true	Whether to prevent scroll-through
closeOnOverlayClick	boolean	true	Whether clicking the overlay closes the popup
customStyle	string	''	Custom style
customClass	string	''	Custom class name

headerStyle Notes:

• Used to customize the inline style of the popup header area (the area containing the title/search/actions/close button), supports standard style syntax
• For example: headerStyle="background: #f8f8f8; border-bottom: 1px solid #eee;"

actions Configuration Notes

• type: 'text' (default) or 'icon'; when text, renders a text button; when icon, renders an iconfont
• text: Button text (when type is text)
• icon: iconfont name (when type is icon)

Slot

Name	Description
default	Popup content area
header	Custom header content
actions	Custom action bar

Events

Event Name	Description	Callback Parameter
onClose	Click close button	event
onBackClose	Close via physical back button	event
onAction	Click action button
onSearchInput	Search box input	value
onSearchConfirm	Search box enter/search	value
onSearchCancel	Search cancel	event
onSearchClear	Clear search input	event
onSearchFocus	Search box gains focus	event
onSearchBlur	Search box loses focus	event
overlayClick	Click overlay	event
overlayEnter	Overlay enters	event
overlayLeave	Overlay leaves	event

Design Notes

• Supports multiple popup directions including top, bottom, left/right, and center, with styles consistent with the design draft
• Header content (title/search/actions/close) can be combined flexibly and supports slot extension
• The search feature is implemented with the fs-search component, providing a better user experience and consistent styling
• The content area has a max-height that auto-adjusts, with automatic scrolling for long content
• Supports closing the popup via the Android physical back button
• All variables use var.wxss for a unified style

打开预览