vue3移动端元素长按删除

要实现在Vue3移动端长按元素删除的功能，可以使用以下步骤：

1. 在需要长按删除的元素上绑定`touchstart`事件和`touchend`事件。

2. 在`touchstart`事件中使用`setTimeout`函数设置一个定时器，当定时器时间到达一定时间时，触发删除操作。

3. 在`touchend`事件中清除定时器，如果手指触摸时间不足定时器时间，则取消删除操作。

以下是一个示例代码：

<template>
  <div class="item" @touchstart="onTouchStart" @touchend="onTouchEnd">
    {{ item }}
  </div>
</template>

<script>
export default {
  props: {
    item: String,
  },
  data() {
    return {
      timer: null,
    };
  },
  methods: {
    onTouchStart() {
      this.timer = setTimeout(() => {
        // 触发删除操作
        this.$emit('delete', this.item);
      }, 1000); // 设置长按时间为1秒
    },
    onTouchEnd() {
      clearTimeout(this.timer);
    },
  },
};
</script>

在父组件中，可以监听`delete`事件，执行删除操作：

<template>
  <div>
    <Item v-for="item in items" :key="item" :item="item" @delete="onDelete" />
  </div>
</template>

<script>
import Item from './Item.vue';

export default {
  components: {
    Item,
  },
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'],
    };
  },
  methods: {
    onDelete(item) {
      const index = this.items.indexOf(item);
      if (index !== -1) {
        this.items.splice(index, 1);
      }
    },
  },
};
</script>