uniapp - [全端兼容] 气泡菜单弹框组件,支持弹出框自动定位、插槽内容、对定位位置不满意可自行调控、是否开启遮罩层、弹出位置、小三角样式等(类似微信首页点击 + 号弹出的气泡菜单效果功能)

前言

网如果您需要微信小程序(原生)版本,请访问 这篇文章。

本文 实现了 uniapp 全平台兼容的气泡弹框菜单插件,弹出的气泡准确定位并吸附在附近(并且还能手动微调),

支持 uniapp v2 / v3 版本,您可以直接复制代码,将插槽中的内容换成您想要的就行了。


如下图真机所示,您的 “触发元素” 在页面的任何位置都行,无需担心气泡弹框定位不准的问题,

另外,在任何手机电脑的不同屏幕尺寸下都能精准 “定位”,

示例代码干净整洁,注释详细

在这里插入图片描述 在这里插入图片描述

组件源码

组件位置放在那里无所谓,后期确保正确引入即可。

components 文件夹下,新建 bubble 文件夹,

紧接着在里面再建一个 bubble.vue 文件

  • 7
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王佳斌

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值