parent
7ea4f5675a
commit
212dd92bac
9 changed files with 454 additions and 4 deletions
@ -0,0 +1,145 @@ |
||||
<template> |
||||
<div id="root"> |
||||
<div class="todo-container"> |
||||
<div class="todo-wrap"> |
||||
<TodoHeader @addTodo="addTodo"/> |
||||
<TodoList :todos="todos"/> |
||||
<TodoBottom :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import pubsub from 'pubsub-js' |
||||
import TodoHeader from "./components/TodoHeader.vue"; |
||||
import TodoList from "./components/TodoList.vue"; |
||||
import TodoBottom from "./components/TodoBottom.vue"; |
||||
|
||||
|
||||
export default { |
||||
name: "App", |
||||
components: { |
||||
TodoHeader, |
||||
TodoList, |
||||
TodoBottom |
||||
}, |
||||
data() { |
||||
return { |
||||
// 预置测试数据 |
||||
todos: JSON.parse(localStorage.getItem('todos')) || [] |
||||
} |
||||
}, |
||||
// 由于数据需要被不同的子组件访问，暂时没有学习数据的处理方法，所以将数据放置在父组件App中 |
||||
// 导致处理数据的相关方法也要放到App中，通过组件间参数传递的方式传到各个组件 |
||||
methods: { |
||||
// 添加todo任务，绑定到TodoHeader中 |
||||
addTodo(todoObj) { |
||||
this.todos.unshift(todoObj) |
||||
}, |
||||
|
||||
// 勾选和取消勾选todo任务，穿透TodoList绑定到TodoItem中 |
||||
checkTodo(id) { |
||||
this.todos.forEach((todo) => { |
||||
if (todo.id === id) todo.done = !todo.done |
||||
}) |
||||
}, |
||||
|
||||
// 删除单个todo任务，穿透TodoList绑定到TodoItem中 |
||||
deleteTodo(_, id) { |
||||
this.todos = this.todos.filter(todo => todo.id !== id) |
||||
}, |
||||
|
||||
// 更新一个TodoItem |
||||
updateTodo(id, title) { |
||||
this.todos.forEach((todo) => { |
||||
if (todo.id === id) todo.title = title |
||||
}) |
||||
}, |
||||
|
||||
// 勾选或取消勾选全部todo任务，绑定到TodoBottom中 |
||||
checkAllTodo(done) { |
||||
this.todos.forEach((todo) => todo.done = done) |
||||
}, |
||||
|
||||
// 清除全部已完成的todo任务，绑定到TodoBottom中 |
||||
clearAllTodo() { |
||||
this.todos = this.todos.filter((todo) => { |
||||
return !todo.done |
||||
}) |
||||
} |
||||
}, |
||||
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) |
||||
this.pubId = pubsub.subscribe('itemDel', this.deleteTodo) // 使用订阅方式实现删除功能 |
||||
}, |
||||
// 销毁全局事件总线 |
||||
beforeDestroy() { |
||||
this.$bus.$off('checkTodo') |
||||
this.$bus.$off('updateTodo') |
||||
this.pubsub.unsubscribe(this, pubId) // 使用订阅方式实现删除功能，销毁订阅 |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
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 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-edit { |
||||
color: #fff; |
||||
background-color: skyblue; |
||||
border: 1px solid #82cdea; |
||||
margin-right: 5px; |
||||
} |
||||
|
||||
.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> |
||||
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,76 @@ |
||||
<template> |
||||
<div class="todo-bottom" v-show="total"> |
||||
<label> |
||||
<input type="checkbox" v-model="isAll"> |
||||
</label> |
||||
<span> |
||||
<span>已完成{{ totalDone }}</span>/全部{{ total }} |
||||
</span> |
||||
<button class="btn btn-danger" @click="clearAll">清除已完成任务</button> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "TodoBottom", |
||||
// props: ['todos', 'checkAllTodo', 'clearAllTodo'], |
||||
props: ['todos'], |
||||
computed: { |
||||
// 用于计算全部todo任务的总数量，并且通过v-show绑定到模板，用于控制模板的展示 |
||||
total() { |
||||
return this.todos.length |
||||
}, |
||||
// 用于统计全部已完成的todo任务数量 |
||||
totalDone() { |
||||
return this.todos.reduce((pre, todo) => pre + (todo.done ? 1 : 0), 0) |
||||
}, |
||||
// 计算方法的完整写法 |
||||
// get方法用于判断是否全部任务被勾选， 返回布尔值 |
||||
// set方法是封装了App中checkAllTodo方法用于勾选和取消勾选全部任务 |
||||
isAll: { |
||||
get() { |
||||
return this.totalDone === this.total && this.total > 0 |
||||
}, |
||||
set(value) { |
||||
// this.checkAllTodo(value) |
||||
this.$emit('checkAllTodo', value) |
||||
} |
||||
} |
||||
}, |
||||
methods: { |
||||
// 封装App中的clearAllTodo方法，用于清除全部已完成数据 |
||||
clearAll() { |
||||
if (confirm("确认清除全部已完成任务？")) { |
||||
this.$emit('clearAllTodo') |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.todo-bottom { |
||||
height: 40px; |
||||
line-height: 40px; |
||||
padding-left: 6px; |
||||
margin-top: 5px; |
||||
} |
||||
|
||||
.todo-bottom label { |
||||
display: inline-block; |
||||
margin-right: 20px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.todo-bottom label input { |
||||
position: relative; |
||||
top: -1px; |
||||
vertical-align: middle; |
||||
margin-right: 5px; |
||||
} |
||||
|
||||
.todo-bottom button { |
||||
float: right; |
||||
margin-top: 5px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,49 @@ |
||||
<template> |
||||
<div class="todo-header"> |
||||
<input type="text" placeholder="请输入你的任务名称，按回车确认" v-model="title" @keyup.en.enter="add"> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import {nanoid} from "nanoid" |
||||
|
||||
export default { |
||||
name: "TodoHeader", |
||||
// props: ['addTodo'], 改用自定义组件实现，不用再接收复组件传递的方法 |
||||
data() { |
||||
// 初始化title已显示placeholder内容 |
||||
return { |
||||
title: '' |
||||
} |
||||
}, |
||||
methods: { |
||||
// 添加todo任务，trim用户输入数据后判断是否为空，如果内容正常则生成任务的对象数据 |
||||
// 将任务的对象数据回写到App中的todo中 |
||||
add() { |
||||
if (!this.title.trim()) return alert("输入不能为空") |
||||
const todoObj = {id: nanoid(), title: this.title, done: false} |
||||
// this.addTodo(todoObj) // 改用emit触发自定义事件 |
||||
this.$emit('addTodo', todoObj) |
||||
this.title = '' |
||||
} |
||||
} |
||||
|
||||
} |
||||
</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(82, 168, 236, 0.8); |
||||
box-shadow: inset 0 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); |
||||
} |
||||
</style> |
||||
@ -0,0 +1,92 @@ |
||||
<template> |
||||
<li> |
||||
<label> |
||||
<input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"> |
||||
<span v-show="!todo.isEdit">{{ todo.title }}</span> |
||||
<input v-show="todo.isEdit" type="text" @blur="handleBlur(todo, $event)" :value="todo.title"> |
||||
</label> |
||||
<button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button> |
||||
<button v-show="!todo.isEdit" class="btn btn-edit" @click="handleEdit(todo)">编辑</button> |
||||
</li> |
||||
</template> |
||||
|
||||
<script> |
||||
import pubsub from 'pubsub-js' |
||||
|
||||
export default { |
||||
name: "TodoItem", |
||||
// 从todoList中接收数据todos和函数checkTodo、deleteTodo |
||||
props: ['todo'], |
||||
methods: { |
||||
// 触发全局事件总线中的方法，触发app中发回调方法 |
||||
handleCheck(id) { |
||||
this.$bus.$emit('checkTodo', id) |
||||
}, |
||||
// 通过订阅消息形式实现 |
||||
handleDelete(id) { |
||||
if (confirm("确认删除？")) { |
||||
pubsub.publish('itemDel', id) |
||||
} |
||||
}, |
||||
// 实现编辑逻辑 |
||||
handleEdit(todo) { |
||||
if (todo.hasOwnProperty('isEdit')) { |
||||
todo.isEdit = true |
||||
}else { |
||||
this.$set(todo, 'isEdit', true) |
||||
} |
||||
}, |
||||
// 失去焦点时更新数据 |
||||
handleBlur(todo, e) { |
||||
todo.isEdit = false |
||||
// console.log('updateTodo', todo.id, e.target.value) |
||||
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 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> |
||||
@ -0,0 +1,38 @@ |
||||
<template> |
||||
<ul class="todo-list"> |
||||
<TodoItem |
||||
v-for="todoObj in todos" |
||||
:key="todoObj.id" |
||||
:todo="todoObj" |
||||
/> |
||||
</ul> |
||||
</template> |
||||
|
||||
<script> |
||||
import TodoItem from "@/components/TodoItem.vue"; |
||||
|
||||
export default { |
||||
name: "TodoList", |
||||
// 嵌套了子组件TodoItem |
||||
components: {TodoItem}, |
||||
props: ['todos'] |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.todo-list { |
||||
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> |
||||
@ -0,0 +1,19 @@ |
||||
// 引入Vue
|
||||
import Vue from "vue"; |
||||
// 引入App
|
||||
import App from "./App"; |
||||
|
||||
// 设置Vue
|
||||
Vue.config.productionTip = false |
||||
|
||||
|
||||
// 实例化Vue
|
||||
new Vue({ |
||||
components: { |
||||
App |
||||
}, |
||||
render: h => h(App), |
||||
beforeCreate() { |
||||
Vue.prototype.$bus = this // 安装全局事件总线
|
||||
} |
||||
}).$mount('#app') |
||||
Loading…
Reference in new issue