Introduction

fs-bubble-dialog-m is a singleton bubble dialog component wrapped around fs-bubble-dialog and used with DialogCenter. By calling fsBubbleDialog.show(options) from JS, you can pop up a bubble without having to manually place a component node on each page. It is managed uniformly via DialogCenter.

Usage

Local import. Configure DialogCenter in the index.json of the page or component where it is needed:

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

Place it in the page index.wxml:

<dialog-center />

Code Demo

Basic Usage

API

Parameters

Parameter	Description	Type	Optional Values	Default
selector	Selector of the trigger element (e.g. #my-btn)	String	-	''
targetRect	Directly specifies the trigger element position (can replace selector), format {top, bottom, left, right, width, height}	Object	-	null
placement	Direction in which the bubble appears	String	top / bottom	'top'
offset	Spacing between the bubble and the trigger element (px)	Number	-	8
bgColor	Bubble background color	String	-	'#fff'
arrowColor	Arrow color, defaults to be the same as the background color	String	-	''
borderRadius	Corner radius	String	-	'8px'
padding	Inner padding	String	-	'8px 12px'
arrowSize	Arrow size (px)	Number	-	8
arrowOffset	Position of the arrow along the bubble edge	String	-	'50%'
customStyle	Custom bubble style	String	-	''
content	Bubble text content	String	-	''
contentColor	Text color of content	String	-	''
list	List content, format [{ label, value?, icon?, disabled? }], takes precedence over content	Array	-	[]
maskBgColor	Mask background color	String	-	'transparent'
zIndex	Z-index	Number	-	1000
minSpace	Minimum remaining space required for the preferred direction (px); automatically falls back when space is insufficient (top↔bottom)	Number	-	80
align	Horizontal alignment of the bubble relative to the trigger element	String	left / center / right	'center'

Events

Name	Parameter	Description
onClose	-	Triggered when the bubble is closed by clicking the mask
onOpen	-	Triggered after the bubble is expanded and positioning is completed
onListTap	{ item, index }	Triggered when a list item is clicked (disabled items do not trigger this)

Notes

• fs-bubble-dialog-m must be used together with DialogCenter. Make sure <dialog-center /> is placed in the page.
• Compared with fs-bubble-dialog, the caller does not need to declare the bubble node in wxml; it is managed uniformly by DialogCenter.
• selector supports CSS selectors. Using #id is recommended to ensure uniqueness.
• If the bubble is inside a complex nested hierarchy (such as a list or dialog), it is recommended to use targetRect to manually pass in coordinates and bypass DOM queries.

打开预览