使用vue3实现上述功能

在Vue 3中，可以采用类似的方式来实现这个功能。以下是使用Composition API和Vuex的状态管理的示例：

首先，在`store/index.js`中设置文件列表状态和删除方法：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    files: [],
    selectedFileIndex: -1,
  },
  mutations: {
    addFiles(state, files) {
      state.files = [...state.files, ...files];
    },
    removeFile(state, index) {
      state.files.splice(index, 1);
      state.selectedFileIndex = Math.max(0, state.selectedFileIndex - 1); // 更新已删除文件后的选中项
    },
  },
  actions: {
    addFiles({ commit }, files) {
      commit('addFiles', files);
    },
    removeFile({ commit }, index) {
      commit('removeFile', index);
    },
  },
});

然后在`components/FileList.vue`中：

<template>
  <div>
    <ul v-for="(file, index) in files" :key="index">
      <li>
        <img :src="file.src" :alt="file.name" />
        <span>{{ file.name }}</span>
        <button @click.prevent="selectFile(index)" :disabled="selectedFileIndex !== index">删除</button>
        <button @click="confirmDelete(index)">确认删除</button>
      </li>
    </ul>
    <p v-if="selectedFileIndex !== -1">确定要删除第{{ selectedFileIndex + 1 }}个文件吗?</p>
  </div>
</template>

<script setup>
import { ref, onMounted, emit } from 'vue';
import { useStore } from '@/store';

const store = useStore();

// 定义ref存储选中文件索引
const selectedFileIndexRef = ref(-1);

// 选择文件
const selectFile = (index) => {
  selectedFileIndexRef.value = index;
};

// 确认删除
const confirmDelete = async (index) => {
  try {
    await store.dispatch('removeFile', index);
    emit('delete-file-selected', index); // 发送删除事件通知父组件
  } catch (error) {
    console.error('删除失败:', error);
  }
};
</script>

在父组件（如`App.vue`）中监听删除事件并处理：

<template>
  <FileList @delete-file-selected="deleteFile" />
</template>

<script>
import FileList from '@/components/FileList.vue';

export default {
  components: {
    FileList,
  },
  methods: {
    deleteFile(index) {
      this.$store.commit('removeFile', index);
    },
  },
};
</script>