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

前言

在 uni-app 全平台兼容（H5网页网站、支付宝/微信小程序、安卓App、苹果App、nvue）项目开发中，详解实现 “点击按钮/图标/文字/任意html元素时，任意位置弹出气泡菜单” 效果，气泡框弹出位置可固定为上下左右或者自动根据周围附近的元素决定（确保不会出现遮挡覆盖无法点击菜单等问题），点击菜单项后气泡自动消失，类似微信App右上角加号+点击展开悬浮菜单功能效果，支持菜单列表内容 slot 插槽自定义任何样式、可在菜单项前方加入图标等操作，气泡弹框带 “小三角指向”，适用于收纳各种功能到某个元素中，快捷功能放到气泡菜单列表中。

uniapp（vue2 | vue3）版本项目均可使用，跟着教程复制代码运行即可。

如下图所示，弹出的气泡准确定位并吸附在附近（并且还能手动微调）。

组件源码

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