关于前端:vuefloatingmenu可拖拽吸附的浮窗菜单

前言

正如这个名字,这是一个具备拖拽吸附性能的浮窗菜单,开源我的项目

一个基于 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感觉不错的,记得给个 ⭐ 哟

本文由乐趣区整理发布,转载请注明出处,谢谢。

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据