利用contenteditable做一個(gè)vue屬性的輸入框
-
contenteditable屬性這是一個(gè)html5 新增的一個(gè)屬性戚宦，可以讓你的元素內(nèi)容可以編輯
<p contenteditable=true>這是一個(gè)可以編輯的段落</p>那如何獲取這個(gè)可以編輯的段落呢碗旅？我們知道原生js中瓦戚，找到相應(yīng)的dom元素图呢，然后我們可以通過(guò)innerText和innerHTML獲取對(duì)應(yīng)的文本眯亦，所以在編輯的段落中肢扯，我們可以使用dom.innerText來(lái)獲取相應(yīng)的編輯內(nèi)容
-
實(shí)現(xiàn)placeholder
當(dāng)然我們不至限于想獲取一個(gè)編輯的內(nèi)容煤蚌，我們還需要實(shí)現(xiàn)input和textarea等占位提示符耕挨。
-
首先我們把placeholder添加到編輯內(nèi)容中
<div contenteditable=true placeholder="添加描述符"> </div> -
通過(guò)css來(lái)控制點(diǎn)擊顯示和隱藏
div[contenteditable]:empty:not(:focus):before { content: attr(placeholder); color: #aaa ; }
-
-
通過(guò)vue來(lái)實(shí)現(xiàn)雙向綁定
對(duì)于經(jīng)常使用vue的人都知道，v-model的雙向綁定尉桩，其實(shí)就是一個(gè)語(yǔ)法糖筒占，然后這個(gè)語(yǔ)法糖還只能在
inputselecttextarea等表單控件中使用，因此我們想手寫(xiě)一個(gè)雙向綁定input的雙向綁定
<input v-model="something">改變的雙向綁定
<input :value="something" @input="somthing=$event.target.value"參照上面的我們來(lái)實(shí)現(xiàn)div的可編輯和雙向綁定
html部分
<div contenteditable="true" v-text="content" @input="handleInput"> </div>js
export default { data() { return { content: '' } }, methods: { handleInput($event){ this.content = $event.target.innerText; // 拓展 如果想要只需要前100位數(shù)據(jù) this.content = this.content.substring(0,100) } } }
