Unduh vue floating menu - unduh kode sumber vue floating menu

vue floating menu

Kategori lainnya

1.0.0

Unduh

Menu-Vue-Mengambang

Kata pengantar

Seperti namanya, ini adalah menu mengambang dengan fungsionalitas drag-and-drop, sebuah proyek sumber terbuka.

Komponen jendela mengambang berdasarkan vue, yang dapat diseret dengan bebas di layar. Setelah diseret, dapat diserap ke kedua sisi halaman sesuai dengan posisi akhir, dan jendela mengambang dapat diklik untuk menampilkan menu.

Terlampir adalah alamat proyek github vue-floating-menu

Efeknya adalah sebagai berikut:

Ringkasan masalah yang dihadapi

Mouse bergerak terlalu cepat, menyebabkan tarikan menjadi tidak fokus:

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

Tentukan apakah ini merupakan peristiwa klik:

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