VUE长按事件需求功能实现

最近公司提了一个需求，需要长按添加删除按钮，我以下为大家写一个简单的长按事件，拿走就能应用到你的项目中。以为我们公司还要点击的话还要跳一个页面，在div中又添加了一个click事件，长按不跳转，反之跳转。 

 

<div class="weui_cell" v-for="(item,index) in labelList" @touchstart="showDeleteButton(item.id)" @click="labelDetails(item.id)">
      内容
</div>

// 或者这样
<div class="weui_cell" v-for="(item,index) in labelList" @touchstart="showDeleteButton(item.id)" @touchend="emptyTime">
      内容
</div>

在data中声明变量，用来清空定时器
data:{
    Loop:null,
},

在方法中将以下方法复制过去即可应用。
showDeleteButton:function (e) {
    clearTimeout(this.Loop); //再次清空定时器，防止重复注册定时器
    this.Loop = setTimeout(function() {
        alert("长按了")
    }.bind(this), 1000);
},

//清空
emptyTime:function () {
    clearTimeout(this.Loop); //清空定时器，防止重复注册定时器
},
在手机浏览器中，长按可选中文本，在项目中出现这种现象，会很难受最好还是禁用此功能为上。* {
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}

这样一个简单的长按事件就写好了，如果想要更多问题请关注我，谢谢大家支持！！！