Skip to content

Commit 91c0ccc

Browse files
ANDBreakANDBreak
committed
总线
1 parent bff2c60 commit 91c0ccc

File tree

9 files changed

+34429
-7544
lines changed

9 files changed

+34429
-7544
lines changed

‎vue-cli/vue_todoList/dododo/package-lock.json‎

Lines changed: 26624 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎vue-cli/vue_todoList/dododo/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
},
1010
"dependencies": {
1111
"core-js": "^3.6.5",
12+
"uuid": "^3.4.0",
1213
"vue": "^2.6.11"
1314
},
1415
"devDependencies": {

‎vue-cli/vue_todoList/dododo/src/App.vue‎

Lines changed: 40 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
22
<div class="todo-container">
33
<div class="todo-wrap">
4-
<Header></Header>
5-
<List :todos='todos'></List>
6-
<Footer></Footer>
4+
<Header @addTodo='addTodo' :setIdWithUUID='setIdWithUUID'></Header>
5+
<List :todos='todos' :toggleTodo='toggleTodo'></List>
6+
<Footer :isSelectAll="isSelectAll" :todos='todos' :removeFinishTodo='removeFinishTodo'></Footer>
77
</div>
88
</div>
99
</template>
@@ -12,6 +12,7 @@
1212
import Header from './components/Header/Header.vue';
1313
import List from './components/List/List.vue';
1414
import Footer from './components/Footer/Footer.vue';
15+
import { v4 as uuidv4 } from 'uuid';
1516
1617
export default {
1718
name: 'App',
@@ -20,19 +21,50 @@ export default {
2021
List,
2122
Footer
2223
},
24+
mounted(){
25+
this.$bus.$on('removeSelectTodo', this.removeSelectTodo);
26+
},
2327
data(){
2428
return {
2529
// 初始时就读取json数据并解析为js的数组, 如果没有指定为空数组
2630
todos: [
27-
{id: this.setIdWithTimer, title: '阿拉斯加海湾', isChecked: false},
28-
{id: this.setIdWithTimer, title: '沉淀', isChecked: false},
29-
{id: this.setIdWithTimer, title: 'Flower Dance', isChecked: false},
31+
{id: this.setIdWithUUID(), title: '阿拉斯加海湾', isChecked: false},
32+
{id: this.setIdWithUUID(), title: '沉淀', isChecked: false},
33+
{id: this.setIdWithUUID(), title: 'Flower Dance', isChecked: false},
3034
]
3135
}
3236
},
37+
// 原则： 数据在哪个页面，那么相关的操作就要和该页面进行绑定
3338
methods: {
34-
setIdWithTimer(){
35-
return Date.now();
39+
// 通过UUID作为唯一的 id
40+
setIdWithUUID(){
41+
return uuidv4().split('-').join('');
42+
},
43+
// 定义添加的方法 todo -- 为用户添加的数据
44+
addTodo(todo){
45+
this.todos.unshift(todo);
46+
},
47+
// 删除选中的 todo
48+
removeSelectTodo(todo){
49+
this.todos.splice(todo.id, 1);
50+
},
51+
// 消除已完成的 todo
52+
removeFinishTodo(){
53+
this.todos = this.todos.filter(item=>{
54+
return !item.isChecked;
55+
});
56+
// 当全部删除时，将 全选按钮置为 false
57+
58+
},
59+
// 将一个指定的todo切换勾选状态
60+
toggleTodo (todo) {
61+
todo.isChecked = !todo.isChecked
62+
},
63+
// 控制全选按钮
64+
isSelectAll(flag){
65+
this.todos.forEach(item=>{
66+
item.isChecked = flag;
67+
});
3668
}
3769
}
3870
}

‎vue-cli/vue_todoList/dododo/src/components/Footer/Footer.vue‎

Lines changed: 41 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,49 @@
11
<template>
2-
<div class="todo-footer">
3-
<label>
4-
<input type="checkbox"/>
5-
</label>
6-
<span>
7-
<span>已完成0</span> / 全部2
8-
</span>
9-
<button class="btn btn-danger">清除已完成任务</button>
10-
</div>
2+
<div class="todo-footer">
3+
<label>
4+
<input ref="oIn" type="checkbox" v-model="seleceAll"/>
5+
</label>
6+
<span>
7+
<span>已完成{{selectCount}}</span> / 全部{{todos.length}}
8+
</span>
9+
<!-- 注意 这里的 removeFinishTodo 是调用函数 -->
10+
<button class="btn btn-danger" v-show="selectCount>0" @click="removeFinishTodo">清除已完成任务</button>
11+
</div>
1112
</template>
1213

1314
<script>
1415
export default {
15-
name: 'Footer'
16+
name: 'Footer',
17+
props: {
18+
todos: Array,
19+
removeFinishTodo: Function,
20+
isSelectAll: Function
21+
},
22+
computed: {
23+
// 控制 footer中 选中删除按钮是否显示
24+
selectCount(){
25+
return this.todos.reduce((init, pre)=>{
26+
return init += pre.isChecked? 1: 0;
27+
}, 0);
28+
},
29+
seleceAll:{
30+
get(){
31+
// 当选中数量为空时，设为未选中，同时禁用
32+
if(!this.todos.length){
33+
// 设为禁用
34+
console.log(this.$refs.oIn.disable);
35+
return false;
36+
}
37+
else if(this.todos.length === this.selectCount){
38+
// 当选中的数量等于todos的长度时，为选中状态
39+
return true;
40+
}
41+
},
42+
set(value){
43+
this.isSelectAll(value);
44+
}
45+
}
46+
}
1647
}
1748
</script>
1849

‎vue-cli/vue_todoList/dododo/src/components/Header/Header.vue‎

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,43 @@
11
<template>
22
<div class="todo-header">
3-
<input type="text" placeholder="请输入你的任务名称，按回车键确认"/>
3+
<input type="text" v-model="title" @keyup.enter="handleEnter" placeholder="请输入你的任务名称，按回车键确认"/>
44
</div>
55
</template>
66

77
<script>
88
export default {
9-
name: 'Header'
9+
name: 'Header',
10+
// 用以记录 输入数据
11+
data(){
12+
return {
13+
title: ''
14+
}
15+
},
16+
methods: {
17+
handleEnter(){
18+
// 注意这里的 trim 是方法
19+
let title = this.title.trim();
20+
// 如果为空
21+
if(!title){
22+
this.title = '';
23+
return;
24+
}
25+
// 如果不为空
26+
// 创建 新的todo对象
27+
const todo = {
28+
id: this.setIdWithUUID(),
29+
title,
30+
isChecked: false
31+
}
32+
// this.addTodo(todo);
33+
this.$emit('addTodo', todo);
34+
// 清空输入
35+
this.title = '';
36+
}
37+
},
38+
props: {
39+
setIdWithUUID: Function
40+
}
1041
}
1142
</script>
1243

‎vue-cli/vue_todoList/dododo/src/components/Item/Item.vue‎

Lines changed: 56 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,63 @@
11
<template>
2-
<li>
3-
<label>
4-
<input type="checkbox"/>
5-
<span>xxxxx</span>
6-
</label>
7-
<button class="btn btn-danger" style="display:none">删除</button>
8-
</li>
2+
<li :style="{background: bgColor}" @mouseleave='isShowRemoveBtn(false)' @mouseenter="isShowRemoveBtn(true)">
3+
<label>
4+
<input type="checkbox" v-model="isChecked"/>
5+
<span>{{todo.title}}</span>
6+
</label>
7+
<button class="btn btn-danger" @click='removeTodo' v-show='btnFlag'>删除</button>
8+
</li>
99
</template>
1010

1111
<script>
12-
export default {
13-
name: 'Item'
14-
}
12+
export default {
13+
name: 'Item',
14+
data(){
15+
return {
16+
// 按钮是否显示标识
17+
btnFlag: false,
18+
// li 背景颜色改变标识
19+
bgColor: '#fff'
20+
}
21+
},
22+
props: {
23+
todo: Object,
24+
toggleTodo: Function
25+
},
26+
methods: {
27+
// 控制鼠标移入移出
28+
isShowRemoveBtn(flag){
29+
// 鼠标移入
30+
if(flag){
31+
this.btnFlag = true;
32+
this.bgColor = '#666';
33+
}else{
34+
// 鼠标移出
35+
this.btnFlag = false;
36+
this.bgColor = '#fff';
37+
}
38+
},
39+
// 删除选中 todo
40+
removeTodo(){
41+
// 删除校验
42+
if (confirm(`确定要删除${this.todo.id}吗?`)) {
43+
// this.removeSelectTodo(this.todo);
44+
this.$bus.$emit('removeSelectTodo', this.todo);
45+
}
46+
}
47+
},
48+
computed: {
49+
isChecked: {
50+
get(){
51+
return this.todo.isChecked
52+
},
53+
set(value){
54+
// 这里是不能对 props 中属性进行修改 原则
55+
// this.todo.isChecked = value;
56+
this.toggleTodo(this.todo);
57+
}
58+
}
59+
}
60+
}
1561
</script>
1662

1763
<style scope>

‎vue-cli/vue_todoList/dododo/src/components/List/List.vue‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
11
<template>
22
<ul class="todo-main">
3-
<Item></Item>
3+
<Item v-for="todo in todos" :toggleTodo='toggleTodo' :key="todo.id" :todo="todo"></Item>
44
</ul>
55
</template>
66

77
<script>
8-
import Item from '../Item/Item.vue'
8+
import Item from '../Item/Item.vue';
99
1010
export default {
1111
name: 'List',
1212
components: {
1313
Item
14+
},
15+
props: {
16+
todos: Array,
17+
toggleTodo: Function
1418
}
1519
}
1620
</script>

‎vue-cli/vue_todoList/dododo/src/main.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,8 @@ import Vue from 'vue'
22
import App from './App.vue'
33

44
new Vue({
5+
beforeCreate() {
6+
Vue.prototype.$bus = this;
7+
},
58
render: h => h(App),
69
}).$mount('#app')

0 commit comments

Comments
 (0)