vue floating menu

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 ( ) ;
  } ;
} , 

Usage

Demo see here: https://vue-floating-menu.netlify.app

• 新增選單的方式：
  元件src/components/menuPart.vue 是新增選單的demo

如果vue-floating-menu覺得不錯的，記得給個喲