IMWeb训练营作业第一次

简介

这个Todo项目使用Vue.js 和 Element组件构建。

• Vue 2 渐进式框架
• Vuex 应用设计的状态管理架构
• Element 基于 Vue 2.0 的组件库
• webpack 构建工具

体验项目

在线demo网址 https://easyli.github.io/vue-todolist

欢迎提 issue

代码

<template>  <div>    <!--         删除todo 对话框 -->    <el-dialog v-model="deleteDialogVisible" size="large" title="删除 TODO 吗?">      <span slot="footer" class="dialog-footer">        <el-button @click="deleteDialogVisible = false">取消</el-button>        <el-button @click="remove(removeIndex)" type="primary">确认</el-button>      </span>    </el-dialog>    <!--   新建一个todo -->    <el-row type="flex" justify="center">      <el-col :xs="22" :sm="18" :md="16" :lg="12">        <transition name="fade" appear>          <el-input  id="input" placeholder="新建一个TODO" v-model="input" icon="plus" :on-icon-click="add" @keyup.native.enter="add"></el-input>        </transition>      </el-col>    </el-row>    <!--   TODO Cards -->    <el-row type="flex" justify="center">      <el-col :xs="22" :sm="18" :md="16" :lg="12">        <!--       No tasks / instructions -->        <el-row v-if="items.length === 0" class="instruction">          <transition name="fade" appear>            <div>              <h2>Jack's  <span style="color: #20A0FF">Todolist</span> 项目。</h2>              <p>填写你的Todo开始行动吧</p>            </div>          </transition>        </el-row>        <!--       列出所有todolist -->        <el-card v-else v-for="(item, index) in items" :class="item.classes" class="todo--card">          <el-row type="flex">            <!--   完成的todo -->            <el-col class="todo todo--check">              <i class="el-icon-check" @click="complete(index)"></i>            </el-col>            <!--    todo的项目 -->            <el-col class="todo todo--item" @click.native="!items[index].edit ? edit(index) : null">              <p v-if="!items[index].edit">{{ item.text }}</p>              <!--  编辑区域-->              <el-input v-else v-model.trim="items[index].text" @keyup.native.enter="edit(index)"></el-input>            </el-col>            <el-col class="todo todo--icon" style="display: flex">              <i class="el-icon-edit" @click="edit(index)"></i>              <i class="el-icon-close" @click="(deleteDialogVisible = true, removeIndex = index)"></i>            </el-col>          </el-row>        </el-card>        <el-row style="text-align: center; margin-top: 2em">          <el-col>            <transition name="fade-delay">              <el-button type="primary" v-if="clearVisible" @click="clear">全部删除</el-button>            </transition>          </el-col>        </el-row>      </el-col>    </el-row>  </div></template><script>class Item {  constructor(text) {    this.text = text;    this.classes = {      completed: false,      'slide-in': true,    };    this.edit = false;  }}export default {  // 数据  data () {    return {      clearVisible: false,      deleteDialogVisible: false,      input: null,      items: [],      removeIndex: null,    }  },   computed: {    incomplete() {      // 所有已完成任务      let incomplete = this.items.filter(el => {        return el.classes.completed == false;      });      return incomplete;    }  },  methods: {    // 添加新的todo    add() {      if(this.input !== null) {        let newItem = new Item(this.input.trim());        this.items.push(newItem);        this.input = null;      } else {        this.$message.warning('添加新的项目。');      }    },    // 清除已完成任务    clear() {      this.items = [];      this.clearVisible = false;    },    // 编辑完成项目    complete(index) {      let itemClass = this.items[index].classes;      itemClass.completed = !itemClass.completed;      itemClass['slide-in'] = !itemClass['slide-in'];      // 移动新todo到数组的尾部      //this.items.push(this.items.splice(index, 1)[0]);      // 检查所有已完成项目, 如果全部完成给出提示       if(this.incomplete.length === 0) {        this.$message.success('干得漂亮!');      }    },    // 编辑todo项目    edit(index) {      this.items[index].edit = !this.items[index].edit;    },    // 移除todo项目    remove(index) {      this.items.splice(index, 1);      this.deleteDialogVisible = false;    },    showClear() {      // 检测所有todo是否完成      if(this.incomplete.length < 1 && this.items.length > 0) {        this.clearVisible = true;      } else {        this.clearVisible = false;      }    },    },  watch: {    incomplete() {      // 监控所有todo是否都完成      if(this.incomplete.length < 1 && this.items.length > 0) {        this.clearVisible = true;      } else {        this.clearVisible = false;      }    },  }}</script>

代码网址 https://github.com/easyli/vue-todolist
　

预览图

如下: