当前位置：首页 > VUE

vue实现看板

2026-01-07 20:27:44VUE

Vue 实现看板功能

使用 Vue 实现看板功能可以通过组件化开发、状态管理和拖拽库结合完成。以下是一个完整的实现方案：

基础项目结构

src/
├── components/
│   ├── KanbanBoard.vue      # 看板容器
│   ├── KanbanColumn.vue     # 看板列
│   └── KanbanCard.vue       # 看板卡片
├── store/                   # 状态管理
│   └── index.js             
└── App.vue

状态管理（Vuex）

// store/index.js
export default new Vuex.Store({
  state: {
    columns: [
      {
        id: 1,
        title: "待处理",
        cards: [
          { id: 1, content: "任务1" },
          { id: 2, content: "任务2" }
        ]
      },
      {
        id: 2,
        title: "进行中",
        cards: []
      }
    ]
  },
  mutations: {
    MOVE_CARD(state, { fromColumn, toColumn, cardIndex }) {
      const card = state.columns[fromColumn].cards.splice(cardIndex, 1)[0]
      state.columns[toColumn].cards.push(card)
    }
  }
})

拖拽功能实现

安装拖拽库：

npm install vuedraggable

<!-- KanbanColumn.vue -->
<template>
  <div class="column">
    <h3>{{ column.title }}</h3>
    <draggable 
      v-model="column.cards"
      group="cards"
      @end="onDragEnd"
    >
      <KanbanCard 
        v-for="card in column.cards"
        :key="card.id"
        :card="card"
      />
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  props: ['column'],
  components: { draggable },
  methods: {
    onDragEnd(event) {
      this.$emit('card-moved', {
        fromIndex: event.oldIndex,
        toIndex: event.newIndex
      })
    }
  }
}
</script>

看板主组件

<!-- KanbanBoard.vue -->
<template>
  <div class="kanban-board">
    <KanbanColumn
      v-for="(column, index) in columns"
      :key="column.id"
      :column="column"
      @card-moved="handleCardMove(index, $event)"
    />
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['columns'])
  },
  methods: {
    handleCardMove(columnIndex, event) {
      this.$store.commit('MOVE_CARD', {
        fromColumn: columnIndex,
        toColumn: event.newIndex >= 0 ? columnIndex : null,
        cardIndex: event.fromIndex
      })
    }
  }
}
</script>

<style scoped>
.kanban-board {
  display: flex;
  gap: 20px;
  padding: 20px;
}
.column {
  background: #f0f0f0;
  padding: 15px;
  border-radius: 5px;
  min-width: 250px;
}
</style>

卡片组件

<!-- KanbanCard.vue -->
<template>
  <div class="card">
    {{ card.content }}
  </div>
</template>

<script>
export default {
  props: ['card']
}
</script>

<style scoped>
.card {
  background: white;
  padding: 10px;
  margin: 5px 0;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
</style>