todolist實作删除的功能_Todo List: Vue待辦事項任務管理 - 第一章

前言

如果您所在公司有用過類似的todo list産品，那應該對其不是很陌生。todo list（待辦事項清單），非常有名的todo list産品有Teambition，JIRA等等。Teambition是收費的，而且價格也不是很便宜啦（但是人家的功能确實還可以，可謂非常強大）。

是以，就在自己倒騰一個簡單的，有興趣的同學可以持續關注。

本次《todo list: Vue待辦事項任務管理》，分為一下章節：

第一章: 初識（項目搭建、基本功能元件實作）

第二章: 資料動态化處理（localStorage + Vuex），可新增，可編輯

第三章：待辦事項自定義分組

第四章：待辦事項添加描述圖檔等資訊

第五章：可線上操作，入庫Mysql

第六章：多人協同處理待辦事項，權限管理

第七章：完結：線上釋出

初步定義7個章節，實際開發中有可能有所增減。

腳手架搭建項目

vue init webpack todo-list

然後我們來看看整個項目結構

除了紅框辨別以外，全部都是自動生成的。

大家也看到了app.styl樣式檔案，這裡我用到了stylus，怎麼加入它了？？？

npm i stylus stylus-loader -S
           

安裝後，修改

build/utils.js

檔案

const postcssLoader = {
  ...
}

// 增加stylusLoader
const stylusLoader = {
  loader: 'stylus-loader',
  options: {
    sourceMap: options.sourceMap
  }
}

function generateLoaders (loader, loaderOptions) {
  // 數組增加stylusLoader
  const loaders = options.usePostCSS ? [stylusLoader, cssLoader, postcssLoader] : [cssLoader]
  ...
}
           

這樣，即可使用stylus了。

vuedraggable

看名字，大家應該就知道vuedraggable是什麼了，vue的拖拽元件。先看看示例：

看這個圖，有沒有覺得它就是為了Todo List量身定做的一樣。

vuedraggable git位址

npm i vuedraggable -S
           

安裝後，我們來看看如何具體使用。

Todo List基礎元件

我們在components目錄下建立

list.vue

、

list-item.vue

2個檔案，作為基礎元件，list.vue是每個分組清單、list-item.vue是清單裡面的每個任務。

list.vue的html代碼

<div id="list" class="clearfix">
  <div class="list-group" v-for="(item, index) in listData" :key="index">
    <div class="list-title">{{item.title}}</div>
    <draggable class="draggable" :list="item.list" group="people">
      <transition-group>
        <div class="draggable-item" v-for="element in item.list" :key="element.id">
          <list-item :objData="element"></list-item>
        </div>
      </transition-group>
    </draggable>
  </div>
</div>
           

list.vue的javascript代碼

import ListItem from './list-item'
import Draggable from 'vuedraggable'

export default {
  props: {
    listData: {
      type: [Array],
      default: () => []
    }
  },
  components: {
    ListItem,
    Draggable
  }
}
           

這裡的Draggable就是上面的vuedraggable元件，用法也是很簡單拉。引入子產品後

<draggable class="draggable" :list="list" group="people">
  <transition-group>
    <div class="draggable-item" v-for="element in list" :key="element.id">
      {{element.name}}
    </div>
  </transition-group>
</draggable>
           

list.vue對應的樣式是主要部分(stylus代碼)

#list
  height 100%
  background-color #f5f5f5
  padding 20px
  .list-group
    float left
    width 240px
    height 100%
    margin-right 20px
    .list-title
      font-size 14px
      font-weight 700
      margin-bottom 10px
    .draggable
      height 100%
      .draggable-item
        margin-bottom 8px
           

list-item.vue的html代碼

<template>
  <div class="item">
    <span>{{objData.name}}</span>
  </div>
</template>

<script>
export default {
  props: {
    objData: {
      type: [Object],
      default: () => {}
    }
  }
}
</script>

<style >
  @import './list-item.styl';
</style>
           

這個目前就超級的簡單了，把對象裡面的name顯示出來即可，後面主要圍繞這個做功能了。

接下來，就是引用list.vue元件了。

引用components/list.vue元件

<template>
  <list :listData="todoData"></list>
</template>

<script>
import List from '../components/list'

export default {
  data () {
    return {
      todoData: [{
        title: '待處理',
        list: [{
          id: 1,
          name: '測試1'
        }...]
      }, {
        title: '進行中',
        list: [{
          id: 6,
          name: '測試6'
        }...]
      }, {
        title: '已完成',
        list: [{
          id: 11,
          name: '測試11'
        }...]
      }]
    }
  },
  components: {
    List
  }
}
</script>
           

總結

第一章節的核心部分就是

draggable

元件的運用，然後稍加樣式，即可形成todo list的錐形。後續内容會持續更新，請持續關注。

作者：向建峰_Javan

連結：http://www.imooc.com/article/287012

來源：慕課網

本文首次釋出于慕課網 ，轉載請注明出處，謝謝合作