这个示例是模拟官网示例款式和功用用我本身的体式格局写的,基本上没有看官网的源码,只参考自定义指令。让我们一步步来讨论一下。官网demo
要完成的功用
- 单条增加todo
- 单条删除todo
- 双击编辑todo
- 单条todo已完成响应款式状况转变
- 悉数todo是已完成响应款式状况转变
- 消灭悉数已完成todos
- 待办todos数目显现
- 一切todos,已完成todos,未完成todos挑选
单条增加todo
<input type="text" class="todos_add" placeholder="What needs to be done?"
@keyup.enter="addTodo($event.target)" //绑定enter事宜
ref="currentInput">//操纵input元素使enter一下以后清空输入框内容
data() {//一些初始化数据
return {
todolists: [],
dataStatus: ["All", "Active", "Completed"],
dataStatusIndex: 0,
whichShow: true,
defaultShow: true
}
},
addTodo(e) { //增加todo
var val = e.value
if (val === "") {return} //假如输入内容为空则马上返回
this.todoLists = this.todoLists.concat({//运用concat这个api增加todo
value: val, //输入内容
isEditing: false, //是不是在编辑状况
isActive: false, //删除X图标是不是激活
isChecked: false //是不是已完成
})
this.$refs.currentInput.value = "" //按下enter增加todo以后把输入框value清零
window.localStorage.setItem("content",JSON.stringify(this.todoLists))//运用localStorage以JSON花样存储数据
},
把每条todo的对应状况都存在同一个对象当中,在操纵转变todo状况的时刻不会被一致处置惩罚,使得每条todo都有零丁的状况。
单条删除todo
<li class="content_todoList"
v-for="(list,index) in todoLists"
@mouseover="list.isActive = true" //鼠标移入todo转变对应todo的isActive状况
@mouseleave="list.isActive=false" //鼠标移出todo转变对应todo的isActive状况
<span class="el-icon-close content_todoList_delete"
:class="{show: list.isActive}" //动态绑定class使鼠标移动到某一todo显现X图标
@click="deleteTodo(index)"> //绑定删除单条todo事宜
</span>
</li>
deleteTodo(index) { //删除单条todo
this.todoLists.splice(index, 1)//运用splice的api
window.localStorage.setItem("content",JSON.stringify(todoLists)) //以JSON花样存储数据//localStorage存储数据
},
在每一个li
元素上绑定了鼠标移入和移除的事宜来动态的转变每一个todo的isActive,然后再运用isActive动态显现class。
双击编辑todo&&单条todo已完成
<input type="checkbox" class="checkBox"
v-model="list.isChecked">//双向绑定isChecked
<div class="content_todoList_main"
@dblclick="toEdit(list)" //双击事宜
v-show="!list.isEditing" //切换元素
:class="{deleted:list.isChecked}"> //动态绑定class该表已完成todo款式
{{list.value}}
</div>
<input type="text" class="content_todoList_main main_input"
v-model="list.value" //双向绑定可输入value
v-show="list.isEditing" //切换元素
v-todo-focus="list.value" //自定义指令,双击以后自动focus对焦
@blur="unEdit(list)"> //绑定blur落空核心事宜
methods: {
toEdit(obj) { //使增加的todothing可编辑
obj.isEditing = true
},
unEdit(obj) { //使增加的todothing不可编辑
obj.isEditing = false
},
}
directives: { //自定义focus指令,须要一个binding参数做推断
"todo-focus": function (el, binding) {
if (binding.value) {
el.focus()
}
}
}
经由过程每一个todo里的isEditing属性掌握show和是不是可编辑两个状况,双击div以后转变当前todo的isEditing为true,从而显现为input,input落空核心以后再经由过程blur事宜改成false。
经由过程todo的idChecked来掌握是不是已完成,从而动态转变款式。
悉数todos已完成
<span
class="icon-down el-icon-arrow-down" //运用element库做向下箭头icon
v-show="todoLists.length>0" //经由过程todoLists掌握是不是显现向下箭头icon
@click="selectAllTodos"></span> //悉数已完成事宜
selectAllTodos() { //设置一切todo为已完成,运用map的api经由过程todo的isChecked属性操纵
this.todoLists.map(todo => todo.isChecked = todo.isChecked ? false : true)
}
待办todos数目显现
<div class="data_times" v-show="times === 0"> //times为0显现item,大于0显现items,细节必定成败
<span>{{times}}</span>  item left
</div>
<div class="data_times" v-show="times > 0">
<span>{{times}}</span>  items left</div>
computed: {
times() { //运用盘算属性盘算待办todos的次数
let todoArr = this.todoLists
let times = 0
for (let i = 0; i < todoArr.length; i++) {
if (todoArr[i].isChecked === false) {
times++
}
}
return times
}
},
运用了盘算属性对todoLists盘算,用for轮回刷选出idChecked为true的累加,末了返回times。
消灭悉数已完成todos
<div class="data_clearTodos"
@click="clearTodos"
v-show="times < todoLists.length"> //假如待办事宜次数小于总todoLists长度就显现“clear completed”
<a href="#">clear completed</a>
</div>
<div class="data_clearTodos"
@click="clearTodos"
v-show="times === todoLists.length"> //假如待办事宜次数即是总todoLists长度就显现“clear completed”
<a href="#"></a>
</div>
clearTodos() { //清空已完成的todoLists,运用filter的api举行挑选
this.todoLists = this.todoLists.filter(todo => todo.isChecked === false)
window.localStorage.setItem("content",JSON.stringify(this.todoLists)) //以json花样存储数据
},
假如待办todos的times小于todoLists长度,就证实有已完成的todo,就能够显现“clear completed”,假如相称就申明没有已完成的todo。
三种状况挑选
一切todos,已完成todos,未完成todos挑选
<li class="content_todoList"
v-show="defaultShow || (whichShow?list.isChecked:!list.isChecked)">
<div class="data_status">
<a href="#"
:class="{active: index === dataStatusIndex}" //动态class完成tab切换
v-for="(item ,index) in dataStatus" v-for轮回
@click="switchStatus(index)" //切换差别tab显现内容
:key="index">
{{item}}
</a>
</div>
switchStatus(index) { //经由过程if前提推断操纵
this.dataStatusIndex = index
if (this.dataStatus[index] === "Active") {
this.defaultShow = false
this.whichShow = false
} else if (this.dataStatus[index] === "Completed") {
this.defaultShow = false
this.whichShow = true
} else if (this.dataStatus[index] === "All") {
this.defaultShow = true
}
},
我这里是同时if前提句推断操纵,有点贫苦,现在还没有想出来其他计划。在li
元素运用三元运算符和或运算符举行操纵显现差别状况的todos。
完全代码
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
input {
outline: none;
}
ul,
li,
ol {
list-style: none;
}
#app {
width: 800px;
height: 900px;
margin: 0 auto;
text-align: center;
background-color: rgb(245, 245, 245);
padding: 24px 0;
}
#app .header {
font-size: 48px;
}
.content {
width: 72%;
margin: 0 auto;
box-shadow: 0 3px 3px 2px rgba(0, 0, 0, 0.25);
position: relative;
}
.icon-down {
position: absolute;
font-size: 24px;
top: 16px;
left: 16px;
cursor: pointer;
}
#app .content .todos_add {
width: 100%;
height: 56px;
padding: 16px 56px;
font-size: 24px;
border: 1px solid transparent;
}
.content_todoLists {
position: relative;
z-index: 3;
}
.content_todoList {
display: flex;
flex-direction: row;
border-top: 1px solid #ccc;
font-size: 24px;
padding: 8px;
background-color: white;
align-items: center;
}
.checkBox {
width: 20px;
height: 20px;
margin-left: 10px;
}
.content_todoList_main {
flex: 1;
text-align: left;
margin-left: 16px;
font-size: 20px;
padding: 6px 0;
}
.main_input {
position: relative;
z-index: 1;
}
.content_todoList_delete {
position: absolute;
right: 16px;
color: rgb(252, 55, 55);
font-weight: 500;
display: none;
cursor: pointer;
}
.show {
display: block;
}
.deleted {
text-decoration-line: line-through;
color: #bbb;
}
.show:hover {
color: rgb(255, 0, 0);
font-weight: 700;
}
::-moz-placeholder {
color: rgb(221, 218, 218);
}
::-webkit-input-placeholder {
color: rgb(221, 218, 218);
}
:-ms-input-placeholder {
color: rgb(221, 218, 218);
}
.data {
display: flex;
justify-content: space-between;
padding: 8px;
font-size: 14px;
font-weight: 300;
color: rgb(145, 145, 145);
}
a {
text-decoration: none;
color: rgb(145, 145, 145);
}
.data_times {
width: 73px;
}
.data_clearTodos {
width: 142px;
}
.data_status a {
display: inline-block;
border: 1px solid transparent;
border-radius: 2px;
padding: 1px 4px;
margin: 0 2px;
}
.data_status a:hover {
border-color: #bbb;
}
.data_clearTodos a:hover {
text-decoration-line: underline;
}
.active {
box-shadow: 0 0 1px black;
}
</style>
<body>
<div id="app">
<header class="header">todos</header>
<div class="content">
<span class="icon-down el-icon-arrow-down"
v-show="todoLists.length>0"
@click="selectAllTodos">
</span>
<input type="text" class="todos_add" placeholder="What needs to be done?"
@keyup.enter="addTodo($event.target)"
ref="currentInput">
<ul class="content_todoLists">
<li v-for="(list,index) in todoLists" class="content_todoList"
@mouseover="list.isActive = true"
@mouseleave="list.isActive=false"
v-show="defaultShow || (whichShow?list.isChecked:!list.isChecked)">
<input type="checkbox" class="checkBox" v-model="list.isChecked">
<div class="content_todoList_main" @dblclick="toEdit(list)" v-show="!list.isEditing" :class="{deleted:list.isChecked}">
{{list.value}}
</div>
<input type="text" class="content_todoList_main main_input"
v-model="list.value"
v-show="list.isEditing"
v-todo-focus="list.value"
@blur="unEdit(list)">
<span class="el-icon-close content_todoList_delete" :class="{show: list.isActive}" @click="deleteTodo(index)"></span>
</li>
</ul>
<div class="data" v-show="todoLists.length>0">
<div class="data_times" v-show="times === 0">
<span>{{times}}</span> item left
</div>
<div class="data_times" v-show="times > 0">
<span>{{times}}</span> items left
</div>
<div class="data_status">
<a href="#" :class="{active:index === dataStatusIndex}" v-for="(item,index) in dataStatus" @click="switchStatus(index)" :key="index">
{{item}}
</a>
</div>
<div class="data_clearTodos" @click="clearTodos" v-show="times < todoLists.length">
<a href="#">clear completed</a>
</div>
<div class="data_clearTodos" @click="clearTodos" v-show="times === todoLists.length">
<a href="#"></a>
</div>
</div>
</div>
</div>
</body>
<script>
let vm = new Vue({
el: "#app",
data() {
return {
todoLists: [],
dataStatus: ["All", "Active", "Completed"],
dataStatusIndex: 0,
whichShow: true,
defaultShow: true
}
},
computed: {
times() { //运用盘算属性盘算待办todos的次数
let todoArr = this.todoLists
let times = 0
for (let i = 0; i < todoArr.length; i++) {
if (todoArr[i].isChecked === false) {
times++
}
}
return times
}
},
methods: {
toEdit(obj) { //使增加的todo可编辑
obj.isEditing = true
},
unEdit(obj) { //使增加的todo不可编辑
obj.isEditing = false
},
addTodo(e) { //增加todo
var val = e.value
if (val === "") {
return
} //假如输入内容为空则马上返回
this.todoLists = this.todoLists.concat({ //运用concat这个api增加todo
value: val, //输入内容
isEditing: false, //是不是在编辑状况
isActive: false, //删除X图标是不是激活
isChecked: false //是不是已完成
})
this.$refs.currentInput.value = "" //按下enter增加todo以后把输入框value清零
window.localStorage.setItem("content", JSON.stringify(this.todoLists)) //运用localStorage以JSON花样存储数据
},
deleteTodo(index) { //删除todo
this.todoLists.splice(index, 1)
window.localStorage.setItem("content", JSON.stringify(this.todoLists)) //以json花样存储数据
},
switchStatus(index) { //试下下方三个状况切换,略贫苦
this.dataStatusIndex = index
if (this.dataStatus[index] === "Active") {
this.defaultShow = false
this.whichShow = false
} else if (this.dataStatus[index] === "Completed") {
this.defaultShow = false
this.whichShow = true
} else if (this.dataStatus[index] === "All") {
this.defaultShow = true
}
},
clearTodos() { //清空已完成的todoLists
this.todoLists = this.todoLists.filter(todo => todo.isChecked === false)
window.localStorage.setItem("content", JSON.stringify(this.todoLists)) //以json花样存储数据
},
selectAllTodos() { //设置一切todo为已完成
this.todoLists.map(todo => todo.isChecked = todo.isChecked ? false : true)
}
},
directives: { //自定义focus指令
"todo-focus": function (el, binding) {
if (binding.value) {
el.focus()
}
}
},
created() {
let myStorage = window.localStorage.getItem('content')
this.todoLists = JSON.parse(myStorage) || [] //由于todoLists初始值是null,运用或运算符,假如为null设为空数组
}
})
</script>