您好,登錄后才能下訂單哦!
這篇文章主要介紹“vue2怎么實現(xiàn)div contenteditable=“true”效果”的相關知識,小編通過實際案例向大家展示操作過程,操作方法簡單快捷,實用性強,希望這篇“vue2怎么實現(xiàn)div contenteditable=“true”效果”文章能幫助大家解決問題。
發(fā)現(xiàn)問題
在 vue2 中對表單控件有著良好的雙向數(shù)據(jù)綁定機制,但是對于要特定實現(xiàn)某些功能的輸入時,我們就不得不使用到 contenteditable="true" 的 div ,而在這個 div 上是使用 v-model 是沒有效果的。那么問題就來了,輸入是非常需要雙向綁定的,這里的雙向數(shù)據(jù)綁定該如何實現(xiàn)?
解決思路一:自定義指令
當然,說在這一段的前面,這種解決方式在 vue2 中是不行的,為什么這么說,因為現(xiàn)在去搜索這個問題絕大多數(shù)的搜索結果是這個,所以放在前面。
實現(xiàn)的原理以及為什么不能用了
原理:自定義一個雙向數(shù)據(jù)綁定的指令,代碼如下:
Vue.directive('demo', { twoWay: true, bind: function () { this.handler = function () { this.set(this.el.innerHTML) }.bind(this) this.el.addEventListener('input', this.handler) }, update: function (newValue, oldValue) { this.el.innerHTML = newValue || '' }, unbind: function () { this.el.removeEventListener('input', this.handler) } })
至于 this 下的這些方法,在 vue 官網上可能不太容易找到,因為這些是 vue1 中的內容,而在 vue2 中已經被移除了。所以在 vue2 中我們是不能這么干的,當然如果你使用的是 vue1 那么完全沒問題,直接拿去用即可。
解決思路二:使用組件
單獨聲明一個組件,在組件內部處理數(shù)據(jù)(也就是innerHTML),并將數(shù)據(jù)返回給父組件。
代碼如下:
<template> <div contenteditable="true" v-html="innerText" @input="changeText"></div> </template> <script> export default { props: ['value'], data(){ return {innerText:this.value} }, methods:{ changeText(){ this.innerText = this.$el.innerHTML; this.$emit('input',this.innerText); } } } </script>
然后在父組件中直接使用 v-model 就可以了(這里我把組件名稱定義成了 v-edit-div)。
<template> <div> <v-edit-div v-model='text'></v-edit-div> <span>{{text}}</span> </div> </template> <script> export default { data(){ return { text:'改一下試一試', } } } </script>
關于“vue2怎么實現(xiàn)div contenteditable=“true”效果”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關的知識,可以關注億速云行業(yè)資訊頻道,小編每天都會為大家更新不同的知識點。
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經查實,將立刻刪除涉嫌侵權內容。