vue 单双击事件处理详情和气泡的两种方式,Vue+ElementUI组合中一行列表绑定两个单击事件

如图:

在这里插入图片描述
单击后,调用handleClick(),handleClick()调用goToDetailGraphic()方法,该方法中处理图形定位、使用定时器调用showPopUp_people()方法,showPopUp_people()方法里是处理气泡显示逻辑。单击列表后,调用handleClick()方法,没毛病。注意,带定时器调用showPopUp_people()方法不能写在回调函数的.then()方法中。
双击时,调用handledbClick()方法,handledbClick()调用handlePubStatus()显示详情列表,在调用handlePubStatus()方法后一行使用clearTimeout(time)清除定时器。这样,单击事件中的goToDetailGraphic()方法里定时器里的showPopUp_people()方法就不会被执行。这样一来,双击时,进行处理图形定位、调用handlePubStatus()显示详情,气泡也不会显示。
注意:双击时,单击事件对应的方法也会被执行,所以不要在双击的事件处理逻辑中再添加对图形定位方法的调用(goToDetailGraphic()方法),因为图形定位方法和带有定时器的showPopUp_people()方法在同一个方法内(goToDetailGraphic()方法)。不然,双击时会对goToDetailGraphic()方法调用两次,就会导致双击时气泡也显示。

附加:想想,如果双击时不会触发单击事件对应的方法,或者业务逻辑不允许在双击时触发单击事件对应的方法里的业务怎么办????
用上面案例来说,单击列表某行时,调用图形绘制方法,并且同时调用带定时器的showPopUp_people()方法。双击列表某行时,调用图形绘制方法,并且显示详情,但是不调用带定时器的showPopUp_people()方法。如何处理??
答案:把showPopUp_people()方法和图形绘制方法分开写,但是这里就要同时调用两次单击方法,由于vue+ElementUI的组合不能像原生html中那样在一个click后写两个方法来分别调用两个单击处理事件,所以,得换种写法,如下图:如果写两次@cell-click=""会报错,所以,下图这样写来分别调用就好,这样,就是在双击的处理逻辑中再次调用图形绘制方法,也不会调用showPopUp_people()方法。
在这里插入图片描述
当然把v-on:cell-click="showPopUp"换为@row-click="showPopUp"也行。


版权声明:本文为qq_40820382原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。