vue实现任务进度条组件，有多个任务进度条，数据是接口返回的，其中某一个进度条完成后就隐藏了，不影响其他正在执行的任务进度条，其他任务进度条执行到哪里就从哪里继续执行，封装成通用组件

在Vue中实现任务进度条组件，你可以按照以下步骤来设计：

1. **创建组件**:
首先，创建一个名为`TaskProgressBar.vue`的组件文件，用于封装进度条功能。

<template>
  <div class="task-progress-bar">
    <transition-group name="fade" v-if="showProgress">
      <div
        :key="index"
        v-for="(task, index) in tasks"
        :class="{ completed: task.completed }"
        @mouseenter="pause(index)"
        @mouseleave="resume(index)">
        <progress :value="task.progress" :max="task.max"></progress>
      </div>
    </transition-group>

    <button @click="hideCompleted(index)" v-if="completedTasks.length > 0 && showProgress">完成的任务</button>
  </div>
</template>

<script>
export default {
  props: {
    tasks: { type: Array, required },
  },
  data() {
    return {
      showProgress: true,
      completedTasks: [],
    };
  },
  methods: {
    pause(index) {
      this.tasks[index].paused = true;
    },
    resume(index) {
      if (this.tasks[index].paused) {
        this.tasks[index].paused = false;
      }
    },
    hideCompleted(index) {
      this.tasks.splice(index, 1);
      this.showProgress = this.tasks.length > 0;
      // 如果所有任务都已完成，可以考虑显示一个总结信息或关闭整个进度条组件
    },
  },
};
</script>

<style scoped>
.task-progress-bar {
  display: flex;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.completed {
  background-color: lightgray; /* 样式可以根据需求调整 */
}
</style>

2. **使用组件**:
在需要的地方引入这个组件，并传递接口获取的数据：

<template>
  <div>
    <task-progress-bar :tasks="progressData"></task-progress-bar>
  </div>
</template>

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

export default {
  components: {
    TaskProgressBar,
  },
  data() {
    return {
      progressData: [],  // 接口返回的任务列表，包含每个任务的进度、最大值等信息
    };
  },
  async mounted() {
    const response = await axios.get('your-api-url');  // 替换为实际的接口地址
    this.progressData = response.data;
  },
};
</script>

当某个任务完成时，调用`hideCompleted`方法删除该任务并更新`showProgress`状态。同时，`pause`和`resume`方法用于暂停和恢复单个任务的动画效果。