vue2购物车左滑删除

在Vue 2中实现购物车左滑删除功能可以按照以下步骤进行操作：

1. 首先，在购物车列表的每个商品项上添加一个左滑删除的按钮或者手势，可以使用第三方库如`v-swipe`来实现左滑手势。

2. 在组件的`data`选项中定义一个状态变量，比如`showDeleteBtn`，用来控制左滑删除按钮的显示与隐藏。

3. 监听左滑手势或者点击删除按钮的事件，在事件处理函数中修改`showDeleteBtn`的值，来控制删除按钮的显示与隐藏。

4. 使用Vue的条件渲染指令`v-if`或者`v-show`来根据`showDeleteBtn`的值来控制删除按钮的显示与隐藏。

具体代码示例可以参考下面的示例：

<template>
  <div>
    <ul>
      <li v-for="item in cartItems" :key="item.id">
        <div @swipeleft="showDeleteBtn = true" @swiperight="showDeleteBtn = false">
          {{ item.name }} - {{ item.price }}
          <button v-if="showDeleteBtn" @click="deleteItem(item.id)">删除</button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cartItems: [
        { id: 1, name: '商品1', price: 10 },
        { id: 2, name: '商品2', price: 20 },
        // ...
      ],
      showDeleteBtn: false
    };
  },
  methods: {
    deleteItem(itemId) {
      // 在这里处理删除商品的逻辑
    }
  }
};
</script>

在上面的代码中，通过`@swipeleft`和`@swiperight`事件监听左滑和右滑手势，在事件处理函数中修改`showDeleteBtn`的值来控制删除按钮的显示与隐藏。然后使用`v-if`指令根据`showDeleteBtn`的值来决定是否渲染删除按钮。当用户点击删除按钮时，可以触发`deleteItem`方法来处理删除商品的逻辑。