myHeader.vue
<template> <div class="todo-header"> <input type="text" placeholder="请输入你的任务名称,按回车键确认" @keydown.enter="addHoby"/> </div> </template> <script> //引入nanoid 方法:npm i nanoid import {nanoid} from 'nanoid' export default { name: "myHeader", props:["addTodo"],//不要忘记引号 methods:{ addHoby(e){ //对输入内容进行判断,空的就不添加 if(!e.target.value) return const inputData = e.target.value const itemObj = {id:nanoid(),title:inputData,todone:false} console.log(itemObj) //不要忘了写this this.addTodo(itemObj); //将输入框清空 e.target.value = ''; } } }; </script> <style scoped> /*header*/ .todo-header input { width: 560px; height: 28px; font-size: 14px; border: 1px solid #ccc; border-radius: 4px; padding: 4px 7px; } .todo-header input:focus { outline: none; border-color: rgba(82, 168, 236, 0.8); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); } </style>
myList.vue
<template> <ul class="todo-main"> <myItem v-for="item in todos" :key="item.id" :todosItem="item" :changeTodoDone='changeTodoDone' :deleTodos='deleTodos'></myItem> </ul> </template> <script> import myItem from "./myItem.vue"; export default { name: "myList", components: {myItem}, props:['todos','changeTodoDone','deleTodos'], }; </script> <style scoped> /*main*/ .todo-main { margin-left: 0px; border: 1px solid #ddd; border-radius: 2px; padding: 0px; } .todo-empty { height: 40px; line-height: 40px; border: 1px solid #ddd; border-radius: 2px; padding-left: 5px; margin-top: 10px; } </style>
myItem.vue
<template> <li> <label> <input type="checkbox" :checked="todosItem.todone" @change="showId(todosItem.id)"/> <span v-text="todosItem.title"></span> </label> <button class="btn btn-danger" @click="dele(todosItem.id)">删除</button> </li> </template> <script> export default { name: "myItem", props:["todosItem","changeTodoDone","deleTodos"], methods:{ showId(id){ console.log(id) //通知app组建中的todos中该id的todone改变true或false this.changeTodoDone(id) }, dele(id){ console.log(id) if(confirm('确定删除?')) this.deleTodos(id) //通知app组建中的todos中删除该id的数据 } } }; </script> <style scoped> /*item*/ li { list-style: none; height: 36px; line-height: 36px; padding: 0 5px; border-bottom: 1px solid #ddd; } li label { float: left; cursor: pointer; } li label li input { vertical-align: middle; margin-right: 6px; position: relative; top: -1px; } li button { float: right; display: none; margin-top: 3px; } li:before { content: initial; } li:last-child { border-bottom: none; } li:hover{ background-color: darkgray; } /*鼠标悬浮时显示删除按键*/ li:hover button{ display: block; } </style>
myFoot.vue
<template> <div class="todo-footer"> <label> <!--checked为true勾中,false不勾 第一种写法 <input type="checkbox" :checked="isAll" @change="chengAll" /> 第二种写法 注意:v-model前没有: --> <input type="checkbox" v-model="isAll" /> </label> <span> <span>已完成{{ doneNum }}</span> / 全部{{ todos.length }} </span> <!--该标签是button,不能用@change--> <button class="btn btn-danger" @click="clearn">清除已完成任务</button> </div> </template> <script> export default { name: "myfoot", props: ["todos", "checkedAll","clearWork"], computed: { doneNum() { //pre当前值/上一次的值 currten为todos的item项 return this.todos.reduce( (pre, currten) => pre + (currten.todone ? 1 : 0), 0 ); }, /*isAll() { // 判断选中的数量和todos的总量已否相等 return this.doneNum === this.todos.length && this.todos.length > 0; }, methods: { chengAll(e) { console.log(e.target.checked, 66); this.checkedAll(e.target.checked); }, },*/ isAll:{ get(){ return this.doneNum === this.todos.length && this.todos.length > 0 }, set(val){ console.log(val) this.checkedAll(val); } } }, methods:{ clearn(){ console.log(44) this.clearWork() } } }; </script> <style scoped> /*footer*/ .todo-footer { height: 40px; line-height: 40px; padding-left: 6px; margin-top: 5px; } .todo-footer label { display: inline-block; margin-right: 20px; cursor: pointer; } .todo-footer label input { position: relative; top: -1px; vertical-align: middle; margin-right: 5px; } .todo-footer button { float: right; margin-top: 5px; } </style>
app.vue
<template> <div id="root"> <div class="todo-container"> <div class="todo-wrap"> <myHeader :addTodo = 'addTodo'></myHeader> <myList :todos="todos" :changeTodoDone="changeTodoDone" :deleTodos="deleTodos"></myList> <myFoot :todos='todos' :checkedAll="checkedAll" :clearWork='clearWork'></myFoot> </div> </div> </div> </template> <script> import myHeader from "./components/myHeader.vue"; import myList from "./components/myList.vue"; import myFoot from "./components/myFoot.vue"; export default { name: "App", components: {myHeader,myList,myFoot}, methods:{ //新增事项 addTodo(value){ this.todos.unshift(value) }, //勾选or取消勾选 changeTodoDone(value){ this.todos.forEach((item)=>{ if(item.id === value) item.todone = !item.todone }) }, //删除数据 deleTodos(id){ this.todos = this.todos.filter((item)=>{ return item.id !== id }) }, //全选or全不选 checkedAll(state){ this.todos.forEach((item)=>{ item.todone = state }) }, //删除已选任务 clearWork(){ console.log(555) this.todos = this.todos.filter((item)=>{ return !item.todone }) } }, data(){ return{ todos:[ {id:'001',title:'喝酒',todone:false}, {id:'002',title:'抽烟',todone:true}, {id:'003',title:'烫头',todone:false} ] } } }; </script> <style> /*base*/ body { background: #fff; } .btn { display: inline-block; padding: 4px 12px; margin-bottom: 0; font-size: 14px; line-height: 20px; text-align: center; vertical-align: middle; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); border-radius: 4px; } .btn-danger { color: #fff; background-color: #da4f49; border: 1px solid #bd362f; } .btn-danger:hover { color: #fff; background-color: #bd362f; } .btn:focus { outline: none; } .todo-container { width: 600px; margin: 0 auto; } .todo-container .todo-wrap { padding: 10px; border: 1px solid #ddd; border-radius: 5px; } </style>