用vue3做一个待办事项，删除用消除线

在Vue 3中创建一个简单的待办事项列表，并实现删除功能采用消除线效果，你可以按照以下步骤操作：

1. 安装Vue CLI并创建项目：

   vue create todo-app
   cd todo-app

2. 引入所需的组件和样式库（如Vuetify或Element Plus）。

3. 在`src/components`目录下创建一个`TodoItem.vue`文件，用于渲染单个待办事项：

<template>
  <v-list-item v-bind:key="index" @click="handleDelete(index)">
    <v-list-item-content>
      <v-text-field v-model="item.text" label="任务" />
      <v-icon @click="$emit('delete', index)">mdi-delete</v-icon>
    </v-list-item-content>
    <transition name="fade-transition">
      <v-line v-if="isDeleting[index]" :style="{ width: itemTextWidth + 'px' }"></v-line>
    </transition>
  </v-list-item>
</template>

<script setup>
import { ref } from 'vue';
import VLine from '@vuedo/v-line';

const items = ref([]);
const isDeleting = ref(Array(items.value.length).fill(false));
let itemTextWidth;

function handleDelete(index) {
  if (confirm('确认删除吗?')) {
    items.value.splice(index, 1);
    isDeleting.value[index] = true;
    // 更新宽度计算，这里假设width取决于文本内容
    setTimeout(() => {
      itemTextWidth = window.getComputedStyle(this.$refs.itemContent[index]).width;
      isDeleting.value[index] = false;
    }, 500); // 模拟动画延迟
  }
}
</script>

<style scoped>
.fade-transition {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

.v-line {
  position: absolute;
  background-color: #ccc;
  bottom: -1px;
  left: 0;
  right: 0;
}
</style>

4. 主组件（如App.vue）中使用`TodoItem`组件并展示待办事项列表：

<template>
  <v-container>
    <v-list>
      <v-subheader>待办事项</v-subheader>
      <v-list-group v-for="(item, index) in items" :key="index">
        <TodoItem :item="item" @delete="deleteItem(index)" />
      </v-list-group>
      <v-btn variant="primary" @click="addItem">添加新项</v-btn>
    </v-list>
  </v-container>
</template>

<script>
import TodoItem from './components/TodoItem.vue';

export default {
  components: {
    TodoItem,
  },
  data() {
    return {
      items: [],
    };
  },
  methods: {
    addItem() {
      this.items.push({ text: '' });
    },
    deleteItem(index) {
      this.items.splice(index, 1);
    },
  },
};
</script>

以上是一个基本的示例，实际应用中还需要处理输入验证、状态管理（例如Vuex）等。