<template>
<div class="peerlistitem" @touchstart="touchinUk($event)" @touchend='cleartime'>
<!-- 长按弹出层-删除和修改-->
<div class="del_pup">
<van-popup v-model="show" round position="bottom" >
<div class="del" @click="handlerDel">移除</div>
<div class="emit" @click="edit">修改</div>
<div class="empty"></div>
<div class="cancel" @click="show=false">取消</div>
</van-popup>
</div>
</div>
</template>
<script>
export default {
data (){
return{
Loop:0,
show:false,
}
},
methods:{
touchinUk(event) {
var that=this;
clearInterval(this.Loop); //再次清空定时器,防止重复注册定时器
this.Loop = setTimeout(function() {
that.Loop = 0;
event.preventDefault();
that.show=true;
}, 800);
return false
},
cleartime() {
var that=this;
clearInterval(this.Loop);
if(that.Loop!=0){
//单击事件(click)
console.log('点击');
}
return false;
},
}
}
</script>
<style>
//禁用长按选中文本功能
*{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input {
-webkit-touch-callout: auto;
-webkit-user-select: auto;
-khtml-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
}
</style>
移动端长按弹出删除框
最新推荐文章于 2024-05-08 13:24:57 发布