mirror of
https://github.com/iczer/vue-antd-admin
synced 2025-04-05 19:41:37 +08:00
51 lines
1.4 KiB
Vue
51 lines
1.4 KiB
Vue
<template>
|
|
<div style="display: flex">
|
|
<task-group class="task-group" title="ToDo" group="task">
|
|
<task-item :key="index" v-for="(item, index) in todoList" :content="item" />
|
|
</task-group>
|
|
<task-group class="task-group" title="In Progress" group="task">
|
|
<task-item :key="index" v-for="(item, index) in inproList" :content="item" />
|
|
</task-group>
|
|
<task-group class="task-group" title="Done" group="task">
|
|
<task-item :key="index" v-for="(item, index) in doneList" :content="item" />
|
|
</task-group>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import TaskGroup from '../../components/task/TaskGroup'
|
|
import TaskItem from '../../components/task/TaskItem'
|
|
const todoList = ['任务一', '任务二', '任务三', '任务四', '任务五', '任务六']
|
|
const inproList = ['任务七', '任务八', '任务九', '任务十', '任务十一', '任务十二']
|
|
const doneList = ['任务十三', '任务十四', '任务十五', '任务十六', '任务十七', '任务十八']
|
|
export default {
|
|
name: 'TaskCard',
|
|
components: {TaskItem, TaskGroup},
|
|
data () {
|
|
return {
|
|
todoList,
|
|
inproList,
|
|
doneList
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.task-group{
|
|
margin: 0 48px;
|
|
}
|
|
.dragable-ghost{
|
|
border: 1px dashed red;
|
|
opacity: 1;
|
|
}
|
|
.dragable-chose{
|
|
border: 1px dashed red;
|
|
opacity: 0.8;
|
|
}
|
|
.dragable-drag{
|
|
border: 1px dashed red;
|
|
opacity: 1;
|
|
}
|
|
</style>
|