ดาวน์โหลด vue floating menu - vue floating menu ดาวน์โหลดซอร์สโค้ด

vue floating menu

หมวดหมู่อื่นๆ

1.0.0

ดาวน์โหลด

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