最近比较忙,视频还没来得及看,根据自己的想法随手写了一个,虽然是个简单的练习项目,也随手加上了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