refactor: TaskCard components

src/App.vue

@@ -18,11 +18,20 @@ export default {
 }
 </script>
 
-<style>
+<style lang="less">
-#app {
+  //拖拽控件全局样式
-  /*font-family: 'Avenir', Helvetica, Arial, sans-serif;*/
+  :global{
-  /*-webkit-font-smoothing: antialiased;*/
+    .dragable-ghost{
-  /*-moz-osx-font-smoothing: grayscale;*/
+      border: 1px dashed #aaaaaa;
-  /*color: #2c3e50;*/
+      opacity: 0.65;
-}
+    }
+    .dragable-chose{
+      border: 1px dashed #aaaaaa;
+      opacity: 0.65;
+    }
+    .dragable-drag{
+      border: 1px dashed #aaaaaa;
+      opacity: 0.65;
+    }
+  }
 </style>

src/components/task/Index.vue

@@ -1,19 +1,13 @@
 <template>
   <div style="display: flex">
-    <task-card style="margin: 0 48px" title="ToDo">
+    <task-card class="task-card" title="ToDo" group="task">
-      <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" />
-        <task-item :key="index" v-for="(item, index) in todoList" :content="item" />
-      </draggable>
     </task-card>
-    <task-card style="margin: 0 48px" title="In Progress">
+    <task-card class="task-card" title="In Progress" group="task">
-      <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" />
-        <task-item :key="index" v-for="(item, index) in inproList" :content="item" />
-      </draggable>
     </task-card>
-    <task-card style="margin: 0 48px" title="Done">
+    <task-card class="task-card" title="Done" group="task">
-      <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" />
-        <task-item :key="index" v-for="(item, index) in doneList" :content="item" />
-      </draggable>
     </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">
+<style lang="less" scoped>
-  .ghost{
+  .task-card{
-    background-color: rgba(256, 256, 256, 0.5);
+    margin: 0 48px;
-  }
-  .chose{
-    border: 1px dashed #aaaaaa;
   }
 </style>

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 class="task-card">
-      <div slot="extra">
+    <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>
+    </div>
-    </a-card>
+    <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},
+  components: {AIcon, Draggable},
-  props: ['title'],
+  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;
+    padding: 8px 8px;
-    font-weight: bolder;
     background-color: #e1e4e8;
-    .add{
+    border-radius: 6px;
-      cursor: pointer;
+    border: 1px solid #d1d4d8;
-    }
+    .task-head{
-    .more{
+      margin-bottom: 8px;
-      cursor: pointer;
+      .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>

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>