如何用Vue实现类似微信浮标效果的动态悬浮组件?
- 内容介绍
- 文章标签
- 相关推荐
本文共计2164个文字,预计阅读时间需要9分钟。
微信的浮窗功能,大伙儿都应该用过了。当我们正在阅读公众号文章时,突然需要处理微信消息,点击浮窗,微信上会出现一个浮标,点击浮标即可返回文章。今天我们打算是搞一个类似微信的浮窗功能。
微信的浮窗,大伙应该都用过,当我们正在阅读一篇公众号文章时,突然需要处理微信消息,点击浮窗,在微信上会有个浮标,点击浮标可以再次回到文章。
我们今天打算撸一个类似微信的浮标组件,我们期望组件有以下功能
- 支持拖拽
- 支持左右吸附
- 支持页面上下滑动时隐藏
效果预览
拖拽事件
浮标的核心功能的就是拖拽,对鼠标或移动端的触摸的事件来说,有三个阶段,鼠标或手指接触到元素时,鼠标或手指在移动的过程,鼠标或手指离开元素。
本文共计2164个文字,预计阅读时间需要9分钟。
微信的浮窗功能,大伙儿都应该用过了。当我们正在阅读公众号文章时,突然需要处理微信消息,点击浮窗,微信上会出现一个浮标,点击浮标即可返回文章。今天我们打算是搞一个类似微信的浮窗功能。
微信的浮窗,大伙应该都用过,当我们正在阅读一篇公众号文章时,突然需要处理微信消息,点击浮窗,在微信上会有个浮标,点击浮标可以再次回到文章。
我们今天打算撸一个类似微信的浮标组件,我们期望组件有以下功能
- 支持拖拽
- 支持左右吸附
- 支持页面上下滑动时隐藏
效果预览
拖拽事件
浮标的核心功能的就是拖拽,对鼠标或移动端的触摸的事件来说,有三个阶段,鼠标或手指接触到元素时,鼠标或手指在移动的过程,鼠标或手指离开元素。

