模拟长按删除

在项目中遇到这样的需求：长按标签出现删除图标，点击则删掉当前标签。

页面：

 <p
          v-for="(item, index) in searchList"
          :key="index"
          class="search-tag"
          @touchstart="touchStart"
          @touchend="touchEnd(item)"
        >
          <span v-show="item.show" class="icon" @click="delItem(item)"></span>
          <span class="search-tag-text">
            {{ item.text }}
          </span>
 </p>

data：

data(){
    return{
     startTime: '',
      endTime: '',
        // 搜索历史
         searchList: [],
    }
}

js：

   mounted() {
    this.getSearchList()
  },

// 获取搜索历史,绑定事件监听
getSearchList() {
      this.searchList = JSON.parse(localStorage.getItem('SearchList')) || []
      this.searchList.forEach((item) => {
        item.show = false
      })

      this.$nextTick(() => {
        const els = document.getElementsByTagName('search-tag')
        els.forEach((item) => {
          item.addEventListener('touchstart', this.touchStart)
          item.addEventListener('touchend', this.touchEnd)
        })
      })
    },


touchStart() {
      this.startTime = new Date().getTime()
    },

touchEnd(item) {
      this.searchList.find((i) => {
        if (i.show) {
          i.show = false
        }
      })
      this.endTime = new Date().getTime()
      let diffTime = 0
      diffTime = this.endTime - this.startTime
      if (diffTime > 500) {
        item.show = true
        this.$forceUpdate()
      }
      this.startTime = this.endTime = ''
    },

//删除
 delItem(item) {
      const newList = this.searchList.filter((text) => {
        return item.text !== text.text
      })
      this.searchList = newList
      localStorage.setItem('SearchList', JSON.stringify(newList))
    },

css：

 .icon {
          top: -10px;
          right: -10px;
          width: 28px;
          height: 28px;
          padding: 1px;
          box-sizing: border-box;
          border-radius: 50%;
          position: absolute;
          background: #dddddd;
          display: block;
          &::after {
            position: absolute;
            font-size: 12px;
            left: 2px;
            top: 2px;
            display: inline-block;
            width: 24px;
            height: 24px;
            margin: 0 auto;
            line-height: 24px;
            color: #fff;
            content: 'X';
         }
      }