From 2cef87a6311e33f17ef2e77e78c55a5a6a927e04 Mon Sep 17 00:00:00 2001
From: iczer <1126263215@qq.com>
Date: Sat, 25 Aug 2018 19:30:06 +0800
Subject: [PATCH] refactor: TaskCard components
---
src/App.vue | 23 ++++++----
src/components/task/Index.vue | 30 +++++--------
src/components/task/TaskCard.vue | 72 +++++++++++++++++++++++++-------
src/components/task/TaskItem.vue | 6 ++-
4 files changed, 88 insertions(+), 43 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 7629b80..1f70f06 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,11 +18,20 @@ export default {
}
</script>
-<style>
-#app {
- /*font-family: 'Avenir', Helvetica, Arial, sans-serif;*/
- /*-webkit-font-smoothing: antialiased;*/
- /*-moz-osx-font-smoothing: grayscale;*/
- /*color: #2c3e50;*/
-}
+<style lang="less">
+ //拖拽控件全局样式
+ :global{
+ .dragable-ghost{
+ border: 1px dashed #aaaaaa;
+ opacity: 0.65;
+ }
+ .dragable-chose{
+ border: 1px dashed #aaaaaa;
+ opacity: 0.65;
+ }
+ .dragable-drag{
+ border: 1px dashed #aaaaaa;
+ opacity: 0.65;
+ }
+ }
</style>
diff --git a/src/components/task/Index.vue b/src/components/task/Index.vue
index e5ecd44..396ab67 100644
--- a/src/components/task/Index.vue
+++ b/src/components/task/Index.vue
@@ -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>
diff --git a/src/components/task/TaskCard.vue b/src/components/task/TaskCard.vue
index 97db0d5..975cbb0 100644
--- a/src/components/task/TaskCard.vue
+++ b/src/components/task/TaskCard.vue
@@ -1,38 +1,80 @@
<template>
- <a-card class="task-card" size="large" :title="title" :bordered="false" :bodyStyle="{backgroundColor: '#e1e4e8'}">
- <div slot="extra">
+ <div class="task-card">
+ <div class="task-head">
+ <h3 class="title"><span v-if="count">{{count}}</span>{{title}}</h3>
+ <div class="actions" style="float: right">
<a-icon class="add" type="plus" draggable="true"/>
<a-icon class="more" style="margin-left: 8px" type="ellipsis" />
</div>
- <slot></slot>
- </a-card>
+ </div>
+ <div class="task-content">
+ <draggable :options="dragOptions">
+ <slot></slot>
+ </draggable>
+ </div>
+ </div>
</template>
<script>
-import ACard from 'ant-design-vue/es/card/Card'
import AIcon from 'ant-design-vue/es/icon/icon'
+import Draggable from 'vuedraggable'
+
+const dragOptions = {
+ sort: true,
+ scroll: true,
+ scrollSpeed: 2,
+ animation: 150,
+ ghostClass: 'dragable-ghost',
+ chosenClass: 'dragable-chose',
+ dragClass: 'dragable-drag'
+}
+
export default {
name: 'TaskCard',
- components: {AIcon, ACard},
- props: ['title'],
+ components: {AIcon, Draggable},
+ props: ['title', 'group'],
data () {
return {
+ dragOptions: {...dragOptions, group: this.group}
+ }
+ },
+ computed: {
+ count () {
+ return this.$slots.default.length
}
}
}
</script>
-<style lang="less" scoped>
+<style lang="less">
.task-card{
width: 33.33%;
- font-size: 24px;
- font-weight: bolder;
+ padding: 8px 8px;
background-color: #e1e4e8;
- .add{
- cursor: pointer;
- }
- .more{
- cursor: pointer;
+ border-radius: 6px;
+ border: 1px solid #d1d4d8;
+ .task-head{
+ margin-bottom: 8px;
+ .title{
+ display: inline-block;
+ span{
+ display: inline-block;
+ border-radius: 10px;
+ margin: 0 8px;
+ font-size: 12px;
+ padding: 2px 6px;
+ background-color: rgba(27,31,35,0.15);
+ }
+ }
+ .actions{
+ display: inline-block;
+ float: right;
+ font-size: 18px;
+ font-weight: bold;
+ i{
+ cursor: pointer;
+ }
+ }
}
}
</style>
diff --git a/src/components/task/TaskItem.vue b/src/components/task/TaskItem.vue
index 0dca8a0..37ebd48 100644
--- a/src/components/task/TaskItem.vue
+++ b/src/components/task/TaskItem.vue
@@ -16,9 +16,13 @@ export default {
<style lang="less" scoped>
.task-item{
margin-bottom: 16px;
- transition: all .3s;
+ box-shadow: 0 1px 1px rgba(27,31,35,0.1);
+ border-radius: 6px;
+ color: #24292e;
& :hover{
cursor: move;
+ box-shadow: 0 1px 1px rgba(27,31,35,0.15);
+ border-radius: 6px;
}
}
</style>