Vue TodoList 解析 3.编辑TodoList内容

一、todolist编辑修改

双击todolist弹出Input框，供编辑修改。

1、todolist双击设置动作

给 checkbox,label,button(close)外套一个div层，编辑时可隐藏，样式名称为view
给label元素增加动作 @dblclick(todo)="editTodo(todo)"
在methods中增加editTodo对应方法

this.beforeEditCache=todo.title
this.editedTodo=todo

第一行：把当前内容缓存，如不保存可取回。第二行的this.editedTodo=todo 当双击label元素后，把todo赋值给editedTodo，这样li元素中的editing样式 todo == editedTodo判断条件为真，对应的样式生效。view div隐藏，input编辑框显示。

对应的CSS样式表如下，.todo-list li.editing .edit是个完整的名称，条件为假时，缺少中间的li.editing，即匹配不到该样式。

.todo-list li.editing .edit {
    display: block;
    width: 506px;
    padding: 12px 16px;
    margin: 0 0 0 43px;
}

.todo-list li.editing .view {
    display: none;
}

2、增加input框供修改

input框中增加双向绑定v-model="todo.title"读取内容,并设置样式为edit，该样式默认为隐藏。待双击lable框后显示。
修改框input的样式edit和输入框input的样式new-todo一样

.new-todo,
.edit {
    position: relative;
    margin: 0;
    width: 100%;
    font-size: 24px;
    font-family: inherit;
    font-weight: inherit;
    line-height: 1.4em;
    border: 0;
    color: inherit;
    padding: 6px;
    border: 1px solid #999;
    box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

再增加一个edit默认隐藏

.todo-list li .edit {
    display: none;
}

input框设置动作@blur=“doneEdit(todo)”input框失去焦点完成输入
@keyup.enter="doneEdit(todo)"按键回车完成输入
@keyup.ecs="cancelEdit(todo)"按键ecs取消输入

在methods中增加以上方法
doneEdit完成输入函数中：this.editedTodo=null ,todo.title=todo.title
cancelEdit取消输入函数中： todo.title=this.beforeEditCache, this.editedTodo=null

Vue TodoList 解析 3.编辑TodoList内容

一 、todolist编辑修改

1、todolist双击设置动作

2、增加input框供修改

推荐阅读更多精彩内容

一、todolist编辑修改