更新记录
1.0.8(2024-03-27) 下载此版本
更新github 地址
1.0.7(2024-03-27) 下载此版本
修改已知问题
1.0.6(2024-03-19) 下载此版本
增加背景颜色配置 增加圆角被指
查看更多平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | - | √ | √ | - | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | - | - | - | - | - | - | - | - | - | - |
其他
多语言 | 暗黑模式 | 宽屏模式 |
---|---|---|
× | × | √ |
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>