基于 Vue.js 的任务管理卡片：实现拖拽排序、数据持久化和搜索过滤

应用场景介绍

任务管理卡片是一种常见的 UI 元素，广泛应用于项目管理、待办事项列表和任务跟踪等场景。它提供了一种直观且高效的方式来管理和跟踪任务，并支持各种操作，例如创建、编辑、删除和重新排序。

代码基本功能介绍

本代码演示了一个基于 Vue.js 的任务管理卡片，具有以下基本功能：

• **拖拽排序：**允许用户通过拖拽任务卡片来重新排列任务顺序。
• **数据持久化：**将任务数据存储在本地存储中，以确保数据在刷新页面后仍然可用。
• **搜索过滤：**允许用户根据任务标题或描述搜索任务。

功能实现步骤及关键代码分析说明

1. 创建任务列表

<template>
  <div class="task-list">
    <task-item v-for="task in tasks" :key="task.id" :task="task" />
  </div>
</template>

2. 定义任务项组件

<template>
  <div class="task-item">
    <div class="task-title">{{ task.title }}</div>
    <div class="task-description">{{ task.description }}</div>
    <div class="task-status {{ task.status.toLowerCase() }}">{{ task.status }}</div>
  </div>
</template>

3. 实现拖拽排序

<template>
  <draggable v-model="tasks" @update="onSortUpdate">
    <task-list :tasks="tasks" />
  </draggable>
</template>

<script>
import { Draggable } from 'sortablejs/vue';

export default {
  components: { Draggable },
  methods: {
    onSortUpdate(evt) {
      // 更新任务顺序
    }
  }
}
</script>

4. 数据持久化

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';

export default {
  setup() {
    const tasks = ref(JSON.parse(localStorage.getItem('tasks') || '[]'));

    onMounted(() => {
      // 监听任务变化并更新本地存储
    });

    onBeforeUnmount(() => {
      // 在组件销毁前将任务数据存储到本地存储
    });

    return { tasks };
  }
}
</script>

5. 搜索过滤

<template>
  <input v-model="searchQuery" placeholder="Search..." />
</template>

<script>
export default {
  data() {
    return { searchQuery: '' };
  },
  computed: {
    filteredTasks() {
      return this.tasks.filter(task => {
        return task.title.includes(this.searchQuery) || task.description.includes(this.searchQuery);
      });
    }
  }
}
</script>

总结与展望

通过这段代码的开发，我收获了以下经验：

• 深入理解了 Vue.js 的响应式系统和组件化开发。
• 掌握了使用 Sortable.js 实现拖拽排序。
• 了解了如何使用本地存储进行数据持久化。

未来，该任务管理卡片功能可以进一步拓展和优化，例如：

• 添加任务优先级和到期日期。
• 支持任务分组和标签。
• 集成第三方任务管理服务。