1
2
3
4

<!-- vue -->
<p class="content" v-text="item.title" @keydown="onEnter"  @dblclick="turnOnEditable" @blur="(e)=>{titleBlur(e, index)}">
  {{item.title}}
</p>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// js
methods: {
    // 修改标题，回车时失去焦点
    onEnter(e) {
        if(e.keyCode===13){
            e.target.blur();
        } 
    },
    // 失去焦点时，保存内容，并将元素修改为不可编辑
    titleBlur(e, index){
        const title = e.target.innerText;
        this.onTitleChange({title:title,index:index});
        e.target.setAttribute('contenteditable', false);
    },
    // 双击元素时，将其变为可编辑状态，并获取焦点。
    turnOnEditable(e){
        e.target.setAttribute('contenteditable', true)
        e.target.focus();
        var range = window.getSelection();//创建range
        range.selectAllChildren(e.target);//range 选择obj下所有子内容
        range.collapseToEnd(); // 光标放到最后
    },
}