VUE长按事件需求功能实现
最近公司提了一个需求,需要长按添加删除按钮,我以下为大家写一个简单的长按事件,拿走就能应用到你的项目中。以为我们公司还要点击的话还要跳一个页面,在div中又添加了一个click事件,长按不跳转,反之跳转。<div class="weui_cell" v-for="(item,index) in labelList" @touchstart=&q
·
最近公司提了一个需求,需要长按添加删除按钮,我以下为大家写一个简单的长按事件,拿走就能应用到你的项目中。以为我们公司还要点击的话还要跳一个页面,在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; }
这样一个简单的长按事件就写好了,如果想要更多问题请关注我,谢谢大家支持!!!
更多推荐
已为社区贡献3条内容
所有评论(0)