IMWeb训练营作业第一次

sinat_26186155

于 2017-04-20 02:24:14 发布

阅读量308

点赞数

文章标签： vue2 element vuex IMWeb

本文链接：https://blog.csdn.net/sinat_26186155/article/details/70254195

版权

简介

这个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>