vue floating menu

Vue-플로팅-메뉴

머리말

이름에서 알 수 있듯이 이것은 오픈 소스 프로젝트인 드래그 앤 드롭 기능을 갖춘 플로팅 메뉴입니다.

화면 상에서 자유롭게 드래그할 수 있는 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 ( ) ;
  } ;
} , 

용법

데모는 여기에서 확인하세요: https://vue-floating-menu.netlify.app

• 메뉴를 추가하는 방법:
  src/comComponents/menuPart.vue 컴포넌트는 메뉴 추가를 위한 데모입니다.

vue-floating-menu가 좋다고 생각하시면 좋아요를 눌러주세요.