vue floating menu herunterladen - vue floating menu -Quellcode herunterladen

vue floating menu

Andere Kategorien

1.0.0

Herunterladen

Vue-Floating-Menü

Vorwort

Wie der Name schon sagt, handelt es sich hierbei um ein schwebendes Menü mit Drag-and-Drop-Funktionalität, ein Open-Source-Projekt.

Eine auf Vue basierende schwebende Fensterkomponente, die frei auf dem Bildschirm gezogen werden kann. Nach dem Ziehen kann sie entsprechend der endgültigen Position auf beiden Seiten der Seite adsorbiert werden, und auf das schwebende Fenster kann geklickt werden, um das Menü anzuzeigen.

Im Anhang finden Sie die Adresse des Github-Projekts vue-floating-menu

Der Effekt ist wie folgt:

Zusammenfassung der aufgetretenen Probleme

Die Maus bewegt sich zu schnell, wodurch das Ziehen unscharf wird:

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

Bestimmen Sie, ob es sich um ein Klickereignis handelt:

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