前言
正如这个名字，这是一个具备拖拽吸附性能的浮窗菜单，开源我的项目
一个基于 vue 的浮窗组件, 可在屏幕内自在拖拽，拖拽后能够依据最初的地位吸附到页面两边，而且能够点击浮窗显示菜单
附上 github 我的项目地址 vue-floating-menu
成果如下:
遇到的问题总结
- 鼠标挪动过快，导致拖拽失焦：
<div @mousedown.stop.prevent="moveStart" @click.stop.prevent="toggleMenu"></div>
moveStart(e) {
// ... ... 省略号... ...
// 具体能够在 github 我的项目里查看
document.onmousemove = async (e) => {
this.clickFlag = false;
this.moveFlags = true;
// ???????? 在这里边解决拖拽时的地位更新, 就是因为这个。// 我之前是独自通过监听 mousemove 的办法，所以遇到了这个问题
};
document.onmouseup = () => {
document.onmousemove = null;
document.onmouseup = null;
this.moveEnd();};
},
- 判断是否是点击事件：
<div @mousedown.stop.prevent="moveStart" @click.stop.prevent="toggleMenu"></div>
toggleMenu() {
// 如果上一次 down 事件到下一次 click 事件中 雷同即为点击事件
if (this.lastMoveIndex == this.curMoveIndex) {//???? 点击事件}
this.curMoveIndex = this.lastMoveIndex;
},
moveStart(e) {
// ... ... 省略号... ...
// 具体能够在 github 我的项目里查看
document.onmousemove = async (e) => {this.lastMoveIndex++;};
document.onmouseup = () => {
document.onmousemove = null;
document.onmouseup = null;
this.moveEnd();};
},
Usage
Demo see here: https://vue-floating-menu.net…
如果 vue-floating-menu 感觉不错的，记得给个 ⭐ 哟