You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
1.4 KiB
50 lines
1.4 KiB
<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>
|
|
|