如何用Vue实现类似微信浮标效果的动态悬浮组件？

本文共计2164个文字，预计阅读时间需要9分钟。

微信的浮窗功能，大伙儿都应该用过了。当我们正在阅读公众号文章时，突然需要处理微信消息，点击浮窗，微信上会出现一个浮标，点击浮标即可返回文章。今天我们打算是搞一个类似微信的浮窗功能。

微信的浮窗，大伙应该都用过，当我们正在阅读一篇公众号文章时，突然需要处理微信消息，点击浮窗，在微信上会有个浮标，点击浮标可以再次回到文章。

我们今天打算撸一个类似微信的浮标组件，我们期望组件有以下功能

• 支持拖拽
• 支持左右吸附
• 支持页面上下滑动时隐藏

效果预览

拖拽事件

浮标的核心功能的就是拖拽，对鼠标或移动端的触摸的事件来说，有三个阶段，鼠标或手指接触到元素时，鼠标或手指在移动的过程，鼠标或手指离开元素。