vue移动端长按事件触发删除按钮

利用移动端的touchstart touchend touchmove 事件结合 实现长按事件的触发

<div
   class="item"
   @touchstart="gtouchstart(item)"
   @touchmove="gtouchmove()"
   @touchend="gtouchend()"
   v-for="(item) in userHouseDetail"
   :key="item.id"
>
<p
  class="cancel"
  v-show="item.show == 'true'"
  @click="deleteHouse(item.isDefault)"
>删除p>

gtouchstart (item) {
  //开始触摸 长按1秒 
  this.timeOutEvent = 0
  this.timeOutEvent = setTimeout(() => {
  // 使用vue的 $set 方法触发视图的更新（直接添加属性不会触发视图的更新）
    this.$set(item, 'show', 'true')
  }, 1000)
},
gtouchmove () {
  clearTimeout(this.timeOutEvent)
  this.timeOutEvent = 0
},
gtouchend () {
  clearTimeout(this.timeOutEvent)
  this.timeOutEvent = 0
},

实现的效果是 长按一秒显示删除按钮