vue 长按事件

需求：可以长按删除、长按复制

实现效果:

长按删除：

 

 长按复制

1.HTML 

<div class="comment" v-for="(item,index) in liuyanlist.data" 
      @touchstart="gtouchstart(item)" @touchmove="gtouchmove()" 
      @touchend="showDeleteButton(item)">
       长按删除/长按复制
</div>

2.JS 

let timeOutEvent = null //定时器 
//长按事件设置定时器
let gtouchstart=(item)=>{
        timeOutEvent= setTimeout(()=>{
            longPress(item)
        },200)
    } 

//手释放，如果在200毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
    let showDeleteButton=(item)=>{
        clearTimeout(timeOutEvent); //清除定时器
        if (timeOutEvent != 0) {
            //这里写要执行的内容（如onclick事件） 
          reply(item)//根据自己的需求写，我的需求是这样的
        }
        return false;
    }
//如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
    let gtouchmove=()=> {
        clearTimeout(timeOutEvent); //清除定时器
        timeOutEvent = 0
    }
//真正长按后应该执行的内容
    let longPress=(item)=> {
        timeOutEvent = 0
    //根据自己的需求写，我的需求是这样的
    //deletePermissions==1删除，deletePermissions==0复制
        if(item.deletePermissions==1){
            displayID.value = item.id
            display.value=true//打开删除评论弹框
        }else {
            show.value = true//打开复制评论弹框
            texts.value = item.replyContent
        }
    }

以上就能实现长按事件，其余的就是调接口实现长按删除或长按复制功能