当前位置：首页 > VUE

vue 看板实现

2026-01-18 13:44:04VUE

Vue 看板实现方法

基础结构搭建

使用 Vue CLI 或 Vite 初始化项目，安装依赖库如 vuedraggable 实现拖拽功能。创建看板组件，包含列表（List）和卡片（Card）的嵌套结构。

vue 看板实现

// 示例数据结构
data() {
  return {
    lists: [
      {
        id: 1,
        title: "待处理",
        cards: [
          { id: 101, content: "任务A" },
          { id: 102, content: "任务B" }
        ]
      },
      {
        id: 2,
        title: "进行中",
        cards: []
      }
    ]
  }
}

拖拽功能实现

通过 vuedraggable 库实现跨列表拖拽。需在列表容器和卡片容器上分别应用拖拽组件。

vue 看板实现

<draggable 
  v-model="lists" 
  group="lists" 
  @end="onListDragEnd">
  <div v-for="list in lists" :key="list.id">
    <h3>{{ list.title }}</h3>
    <draggable 
      v-model="list.cards" 
      group="cards"
      @end="onCardDragEnd">
      <div v-for="card in list.cards" :key="card.id">
        {{ card.content }}
      </div>
    </draggable>
  </div>
</draggable>

状态管理

对于复杂场景建议使用 Vuex 或 Pinia 集中管理看板状态。定义 mutations/actions 处理卡片移动、列表更新等操作。

// Pinia 示例
export const useBoardStore = defineStore('board', {
  state: () => ({ lists: [] }),
  actions: {
    moveCard({ fromListId, toListId, cardId }) {
      // 移动逻辑实现
    }
  }
})

样式优化

采用 Flexbox 或 CSS Grid 布局实现自适应看板。为拖拽状态添加视觉反馈：

.list {
  background: #ebecf0;
  border-radius: 4px;
  padding: 8px;
  margin: 0 10px;
  min-width: 250px;
}
.card {
  background: white;
  padding: 6px 12px;
  margin: 4px 0;
  box-shadow: 0 1px 0 rgba(9,30,66,.25);
}
.sortable-chosen {
  background: #f0f0f0;
}

功能扩展

添加卡片：每个列表顶部放置输入框，通过 @keyup.enter 触发添加操作
持久化存储：结合 localStorage 或后端 API 保存看板状态
实时协作：通过 WebSocket 实现多用户同步

完整组件示例

<template>
  <div class="board">
    <draggable ...>
      <!-- 列表渲染逻辑 -->
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  components: { draggable },
  methods: {
    onCardDragEnd(evt) {
      console.log('卡片移动完成', evt)
    }
  }
}
</script>