【IMWeb训练营作业】基于vue的todolist练习

最近比较忙，视频还没来得及看，根据自己的想法随手写了一个，虽然是个简单的练习项目，也随手加上了vuex及vue-router，熟悉一下。

1.效果图

---

2.核心代码

<template>  <div class="panel">    <p class="panel-heading">      To-do panel    </p>    <div class="panel-block">      <p class="control has-icon">        <input class="input is-small"               type="text"               v-model="search"               placeholder="Search">        <span class="icon is-small icon-search"></span>      </p>    </div>    <p class="panel-tabs">      <a :class="{'is-active' : activeNav === item}"         v-for="item,index in nav"         :key="index"         @click="changeNav(item)">{{ item }}</a>    </p>    <label :class="[{'is-active' : item.finished},'panel-block', 'v-list']"           v-for="item,index in list"           :key="index">      <input type="checkbox"             v-if="activeNav != 'Deleted'"             v-model="item.finished">      <span :class="[{ 'is-finished' : item.finished },'v-txt']">{{ item.text }}</span>      <button class="delete is-small v-del-btn"              v-show="activeNav != 'Deleted'"              @click="del(index)"></button>    </label>    <div class="panel-block"         v-show="!addActive">      <button class="button is-primary is-outlined is-fullwidth"              @click="addActive = true">        Add a item      </button>    </div>    <div class="panel-block"         v-show="addActive">      <p class="control">        <input class="input"               v-focus               v-model.trim="addtext"               @blur="addActive=false;addtext=''"               @keyup.enter="addNow"               type="text"               placeholder="Press enter to add">      </p>    </div>  </div></template><script>import { mapState } from 'vuex'export default {  name: 'Panel',  created() {    this.list = this.all  },  data() {    return {      nav: ['All', 'Finished', 'Idle', 'Deleted'],      search: '',      activeNav: 'All',      list: [],      addActive: false,      addtext: ''    }  },  computed: {    ...mapState({      all: state => state.all,      deleted: state => state.deleted    }),    idle() {      return this.all.filter(item => {        return item.finished === false      })    },    finished() {      return this.all.filter(item => {        return item.finished === true      })    }  },  watch: {    search(n, o) {      this.list = this.all.filter(item => {        return item.text.indexOf(n) != -1      })    }  },  methods: {    changeNav(nav) {      this.activeNav = nav      this.list = this[nav.toLowerCase()]    },    del(index) {      this.$store.commit('CHANGE_DELETE', this.all[index])      this.$store.commit('REMOVE_ITEM', index)      this.changeNav(this.activeNav)    },    addNow() {      this.addActive = false      if (!this.addtext) return false      let payload = {        text: this.addtext,        finished: false      }      this.$store.dispatch('ADD', payload)      if(this.activeNav != 'All'){        this.changeNav('All')      }    }  },  directives: {    focus: (el) => {      el.focus()    }  }}</script>

---

3.功能

• 搜索： 在 search区域输入查找内容即可，支持模糊搜索
• 过滤： All, Finished, Idle, Deleted分别表示全部、已完成、未开始、已删除
• 添加： 点击Add a item输入内容回车即可
• 删除
• 完成

4.浏览器兼容

• 由于使用了bulma.css，本项目仅支持不低于IE10的现代浏览器。

5.DEMO

部署了一个小demo在自己的站点上面，希望得到你们的批评与建议，谢谢！ 详情请戳：TODOLIST

---