vue3.0 实现左滑删除

在 Vue3 中实现左滑删除功能通常会利用 `pinia` 或者 `vue-router` 的导航守卫以及自定义组件结合 `v-model` 和 `@touchstart`、`@touchmove` 事件。以下是一个简单的步骤概述：

1. 首先，创建一个可复用的滑动删除组件，如 `SwipeToDelete.vue`：

<template>
  <div class="swipe-delete" @touchstart.prevent="handleStart" @touchend.stop="handleEnd">
    <slot></slot>
    <span v-if="isDeleting" class="swipe-delete__delete">删除</span>
  </div>
</template>

<script>
export default {
  props: ['item', 'onDelete'],
  data() {
    return {
      isDeleting: false,
      touchStartX: null,
    };
  },
  methods: {
    handleStart(event) {
      this.touchStartX = event.touches.clientX;
    },
    handleEnd(event) {
      if (!event.cancelled && Math.abs(event.touches.clientX - this.touchStartX) > 50) {
        this.isDeleting = true;
        setTimeout(() => {
          this.onDelete(this.item);
          this.isDeleting = false;
        }, 200); // 可调整动画时间
      }
    },
  },
};
</script>

2. 在需要应用这个功能的地方，比如列表页，将组件绑定到每个条目上，并监听删除事件：

<SwipeToDelete :item="listItem" @onDelete="handleItemDelete">
  <p>{{ listItem.name }}</p>
</SwipeToDelete>

3. 在父组件中处理删除操作：

import SwipeToDelete from './SwipeToDelete.vue';

setup() {
  const listItems = ref([...items]); // 假设 items 是你的数据源

  function handleItemDelete(item) {
    // 删除对应的 item 从 listItems 数组
    listItems.value = listItems.value.filter((i) => i !== item);
  }

  return { listItems, ... };
}