Vue-element中el-input輸入卡頓問題如何解決

本文小編為大家詳細介紹“Vue-element中el-input輸入卡頓問題如何解決”，內容詳細，步驟清晰，細節處理妥當，希望這篇“Vue-element中el-input輸入卡頓問題如何解決”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

Vue-element中el-input輸入卡頓

最近使用Vue-element時，遇到了el-input輸入卡頓問題，影響用戶體驗，如下

el-input是這樣寫的，沒有加額外的事件

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

解決方法

• 使用.lazy修飾符

• 使用.lazy的修飾符可以取消v-model的雙向綁定，避免輸入改變增加隊列造成卡頓

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

所以直接在el-input中使用.lazy修飾符是不成功的，測試了這種寫法確實無效

//不成功的使用方法
<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有時無法輸入的bug

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

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

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

所以在輸入的時候一直觸發,從而解決無法輸入的問題

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

讀到這里，這篇“Vue-element中el-input輸入卡頓問題如何解決”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。