refactor: TaskCard components

iczer

2018-08-25 2cef87a6311e33f17ef2e77e78c55a5a6a927e04

refactor: TaskCard components

 src/App.vue

@@ -18,11 +18,20 @@
}
</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>

 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 @@
}
</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>

 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>

 src/components/task/TaskItem.vue

@@ -16,9 +16,13 @@
<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>