feat: add TaskCard components

chenghx

2018-08-24 94c172f41fa5d147152ac934fd954851c5f131aa

feat: add TaskCard components

 package.json

@@ -25,6 +25,7 @@
    "viser-vue": "^2.2.5",
    "vue": "^2.5.17",
    "vue-router": "^3.0.1",
    "vuedraggable": "^2.16.0",
    "vuex": "^3.0.1"
  },
  "devDependencies": {

 src/components/task/Index.vue

New file
@@ -0,0 +1,48 @@
<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>
    <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>
    <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>
  </div>
</template>

<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},
  data () {
    return {
      todoList,
      inproList,
      doneList
    }
  }
}
</script>

<style lang="less">
  .ghost{
    background-color: rgba(256, 256, 256, 0.5);
  }
  .chose{
    border: 1px dashed #aaaaaa;
  }
</style>

 src/components/task/TaskCard.vue

New file
@@ -0,0 +1,38 @@
<template>
    <a-card class="task-card" size="large" :title="title" :bordered="false" :bodyStyle="{backgroundColor: '#e1e4e8'}">
      <div slot="extra">
        <a-icon class="add" type="plus" draggable="true"/>
        <a-icon class="more" style="margin-left: 8px" type="ellipsis" />
      </div>
      <slot></slot>
    </a-card>
</template>

<script>
import ACard from 'ant-design-vue/es/card/Card'
import AIcon from 'ant-design-vue/es/icon/icon'
export default {
  name: 'TaskCard',
  components: {AIcon, ACard},
  props: ['title'],
  data () {
    return {
    }
  }
}
</script>

<style lang="less" scoped>
  .task-card{
    width: 33.33%;
    font-size: 24px;
    font-weight: bolder;
    background-color: #e1e4e8;
    .add{
      cursor: pointer;
    }
    .more{
      cursor: pointer;
    }
  }
</style>

 src/components/task/TaskItem.vue

New file
@@ -0,0 +1,24 @@
<template>
  <a-card class="task-item" type="inner">
    {{content}}
  </a-card>
</template>

<script>
import ACard from 'ant-design-vue/es/card/Card'
export default {
  name: 'TaskItem',
  props: ['content'],
  components: {ACard}
}
</script>

<style lang="less" scoped>
  .task-item{
    margin-bottom: 16px;
    transition: all .3s;
    & :hover{
      cursor: move;
    }
  }
</style>

 src/router/index.js

@@ -23,6 +23,7 @@
import Login from '@/components/login/Login'
import BasicDetail from '@/components/detail/BasicDetail'
import AdvancedDetail from '@/components/detail/AdvancedDetail'
import TaskCard from '@/components/task/Index'

Vue.use(Router)

@@ -205,6 +206,21 @@
              component: ServerError
            }
          ]
        },
        {
          path: '/components',
          redirect: '/components/taskcard',
          name: '小组件',
          icon: 'appstore',
          component: PageView,
          children: [
            {
              path: '/components/taskcard',
              name: '任务卡片',
              icon: 'none',
              component: TaskCard
            }
          ]
        }
      ]
    }

 yarn.lock

@@ -7646,6 +7646,10 @@
  dependencies:
    is-plain-obj "^1.0.0"

sortablejs@^1.7.0:
  version "1.7.0"
  resolved "http://registry.npm.taobao.org/sortablejs/download/sortablejs-1.7.0.tgz#80a2b2370abd568e1cec8c271131ef30a904fa28"

source-list-map@^2.0.0:
  version "2.0.0"
  resolved "http://registry.npm.taobao.org/source-list-map/download/source-list-map-2.0.0.tgz#aaa47403f7b245a92fbc97ea08f250d6087ed085"
@@ -8530,6 +8534,12 @@
  version "2.5.16"
  resolved "http://registry.npm.taobao.org/vue/download/vue-2.5.16.tgz#07edb75e8412aaeed871ebafa99f4672584a0085"

vuedraggable@^2.16.0:
  version "2.16.0"
  resolved "http://registry.npm.taobao.org/vuedraggable/download/vuedraggable-2.16.0.tgz#52127081a2adb3de5fabd214d404ff3eee63575a"
  dependencies:
    sortablejs "^1.7.0"

vuex@^3.0.1:
  version "3.0.1"
  resolved "http://registry.npm.taobao.org/vuex/download/vuex-3.0.1.tgz#e761352ebe0af537d4bb755a9b9dc4be3df7efd2"