寫一個雙擊事件
<span @dblclick="edit" style="cursor:pointer;" ref="element">雙擊可編輯</span>
方法
edit(element) {
// 獲取要編輯的文本內(nèi)容
var oldHtml = element.target.innerText;
// 創(chuàng)建一個新的 input 輸入框
var newInput = document.createElement("input");
// 為新的 input添加屬性
newInput.type = "text";
newInput.value = oldHtml;
// 清空當(dāng)前元素的文本內(nèi)容
element.target.innerText = "";
// 把新的 input 框 追加到當(dāng)前元素節(jié)點中
element.target.appendChild(newInput);
// 設(shè)置選擇文本的內(nèi)容或設(shè)置光標(biāo)位置（兩個參數(shù)：start,end；start為開始位置愿吹，end為結(jié)束位置捺氢；如果開始位置和結(jié)束位置相同則就是光標(biāo)位置）
newInput.setSelectionRange(0, oldHtml.length);
// 為新 input 框獲取焦點
newInput.focus();
// 為新的 input 添加失去焦點事件
newInput.onblur = function() {
// 判斷失去焦點時，input 框的值是否與原值相同把曼，相同則表示沒有修改缨称，返回原值；不同則表示有改動祝迂，返回新值
element.target.innerText = this.value == oldHtml ? oldHtml : this.value;
};
}
感謝原作者舟遙遙
