更新记录
1.0.8(2024-03-27)
下载此版本
更新github 地址
1.0.7(2024-03-27)
下载此版本
修改已知问题
1.0.6(2024-03-19)
下载此版本
增加背景颜色配置
增加圆角被指
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.1.0 |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
× |
√ |
√ |
√ |
props
参数 |
类型 |
默认值 |
描述 |
position |
string |
bottom |
可选bottom top left right |
radius |
string |
10rpx |
圆角 |
bgColor |
string |
#fff |
背景颜色 |
maskClose |
Boolean |
true |
点击遮罩层是否关闭 |
maskCloseBg |
string |
transparent |
遮罩层的背景颜色 |
open |
Boolean|null |
null |
1.为null时 点击弹窗 2. 传入true false 自定义控制显示隐藏 |
change |
(e:Boolean)=>{} |
|
onChange 显示隐藏事件 |
onClose |
()=>{} |
|
在传入 open时关闭事件 需要吧传入的open 改为false |
Ref
数据加载慢的情况下使用ref 初始化一下
this.$refs.bubbleRef.init()
正确写法
<div style="margin-left:100px">
<bubble position="bottom" >
<template v-slot:tag>
<image style="width: 77px;height: 77px;" src="/static/logo.png"></image>
</template>
<template v-slot:content>
<view>
内容asaaas
</view>
</template>
</bubble>
</div>
错误写法
<bubble position="bottom" >
<template v-slot:tag>
这里不要 padding margin 类型的位置css
<image style="width: 77px;height: 77px;margin-left:100px" src="/static/logo.png"></image>
</template>
<template v-slot:content>
<view>
内容asaaas
</view>
</template>
</bubble>