1. MyItem.vue
<template>
<transition name="todo" appear>
<li>
<label>
<input type="checkbox" :checked="todo.done" @click="handlerCheck(todo.id)"/>
<span v-show="!todo.isEdit">{{todo.title}}</span>
<input v-show="todo.isEdit" type="text" :value="todo.title"
@blur="handlerBlur(todo,$event)"
ref="inputTitle"/>
</label>
<button class="btn btn-danger" @click="hadnlerDelete(todo.id)">删除</button>
<button v-show="!todo.isEdit" class="btn btn-edit" @click="handlerEdit(todo)">编辑</button>
</li>
</transition>
</template>
<script>
import pubsub from 'pubsub-js'
export default {
name:"MyItem",
props:['todo'],//声明接收todo 对象
mounted(){
//console.log(this.todo);
},
methods:{
//勾选或者取消勾选
handlerCheck(id){
//通知app 组件 将对应的todo 对象的done 值取反
//console.log("id",id);
//this.checkTodo(id);
this.$bus.$emit('checkTodo',id)
},
//闪促
hadnlerDelete(id){
if(confirm('确定删除么')){
//console.log("id",id);
//通知app 删除一个对象
//this.deleteTodo(id);
// this.$bus.$emit('deleteTodo',id)
pubsub.publish('deleteTodo',id)
}
},
handlerEdit(todo){
if(todo.hasOwnProperty('isEdit')){
todo.isEdit=true;
}else{
this.$set(todo,'isEdit',true)
}
this.$nextTick(function(){
this.$refs.inputTitle.focus()
})
},
//失去焦点回调 真正执行修改逻辑
handlerBlur(todo,e){
todo.isEdit=false;
if(!e.target.value.trim()) return alert('不能为空')
this.$bus.$emit('updateTodo',todo.id,e.target.value)
}
}
}
</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:hover {
background-color: grey;
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:hover button {
display: block;
}
li:before {
content: initial;
}
li:last-child {
border-bottom: none;
}
/* 进入的起点 离开的终点 */
.todo-enter,.todo-leave-to{
transform: translateX(100%);
}
.todo-enter-active,.todo-leave-active{
transition:1s linear;
}
/* 进入的终点 离开的起点 */
.todo-enter-to,.todo-leave{
transform: translateX(0);
}
</style>
2. 或者Mylist.vue
<template>
<ul class="todo-main">
<transition-group name="todo" appear>
<MyItem v-for="todoObj in todos" :key="todoObj.id"
:todo="todoObj"
/>
</transition-group>
</ul>
</template>
<script>
import MyItem from './MyItem.vue';
export default{
name:"MyList",
components:{MyItem},
props:['todos'],//声明接收todo 对象
}
</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;
}
.todo-enter,.todo-leave-to{
transform: translateX(100%);
}
.todo-enter-active,.todo-leave-active{
transition:1s linear;
}
/* 进入的终点 离开的起点 */
.todo-enter-to,.todo-leave{
transform: translate
}
</style>