تنزيل vue floating menu - تنزيل كود مصدر vue floating menu

vue floating menu

فئات أخرى

1.0.0

تنزيل

قائمة عرض عائمة

مقدمة

كما يوحي الاسم، هذه قائمة عائمة مع وظيفة السحب والإفلات، وهي مشروع مفتوح المصدر.

مكون نافذة عائمة يعتمد على 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 ( ) ;
  } ;
} ,