Vue binds the same element click and double click event DblClick to perform different logic

In the process of doing the project, the need is to click on the hole bit click the Pop-up dialog to see the total number of products, double-click the Pop-up dialog. At first, the Click and DblClick are written in the label, but anyway, always do a clicking event

WORKAROUND: Use a timer to simulate a double-click event in approximate time

HTML Part code:

<div class= "Grid-content" >    <El-button
　　　　v-for = "(Item,index) in items": key= "index"

@dblclick. native= "Storagedetail (item.id)"
　　Class
: class= "Colors[item.status" >           {{item.id}}</el-button> </div>

The. Native is primarily used to listen to native events of component root elements, primarily to add native events to custom components.

The official interpretation of the. Native modifier is that sometimes you might want to listen to a native event on the root element of a component. You can use the v-on modifier. native

JS Section Code

<script>import Desdialog from './dialog ', import detaildialog from './detaildialog ';
var time = null;//define time as null here  export  default   {name:  ' Storetable '  ' ProviderID ' 
     
       ", data () {
      return   {  colors: [ ' space ', ' isbuy ' cleartimeout (time); First clear the Timer time = SetTimeout (() = = {         This. ShowDialog =! This. ShowDialog; Const OBJ= {}; Obj.cutname=ID; Obj.providerid= This. ProviderID;  This. $store. Dispatch (' Getstoragecount ', obj);  },  -); Approximate Time 300ms},
Double-click the event function, clear the timer, and directly handle the logical Storagedetail (ID) {  cleartimeout (time); Clear  This. Showdialogt =! This. Showdialogt; Const OBJ= {}; Obj.cutname=ID; Obj.providerid= This. ProviderID;  This. $store. Dispatch (' Getstoragedetail ', obj); }, Close () { This. ShowDialog =false; }, CloseT () { This. Showdialogt =false; }  }};</script>

Vue binds the same element click and double click event DblClick to perform different logic