Vue-element中el-input輸入卡頓問題的解決
更新時間：2023年04月23日 09:41:47 作者：YouluBank
這篇文章主要介紹了Vue-element中el-input輸入卡頓問題的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Vue-element中el-input輸入卡頓
最近使用Vue-element時，遇到了el-input輸入卡頓問題，影響用戶體驗(yàn)，如下
el-input是這樣寫的，沒有加額外的事件
<el-input v-model="code" placeholder="code" type="textarea" :rows="1"/>
解決方法
- 使用.lazy修飾符
- 使用.lazy的修飾符可以取消v-model的雙向綁定，避免輸入改變增加隊(duì)列造成卡頓
注意：el-input底層代碼會將文本框用div包裹，
所以直接在el-input中使用.lazy修飾符是不成功的，測試了這種寫法確實(shí)無效
//不成功的使用方法
<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中調(diào)用這個方法 并使用$forceUpdate(), 官方文檔給出的解釋是這個具有強(qiáng)制刷新的作用，迫使Vue重新渲染，它僅影響實(shí)例本身和插入插槽內(nèi)容的子組件，并不是所有組件。
所以在輸入的時候一直觸發(fā),從而解決無法輸入的問題
inpChange (e) {
? ? ? this.$forceUpdate()
}總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
lottie實(shí)現(xiàn)vue自定義loading指令及常用指令封裝詳解
這篇文章主要為大家介紹了lottie實(shí)現(xiàn)vue自定義loading指令及常用指令封裝，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了詳解Vite的新體驗(yàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
詳解vue beforeEach 死循環(huán)問題解決方法
這篇文章主要介紹了vue beforeEach 死循環(huán)問題解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
vue 實(shí)現(xiàn)剪裁圖片并上傳服務(wù)器功能
這篇文章主要介紹了vue 實(shí)現(xiàn)剪裁圖片并上傳服務(wù)器功能，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-03-03
這篇文章主要介紹了vue watch immediate方法用法詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06
解決vue-cli + webpack 新建項(xiàng)目出錯的問題
下面小編就為大家分享一篇解決vue-cli + webpack 新建項(xiàng)目出錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
區(qū)分vue-router的hash和history模式
這篇文章主要介紹了區(qū)分vue-router的hash和history模式，幫助大家更好的理解和學(xué)習(xí)vue路由，感興趣的朋友可以了解下2020-10-10
作為使用Vue的開發(fā)者，我們對Vue指令一定不陌生，諸如v-model、v-on、v-for、v-if等，同時Vue也為開發(fā)者提供了自定義指令的api，熟練的使用自定義指令可以極大的提高了我們編寫代碼的效率，讓我們可以節(jié)省時間開心的摸魚2022-11-11
Element實(shí)現(xiàn)表格分頁數(shù)據(jù)選擇+全選所有完善批量操作
這篇文章主要介紹了Element實(shí)現(xiàn)表格分頁數(shù)據(jù)選擇+全選所有完善批量操作，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
Vue登錄功能實(shí)現(xiàn)全套詳解(含封裝axios)
登錄功能對于前端剛?cè)腴T不久的同學(xué)來說較為困難,下面這篇文章主要給大家介紹了關(guān)于Vue登錄功能實(shí)現(xiàn)(含封裝axios)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12