效果演示

整体结构

main.js

1
2
3
4
5
6
7
8
9
10
11
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false
Vue.use(ElementUI)

new Vue({
  render: h => h(App)
}).$mount('#app')

App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <Header :addTodo="addTodo"/>
        <List :todos="todos" :deleteTodo="deleteTodo"/>
        <Footer :todos="todos" :deleteCheck="deleteCheck" :checkAllTodo="checkAllTodo"/>
      </div>
    </div>
  </div>
</template>

<script>
import {nanoid} from 'nanoid'
import Header from './components/Header.vue'
import List from './components/List.vue'
import Footer from './components/Footer.vue'

export default {
  name: 'App',
  components: {Header, List, Footer},
  data(){
    return {
      todos: [
        {id: nanoid(), title: '学习', done: false},
        {id: nanoid(), title: '再学习', done: false},
        {id: nanoid(), title: '继续学习', done: false}
      ]
    }
  },
  methods:{
    addTodo(title){
      this.todos.push({
        id: nanoid(),
        title:title,
        done: false
      })
    },
    deleteTodo(id){
      this.todos = this.todos.filter( todo => id !== todo.id )
    },
    deleteCheck(){
      this.todos = this.todos.filter( todo => {
        return !todo.done
      })
    },
    checkAllTodo(done){
      this.todos.forEach((todo)=>{
        todo.done = done
      })
    }
  }
}
</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>

Header.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<template>
  <div class="todo-header">
    <input style="width: 485px" type="text" v-model="title" placeholder="请输入你的任务名称"/>
    <el-button style="margin-top: 10px; margin-left: 6px" @click="add" type="primary" plain>添加</el-button>
  </div>
</template>

<script>
export default {
  name: "Header",
  props:["addTodo"],
  data(){
    return{
      title: ""
    }
  },
  methods:{
    add(){
      if(this.title != ""){
        if(confirm("确定添加吗？")){
          this.addTodo(this.title)
          this.title = ""
        }
      }
      else {
        alert("输入不能为空")
      }
    }
  }
}
</script>

<style scoped>
/*header*/
.todo-header input {
  width: 560px;
  height: 30px;
  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>

List.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<template>
  <ul class="todo-main">
    <Item v-for="todoObj in todos" :key="todoObj.id" :todo="todoObj" :deleteTodo="deleteTodo"/>
  </ul>
</template>

<script>
  import Item from '@/components/Item.vue'
  export default {
    name: "List",
    components: {Item},
    props:["todos","deleteTodo"]
  }
</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>

Item.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<template>
  <li>
    <label>
      <el-checkbox v-model="todo.done"></el-checkbox>
      <span style="margin-left: 10px">{{ todo.title }}</span>
    </label>
    <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(todo.id)">删除</el-button>
  </li>
</template>

<script>
export default {
  name: "Item",
  props: ['todos','todo','deleteTodo'],
  methods: {
    del(id) {
      if(confirm('确定删除吗？')){
        this.deleteTodo(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: #ddd;
}

li:hover button{
  display: block;
}
</style>

Footer.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<template>
  <div class="todo-footer" v-show="all_done">
    <label>
      <el-checkbox @change.native="checkAll" v-model="isAll">全选</el-checkbox>
    </label>
    <span>
      <span>已完成 {{is_done}}</span> / 全部 {{all_done}}
    </span>
    <el-button type="danger" size="small" @click="del_check" plain>清除已完成任务</el-button>
  </div>
</template>

<script>
export default {
  name: "Footer",
  props: ['deleteCheck','todos','checkAllTodo'],
  methods: {
    checkAll(e) {
      this.checkAllTodo(e.target.checked)
    },
    del_check() {
      // 如果没有勾选，则不执行操作
      if(!this.todos.some(todo => todo.done)){
        alert('你没有勾选任何任务')
      }else{
        if(confirm('确定删除吗？')){
          this.deleteCheck()
        }
      }
    }
  },
  computed:{
    is_done(){
      let sum = 0;
      this.todos.forEach(todo => {
        if(todo.done){
          sum++;
        }
      });
      return sum;
    },
    all_done(){
      return this.todos.length
    },
    isAll:{
      get(){
        return this.is_done === this.all_done && this.all_done > 0
      },
      set(val){
        this.checkAllTodo(val)
      }
    }
  }
}
</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>