vue插件實現(xiàn)v-model功能
最近在開發(fā)自己的富文本編輯器插件,在開發(fā)中遇到了很多問題其中我覺得比較好的問題就是在你定義的插件中實現(xiàn)雙向綁定。就好像input中v-model的功能類似。
v-model語法:
在vue中我們實現(xiàn)表單的雙向綁定時代碼一般時這樣寫的:
<input type="text" v-model="value" style="line-height: 30px;"> data () { return { value: '222' } }
可以通過這樣的方式實現(xiàn)value的值和輸入框中的值雙向綁定了。
事實上v-model只是一個語法糖,他的真正實現(xiàn)是這樣的:
<input type="text" :value="value" @input="value=$event.target.value">
以上代碼分幾個步驟:
1.將輸入框的值綁定到變量上,這個是單向綁定,意味著改變變量的值可以改變輸入框的值,但是改變輸入框的值不能改變變量的值
2.監(jiān)聽input事件(input輸入框都有該事件,當輸入內(nèi)容時自動觸發(fā)該事件),當輸入框輸入內(nèi)容就單向改變變量的值了
自定義編輯器雙向綁定
這個是插件的寫法:content是雙向綁定的值 height是指編輯器的高度
<editor v-model="content" :height="editorHeight"></editor>
插件vue的寫法:
<div v-bind:style="{height: height}" class="editor-box" ref="editor" contenteditable v-html="contentHtml" @input="changeText"></div>
在div中設(shè)置contenteditable屬性時把div設(shè)置成可編輯的輸入框,v-html是給編輯器單向綁定變量contentHtml值,input方法獲取編輯器的內(nèi)容并且返回給父元素的input方法:
changeText () { const htmlString = this.$refs.editor.innerHTML this.$emit('input', htmlString) },
其他問題:
光是這樣是不能夠解決問題的,編輯器你會出現(xiàn)每次輸入的時候都會跳到開頭位置:怎么解決呢?不多說上代碼:
props: { value: { type: String, default: '' }, height: { type: String, default: 'auto' } }, data () { return { // 編輯器內(nèi)容 contentHtml: this.value || this.value === 0 ? this.value : '<div><br></div>', // 是否在編譯 isLocked: true, // 光標位置 lastEditRange: null } }, watch: { value (val) { if (!this.isLocked) { this.contentHtml = this.value; } } }
寫到這里大家應(yīng)該一頭霧水這樣寫有什么用:因為還少了一些代碼:
<div v-bind:style="{height: height}" class="editor-box" ref="editor" contenteditable v-html="contentHtml" @input="changeText" @focus="focusEditor" @blur="blurEditor"></div> // 編輯器失去焦點 blurEditor (event) { this.isLocked = false }, // 編輯器獲得焦點 focusEditor (event) { this.isLocked = true },
需要給插件添加兩個方法判斷編輯器是否正在編輯內(nèi)容,如果正在編輯中父組件綁定的值不讓他重新渲染子組件,這樣編輯器中的內(nèi)容就不會重新賦值了,這樣光標就不會每次都跑到前面去了。
小小的總結(jié)一下:
•v-bind只能實現(xiàn)單向綁定
•v-model(v-bind+觸發(fā)的input事件)實現(xiàn)雙向綁定
總結(jié)
以上所述是小編給大家介紹的vue插件實現(xiàn)v-model功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
vue使用?vue-socket.io三種方式及踩坑實例解析
這篇文章主要為大家介紹了vue使用?vue-socket.io三種方式及踩坑實例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-09-09vue-cli或vue項目利用HBuilder打包成移動端app操作
這篇文章主要介紹了vue-cli或vue項目利用HBuilder打包成移動端app操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07vuex新手進階篇之改變state?mutations的使用
在vue的項目中不可避免的會使用到vuex用于數(shù)據(jù)的存儲,下面這篇文章主要給大家介紹了關(guān)于vuex新手進階篇之改變state?mutations的使用,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下2022-10-10three.js實現(xiàn)vr全景圖功能實例(vue)
去年全景圖在微博上很是火爆了一陣,正好我也做過一點全景相關(guān)的項目,下面這篇文章主要給大家介紹了關(guān)于three.js實現(xiàn)vr全景圖功能的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-05-05vue+elementUi 實現(xiàn)密碼顯示/隱藏+小圖標變化功能
這篇文章主要介紹了vue+elementUi 實現(xiàn)密碼顯示/隱藏+小圖標變化功能,需本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01