【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

---