caoliancun/vue-antd-admin-skeleton
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: TaskCard components

Browse Source
This commit is contained in:
iczer
2018-08-25 19:30:06 +08:00
parent 12d2ff8e80
commit 2cef87a631
4 changed files with 88 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/task/Index.vue
View File

@@ -1,19 +1,13 @@
<template>
<div style="display: flex">
<task-card style="margin: 0 48px" title="ToDo">
<draggable :options="{group: 'a', sort: true, scroll: true, scrollSpeed: 2, animation: 250, ghostClass: 'ghost', chosenClass: 'chose'}">
<task-item :key="index" v-for="(item, index) in todoList" :content="item" />
</draggable>
<task-card class="task-card" title="ToDo" group="task">
<task-item :key="index" v-for="(item, index) in todoList" :content="item" />
</task-card>
<task-card style="margin: 0 48px" title="In Progress">
<draggable :options="{group: 'a', sort: true, scroll: true, scrollSpeed: 2, animation: 250, ghostClass: 'ghost', chosenClass: 'chose'}">
<task-item :key="index" v-for="(item, index) in inproList" :content="item" />
</draggable>
<task-card class="task-card" title="In Progress" group="task">
<task-item :key="index" v-for="(item, index) in inproList" :content="item" />
</task-card>
<task-card style="margin: 0 48px" title="Done">
<draggable :options="{group: 'a', sort: true, scroll: true, scrollSpeed: 2, animation: 250, ghostClass: 'ghost', chosenClass: 'chose'}">
<task-item :key="index" v-for="(item, index) in doneList" :content="item" />
</draggable>
<task-card class="task-card" title="Done" group="task">
<task-item :key="index" v-for="(item, index) in doneList" :content="item" />
</task-card>
</div>
</template>
@@ -21,13 +15,12 @@
<script>
import TaskCard from './TaskCard'
import TaskItem from './TaskItem'
import Draggable from 'vuedraggable'
const todoList = ['任务一', '任务二', '任务三', '任务四', '任务五', '任务六']
const inproList = ['任务七', '任务八', '任务九', '任务十', '任务十一', '任务十二']
const doneList = ['任务十三', '任务十四', '任务十五', '任务十六', '任务十七', '任务十八']
export default {
name: 'Index',
components: {TaskItem, TaskCard, Draggable},
components: {TaskItem, TaskCard},
data () {
return {
todoList,
@@ -38,11 +31,8 @@ export default {
}
</script>
<style lang="less">
.ghost{
background-color: rgba(256, 256, 256, 0.5);
}
.chose{
border: 1px dashed #aaaaaa;
<style lang="less" scoped>
.task-card{
margin: 0 48px;
}
</style>