vue-floating-menu可拖拽吸附的浮窗菜单

前言

正如这个名字，这是一个具有拖拽吸附功能的浮窗菜单，开源项目

一个基于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();
  };
},

Demo

Demo地址

以前我就经常觉得看到一些好用的功能，没有demo只能下载代码才能看到效果，实在是非常不方便，所以找到了这个免费的在线存放网站。

如果vue-floating-menu觉得不错的，记得给个⭐哟