vue实现微信小程序长按删除搜索历史记录

1.在Vue组件中，定义一个data属性 `historyList`，用于存储搜索历史记录。

2.在模板中将搜索历史记录以列表的形式进行展示，并绑定一个 `@longpress` 事件。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in historyList" :key="index" @longpress="deleteHistory(index)">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

3.在Vue组件的methods中，实现 `deleteHistory` 方法，用于删除长按的搜索历史记录。

methods: {
  deleteHistory(index) {
    this.historyList.splice(index, 1);
  }
}

4.为了让用户能够感知到长按事件，需要为 `@longpress` 事件添加一个触发条件。可以采用以下两种方式之一进行实现：

- 在事件中记录长按开始时的时间戳和结束时的时间戳，当结束时间戳减去开始时间戳大于一定的时间间隔时，触发长按事件。

- 使用第三方 `long-press-directive` 插件，该插件已经实现了长按事件的触发条件，只需要在模板中添加 `v-long-press` 指令即可。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in historyList" :key="index" v-long-press:500ms="deleteHistory(index)">
        {{ item }}
      </li>
    </ul>
  </div>
</template>