Vue-element中el-input輸入卡頓問(wèn)題如何解決

本文小編為大家詳細(xì)介紹“Vue-element中el-input輸入卡頓問(wèn)題如何解決”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“Vue-element中el-input輸入卡頓問(wèn)題如何解決”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

Vue-element中el-input輸入卡頓

最近使用Vue-element時(shí)，遇到了el-input輸入卡頓問(wèn)題，影響用戶體驗(yàn)，如下

el-input是這樣寫(xiě)的，沒(méi)有加額外的事件

<el-input v-model="code" placeholder="code" type="textarea" :rows="1"/>

解決方法

• 使用.lazy修飾符

• 使用.lazy的修飾符可以取消v-model的雙向綁定，避免輸入改變?cè)黾雨?duì)列造成卡頓

注意：el-input底層代碼會(huì)將文本框用div包裹，

所以直接在el-input中使用.lazy修飾符是不成功的，測(cè)試了這種寫(xiě)法確實(shí)無(wú)效

//不成功的使用方法
<el-input v-model.lazy="code" placeholder="code"></el-input>
//成功的使用方法("el-textarea__inner"類可以讓樣式與框架一致)
<textarea class="el-textarea__inner" v-model.lazy="code" placeholder="code"></textarea>

textarea class="el-textarea__inner"成功的替換了el-input，并且.lazy生效了，不卡頓了，nice

vue遇到 el-input有時(shí)無(wú)法輸入的bug

1.在el-input中加入@input方法 代碼如下

<el-input v-model="addRwForm.info" type="textarea" @input="inpChange($event)">

2.在methods中調(diào)用這個(gè)方法 并使用$forceUpdate(), 官方文檔給出的解釋是這個(gè)具有強(qiáng)制刷新的作用，迫使Vue重新渲染，它僅影響實(shí)例本身和插入插槽內(nèi)容的子組件，并不是所有組件。

所以在輸入的時(shí)候一直觸發(fā),從而解決無(wú)法輸入的問(wèn)題

inpChange (e) {
      this.$forceUpdate()
}

讀到這里，這篇“Vue-element中el-input輸入卡頓問(wèn)題如何解決”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。