Vue50 todolist自界说事件版本

代码

MyFooter.vue

1. <template>
2.         <div class="todo-footer" v-show="total">
3.                 <label>
4.                         <!-- <input type="checkbox" :checked="isAll" @change="checkAll"/> -->
5.                         <input type="checkbox" v-model="isAll"/>
6.                 </label>
7.                 <span>
8.                         <span>已完成{{doneTotal}}</span> / 全部{{total}}
9.                 </span>
10.                 <button class="btn btn-danger" @click="clearAll">清除已完成任务</button>
11.         </div>
12. </template>
14. <script>
15.         export default {
16.                 name:'MyFooter',
17.                 props:['todos'],
18.                 computed: {
19.                         //总数
20.                         total(){
21.                                 return this.todos.length
22.                         },
23.                         //已完成数
24.                         doneTotal(){
25.                                 //此处使用reduce方法做条件统计
26.                                 /* const x = this.todos.reduce((pre,current)=>{
27.                                         console.log('@',pre,current)
28.                                         return pre + (current.done ? 1 : 0)
29.                                 },0) */
30.                                 //简写
31.                                 return this.todos.reduce((pre,todo)=> pre + (todo.done ? 1 : 0) ,0)
32.                         },
33.                         //控制全选框
34.                         isAll:{
35.                                 //全选框是否勾选
36.                                 get(){
37.                                         return this.doneTotal === this.total && this.total > 0
38.                                 },
39.                                 //isAll被修改时set被调用
40.                                 set(value){
41.                                         // this.checkAllTodo(value)
42.                                         this.$emit('checkAllTodo',value)
43.                                 }
44.                         }
45.                 },
46.                 methods: {
47.                         /* checkAll(e){
48.                                 this.checkAllTodo(e.target.checked)
49.                         } */
50.                         //清空所有已完成
51.                         clearAll(){
52.                                 // this.clearAllTodo()
53.                                 this.$emit('clearAllTodo')
54.                         }
55.                 },
56.         }
57. </script>
59. <style scoped>
60.         /*footer*/
61.         .todo-footer {
62.                 height: 40px;
63.                 line-height: 40px;
64.                 padding-left: 6px;
65.                 margin-top: 5px;
66.         }
68.         .todo-footer label {
69.                 display: inline-block;
70.                 margin-right: 20px;
71.                 cursor: pointer;
72.         }
74.         .todo-footer label input {
75.                 position: relative;
76.                 top: -1px;
77.                 vertical-align: middle;
78.                 margin-right: 5px;
79.         }
81.         .todo-footer button {
82.                 float: right;
83.                 margin-top: 5px;
84.         }
85. </style>

复制代码

MyHeader.vue

1. <template>
2.         <div class="todo-header">
3.                 <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="title" @keyup.enter="add"/>
4.         </div>
5. </template>
7. <script>
8.         import {nanoid} from 'nanoid'
9.         export default {
10.                 name:'MyHeader',
11.                 data() {
12.                         return {
13.                                 //收集用户输入的title
14.                                 title:''
15.                         }
16.                 },
17.                 methods: {
18.                         add(){
19.                                 //校验数据
20.                                 if(!this.title.trim()) return alert('输入不能为空')
21.                                 //将用户的输入包装成一个todo对象
22.                                 const todoObj = {id:nanoid(),title:this.title,done:false}
23.                                 //通知App组件去添加一个todo对象
24.                                 this.$emit('addTodo',todoObj,1,2,3)
25.                                 //清空输入
26.                                 this.title = ''
27.                         }
28.                 },
29.         }
30. </script>
32. <style scoped>
33.         /*header*/
34.         .todo-header input {
35.                 width: 560px;
36.                 height: 28px;
37.                 font-size: 14px;
38.                 border: 1px solid #ccc;
39.                 border-radius: 4px;
40.                 padding: 4px 7px;
41.         }
43.         .todo-header input:focus {
44.                 outline: none;
45.                 border-color: rgba(82, 168, 236, 0.8);
46.                 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
47.         }
48. </style>

复制代码

MyItem.vue

1. <template>
2.         <li>
3.                 <label>
4.                         <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/>
5.                         <!-- 如下代码也能实现功能，但是不太推荐，因为有点违反原则，因为修改了props -->
6.                         <!-- <input type="checkbox" v-model="todo.done"/> -->
7.                         <span>{{todo.title}}</span>
8.                 </label>
9.                 <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
10.         </li>
11. </template>
13. <script>
14.         export default {
15.                 name:'MyItem',
16.                 //声明接收todo、checkTodo、deleteTodo
17.                 props:['todo','checkTodo','deleteTodo'],
18.                 methods: {
19.                         //勾选or取消勾选
20.                         handleCheck(id){
21.                                 //通知App组件将对应的todo对象的done值取反
22.                                 this.checkTodo(id)
23.                         },
24.                         //删除
25.                         handleDelete(id){
26.                                 if(confirm('确定删除吗？')){
27.                                         //通知App组件将对应的todo对象删除
28.                                         this.deleteTodo(id)
29.                                 }
30.                         }
31.                 },
32.         }
33. </script>
35. <style scoped>
36.         /*item*/
37.         li {
38.                 list-style: none;
39.                 height: 36px;
40.                 line-height: 36px;
41.                 padding: 0 5px;
42.                 border-bottom: 1px solid #ddd;
43.         }
45.         li label {
46.                 float: left;
47.                 cursor: pointer;
48.         }
50.         li label li input {
51.                 vertical-align: middle;
52.                 margin-right: 6px;
53.                 position: relative;
54.                 top: -1px;
55.         }
57.         li button {
58.                 float: right;
59.                 display: none;
60.                 margin-top: 3px;
61.         }
63.         li:before {
64.                 content: initial;
65.         }
67.         li:last-child {
68.                 border-bottom: none;
69.         }
71.         li:hover{
72.                 background-color: #ddd;
73.         }
74.        
75.         li:hover button{
76.                 display: block;
77.         }
78. </style>

