vue floating menu Télécharger - vue floating menu Téléchargement du code source

vue floating menu

Autres catégories

1.0.0

Télécharger

Vue-Flottant-Menu

Préface

Comme son nom l'indique, il s'agit d'un menu flottant avec fonctionnalité glisser-déposer, un projet open source.

Un composant de fenêtre flottante basé sur vue, qui peut être librement glissé sur l'écran, après avoir été déplacé, il peut être adsorbé des deux côtés de la page en fonction de la position finale, et la fenêtre flottante peut être cliquée pour afficher le menu.

Ci-joint l'adresse du projet github vue-floating-menu

L'effet est le suivant :

Résumé des problèmes rencontrés

La souris se déplace trop vite, ce qui rend le déplacement flou :

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

Déterminez s'il s'agit d'un événement de clic :

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