可編輯div可能很簡(jiǎn)單?contenteditable="true" 就能實(shí)現(xiàn)了
但是，娱两，莺匠，輸入一個(gè)字的時(shí)候，焦點(diǎn)會(huì)自動(dòng)跳到文本開(kāi)頭十兢，很煩的有木有
在網(wǎng)上看見(jiàn)一個(gè)大神寫的趣竣，引用過(guò)來(lái)，很久了纪挎，忘記了出處
將可編輯div單獨(dú)設(shè)置成一個(gè)組件
子組件中
<template>
? <div class="edit" placeholder="11"
? ? ? v-html="innerText"
? ? ? :contenteditable="canEdit"
? ? ? @focus="isLocked =true"
? ? ? @blur="isLocked =false"
? ? ? @input="changeText">
</template>
watch: {
'value'(){
if (!this.isLocked && !this.innerText) {
this.innerText =this.value;
? ? }
}
},
methods: {
changeText(){
this.$emit('input', this.$el.innerHTML);
? }
},
父組件中只要 v-model='你想要綁定的數(shù)據(jù)'
對(duì)vue不熟悉期贫，，當(dāng)然這位大神也說(shuō)看下官方文檔v-model這一塊
大致是如果父組件的v-model會(huì)首先綁定子組件的emit的input方法