复制代码

MyList.vue

1. <template>
2.         <ul class="todo-main">
3.                 <MyItem
4.                         v-for="todoObj in todos"
5.                         :key="todoObj.id"
6.                         :todo="todoObj"
7.                         :checkTodo="checkTodo"
8.                         :deleteTodo="deleteTodo"
9.                 />
10.         </ul>
11. </template>
13. <script>
14.         import MyItem from './MyItem'
16.         export default {
17.                 name:'MyList',
18.                 components:{MyItem},
19.                 //声明接收App传递过来的数据，其中todos是自己用的，checkTodo和deleteTodo是给子组件MyItem用的
20.                 props:['todos','checkTodo','deleteTodo']
21.         }
22. </script>
24. <style scoped>
25.         /*main*/
26.         .todo-main {
27.                 margin-left: 0px;
28.                 border: 1px solid #ddd;
29.                 border-radius: 2px;
30.                 padding: 0px;
31.         }
33.         .todo-empty {
34.                 height: 40px;
35.                 line-height: 40px;
36.                 border: 1px solid #ddd;
37.                 border-radius: 2px;
38.                 padding-left: 5px;
39.                 margin-top: 10px;
40.         }
41. </style>

复制代码

App.vue

1. <template>
2.         <div id="root">
3.                 <div class="todo-container">
4.                         <div class="todo-wrap">
5.                                 <MyHeader @addTodo="addTodo"/>
6.                                 <MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/>
7.                                 <MyFooter :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/>
8.                         </div>
9.                 </div>
10.         </div>
11. </template>
13. <script>
14.         import MyHeader from './components/MyHeader'
15.         import MyList from './components/MyList'
16.         import MyFooter from './components/MyFooter.vue'
18.         export default {
19.                 name:'App',
20.                 components:{MyHeader,MyList,MyFooter},
21.                 data() {
22.                         return {
23.                                 //由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）
24.                                 todos:JSON.parse(localStorage.getItem('todos')) || []
25.                         }
26.                 },
27.                 methods: {
28.                         //添加一个todo
29.                         addTodo(todoObj){
30.                                 this.todos.unshift(todoObj)
31.                         },
32.                         //勾选or取消勾选一个todo
33.                         checkTodo(id){
34.                                 this.todos.forEach((todo)=>{
35.                                         if(todo.id === id) todo.done = !todo.done
36.                                 })
37.                         },
38.                         //删除一个todo
39.                         deleteTodo(id){
40.                                 this.todos = this.todos.filter( todo => todo.id !== id )
41.                         },
42.                         //全选or取消全选
43.                         checkAllTodo(done){
44.                                 this.todos.forEach((todo)=>{
45.                                         todo.done = done
46.                                 })
47.                         },
48.                         //清除所有已经完成的todo
49.                         clearAllTodo(){
50.                                 this.todos = this.todos.filter((todo)=>{
51.                                         return !todo.done
52.                                 })
53.                         }
54.                 },
55.                 watch: {
56.                         todos:{
57.                                 deep:true,
58.                                 handler(value){
59.                                         localStorage.setItem('todos',JSON.stringify(value))
60.                                 }
61.                         }
62.                 },
63.         }
64. </script>
66. <style>
67.         /*base*/
68.         body {
69.                 background: #fff;
70.         }
71.         .btn {
72.                 display: inline-block;
73.                 padding: 4px 12px;
74.                 margin-bottom: 0;
75.                 font-size: 14px;
76.                 line-height: 20px;
77.                 text-align: center;
78.                 vertical-align: middle;
79.                 cursor: pointer;
80.                 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
81.                 border-radius: 4px;
82.         }
83.         .btn-danger {
84.                 color: #fff;
85.                 background-color: #da4f49;
86.                 border: 1px solid #bd362f;
87.         }
88.         .btn-danger:hover {
89.                 color: #fff;
90.                 background-color: #bd362f;
91.         }
92.         .btn:focus {
93.                 outline: none;
94.         }
95.         .todo-container {
96.                 width: 600px;
97.                 margin: 0 auto;
98.         }
99.         .todo-container .todo-wrap {
100.                 padding: 10px;
101.                 border: 1px solid #ddd;
102.                 border-radius: 5px;
103.         }
104. </style>

复制代码

运行

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。