简介

气泡框组件，用于展示带有箭头指向的内容，常用于聊天消息、提示框等场景。支持自定义方向、颜色、圆角等样式。

使用方法

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

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

代码演示

基础用法

API

参数

参数	说明	类型	可选值	默认值
direction	箭头方向	String	'left', 'right', 'top', 'bottom'	'right'
bgColor	背景颜色	String	-	'#fff'
arrowColor	箭头颜色，默认与背景色一致	String	-	''
borderRadius	圆角大小	String	-	'8px'
padding	内边距	String	-	'8px 12px'
maxWidth	最大宽度	String	-	'60%'
margin	外边距	String	-	'12px'
arrowSize	箭头大小 (px)	Number	-	10
arrowOffset	箭头偏移量（离边缘的距离）	String	-	'20%'
justifyContent	气泡相对父容器的水平对齐方式	String	-	-
customStyle	自定义样式	String	-	''

Slot

名称	说明
-	自定义气泡内容

打开预览