当前位置：首页 > VUE

vue实现简易任务看板

2026-02-24 02:55:16VUE

实现思路

Vue实现简易任务看板的核心在于组件化设计、状态管理和用户交互。通过列表展示任务，支持增删改查操作，利用Vue的响应式特性实现数据动态更新。

项目结构

src/
├── components/
│   ├── TaskList.vue    # 任务列表组件
│   ├── AddTask.vue     # 添加任务组件
├── App.vue             # 主组件

核心代码实现

状态管理（Vue 3 Composition API）

// App.vue
<script setup>
import { ref } from 'vue'
const tasks = ref([
  { id: 1, title: '设计原型', status: 'todo' },
  { id: 2, title: '开发功能', status: 'doing' }
])

function addTask(title) {
  tasks.value.push({
    id: Date.now(),
    title,
    status: 'todo'
  })
}

function deleteTask(id) {
  tasks.value = tasks.value.filter(task => task.id !== id)
}
</script>

任务列表组件

<!-- TaskList.vue -->
<template>
  <div class="task-column" v-for="status in ['todo', 'doing', 'done']" :key="status">
    <h3>{{ status.toUpperCase() }}</h3>
    <div 
      v-for="task in filteredTasks(status)" 
      :key="task.id"
      class="task-card"
      @click="changeStatus(task.id)"
    >
      {{ task.title }}
      <button @click.stop="deleteTask(task.id)">×</button>
    </div>
  </div>
</template>

<script setup>
const props = defineProps(['tasks', 'deleteTask'])
const emit = defineEmits(['changeStatus'])

function filteredTasks(status) {
  return props.tasks.filter(task => task.status === status)
}

function changeStatus(id) {
  emit('changeStatus', id)
}
</script>

添加任务组件

<!-- AddTask.vue -->
<template>
  <input 
    v-model="newTaskTitle"
    @keyup.enter="handleAdd"
    placeholder="输入任务后按回车"
  />
</template>

<script setup>
import { ref } from 'vue'
const newTaskTitle = ref('')
const emit = defineEmits(['addTask'])

function handleAdd() {
  if (newTaskTitle.value.trim()) {
    emit('addTask', newTaskTitle.value)
    newTaskTitle.value = ''
  }
}
</script>

样式设计

.task-column {
  width: 30%;
  margin: 0 1.5%;
  float: left;
  background: #f5f5f5;
  padding: 10px;
  border-radius: 5px;
}

.task-card {
  background: white;
  padding: 8px;
  margin: 5px 0;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
}

.task-card button {
  position: absolute;
  right: 5px;
  top: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
}