更新记录

1.0.8(2024-03-27) 下载此版本

更新github 地址

1.0.7(2024-03-27) 下载此版本

修改已知问题

1.0.6(2024-03-19) 下载此版本

增加背景颜色配置 增加圆角被指

查看更多

平台兼容性

Vue2 Vue3
×
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>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问