vant 左滑删除点击确认删除组件

您可以使用Vant的SwipeCell组件来实现左滑删除，然后使用Dialog组件来确认删除。

首先，您需要在页面中引入SwipeCell和Dialog组件：

<template>
  <div>
    <van-swipe-cell @delete="showConfirmDialog">
      <div slot="left" class="delete-btn">删除</div>
      <div slot="default">内容</div>
    </van-swipe-cell>

    <van-dialog v-model="showDialog">
      <template #title>确认删除</template>
      <template #confirm>
        <van-button type="danger" @click="deleteItem">确定</van-button>
      </template>
    </van-dialog>
  </div>
</template>

<script>
import { ref } from 'vue';
import { SwipeCell, Dialog, Button } from 'vant';

export default {
  components: {
    SwipeCell,
    Dialog,
    Button
  },
  setup() {
    const showDialog = ref(false);

    const showConfirmDialog = () => {
      showDialog.value = true;
    };

    const deleteItem = () => {
      showDialog.value = false;
      // 执行删除操作
    };

    return {
      showDialog,
      showConfirmDialog,
      deleteItem
    };
  }
};
</script>

<style scoped>
.delete-btn {
  width: 80px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
  color: white;
}
</style>

在上述代码中，我们使用了SwipeCell组件来实现左滑删除效果。在SwipeCell组件中，我们添加了一个名为left的插槽，用于展示删除按钮。当用户左滑该组件时，会触发delete事件，我们在事件处理函数中打开确认删除的对话框。

在对话框中，我们使用了Dialog组件来展示确认删除的提示。在确认删除按钮的confirm插槽中，我们使用了Button组件来展示删除按钮，并绑定了deleteItem方法，用于执行删除操作。

需要注意的是，上述代码中的<van-button>和<van-swipe-cell>是Vant 3.x版本的写法，如果您使用的是Vant 2.x版本，请将它们替换为<van-button>和<van-swipe-cell>