添加，修改，删除
todoList效果图
Footer组件
<template>
<div>
<div class="todo-footer" v-show="total">
<label>
<input type="checkbox" :checked="isAll" @change="checkAll" />
</label>
<span
><span>已完成 {{ doneTodo }}</span> / 全部{{ total }}
</span>
<button class="btn btn-danger" @click="clearAll">清除已完成</button>
</div>
</div>
</template>
<script>
export default {
props: ["todos"],
data() {
return {};
},
computed: {
total() {
return this.todos.length;
},
isAll() {
return this.doneTodo === this.total && this.total > 0;
},
doneTodo() {
return this.todos.reduce((pre, todo) => {
return pre + (todo.done ? 1 : 0);
}, 0);
},
},
methods: {
checkAll(e) {
this.$emit("checkAllTodo", e.target.checked);
},
clearAll() {
this.$emit("clearAllTodo");
},
},
};
</script>
<style scoped>
.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>
Head组件
<template>
<div class="todo-header">
<input
type="text"
@keyup.enter="add"
placeholder="输入名称，按回车键确认"
/>
</div>
</template>
<script>
// npm i nanoid
import { nanoid } from "nanoid";
export default {
data() {
return {};
},
methods: {
add(e) {
if (!e.target.value.trim()) return;
// 将用户输入包装成一个对象
const todoObj = {
id: nanoid(),
title: e.target.value.trim(),
done: false,
};
// 通知app直接去添加一个todo对象
this.$emit("receive", todoObj);
// 清空输入框
e.target.value = "";
},
},
};
</script>
<style scoped>
.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(28, 81, 121, 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 组件
<template>
<!-- -->
<ul class="todo-main">
<!-- :todoObj="todoObj" 传值给子组件 -->
<MyItem :todoObj="todoObj" v-for="todoObj in todos" :key="todoObj.id" />
</ul>
</template>
<script>
import MyItem from "./MyItem.vue";
export default {
components: { MyItem },
props: ["todos"],
data() {
return {};
},
};
</script>
<style>
.todo-main {
margin-left: 0;
border: 1px solid #ddd;
border-radius: 2px;
padding: 0;
}
.todo-empty {
height: 40px;
line-height: 40px;
border: 1px solid #ddd;
border-radius: 2px;
padding-left: 5px;
margin-top: 10px;
}
</style>
MyItem 组件
<template>
<li>
<label>
<input
type="checkbox"
:checked="todoObj.done"
@change="handleChange(todoObj.id)"
/>
<span v-show="!todoObj.isEdit">{{ todoObj.title }}</span>
<input
v-show="todoObj.isEdit"
type="text"
@blur="handBlur(todoObj, $event)"
:value="todoObj.title"
ref="inputRef"
/>
</label>
<button @click="handleDelTodo(todoObj.id)">删除</button>
<button v-show="!todoObj.isEdit" @click="handleEdit(todoObj)">编辑</button>
</li>
</template>
<script>
import pubsub from "pubsub-js";
export default {
props: ["todoObj"],
data() {
return {};
},
methods: {
handleChange(id) {
// 通知app组件将对应的todo对象的done值取反
this.$bus.$emit("checkTodo", id);
},
// 删除
handleDelTodo(id) {
if (confirm("确定删除吗")) pubsub.publish("delTodo", id);
},
// 编辑
handleEdit(todo) {
if (todo.hasOwnProperty.call("isEdit")) {
todo.isEdit = true;
} else {
console.log("@@@");
this.$set(todo, "isEdit", true);
}
this.$nextTick(() => {
this.$refs.inputRef.focus();
});
},
// 失去焦点 执行修改
handBlur(todo, e) {
todo.isEdit = false;
if (!e.target.value.trim()) return alert("不能为空");
this.$bus.$emit("updateTodo", todo.id, e.target.value);
},
},
};
</script>
<style scoped>
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: #ccc;
}
li:hover button {
display: block;
}
</style>
App 主组件
<template>
<div id="app">
<Head @receive="addTodo" />
<List :todos="todos" />
<Footer
:todos="todos"
@checkAllTodo="checkAllTodo"
@clearAllTodo="clearAllTodo"
/>
</div>
</template>
<script>
import pubsub from "pubsub-js";
import Head from "./components/todoList/Head";
import Footer from "./components/todoList/Footer";
import List from "./components/todoList/List";
export default {
name: "App",
components: {
Head,
Footer,
List,
},
data() {
return {
todos: JSON.parse(localStorage.getItem("todos")) || [],
};
},
// todos数据存到本地
watch: {
todos: {
deep: true,
handler(value) {
localStorage.setItem("todos", JSON.stringify(value));
},
},
},
mounted() {
this.$bus.$on("checkTodo", this.checkTodo);
this.$bus.$on("updateTodo", this.updateTodo);
// 订阅消息 msg（消息名字）, data（参数）
this.pubId = pubsub.subscribe("delTodo", this.delTodo);
},
beforeDestroy() {
this.$bus.$off("checkTodo");
this.$bus.$off("updateTodo");
pubsub.unsubscribe(this.pubId);
},
methods: {
// 添加todo
addTodo(todoObj) {
this.todos.unshift(todoObj);
},
// 取消选择todo
checkTodo(id) {
console.log("id", id);
this.todos.forEach((todo) => {
if (todo.id == id) todo.done = !todo.done;
});
},
// 删除todo
delTodo(_, id) {
this.todos = this.todos.filter((todo) => {
return todo.id != id;
});
},
// 全选or全不选
checkAllTodo(done) {
this.todos.forEach((todo) => {
todo.done = done;
});
},
// 修改todo
updateTodo(id, title) {
this.todos.forEach((todo) => {
if (todo.id === id) todo.title = title;
});
},
// 清除所有已经完成的todo
clearAllTodo() {
this.todos = this.todos.filter((todo) => {
return !todo.done;
});
},
},
};
</script>
<style>
</style>
main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
// Vue.prototype.$bus = new Vue()
new Vue({
render: h => h(App),
beforeCreate() {
Vue.prototype.$bus = this
},
}).$mount('#app')
效果图
网友评论