Vue-element中el-input輸入卡頓問(wèn)題的解決
Vue-element中el-input輸入卡頓
最近使用Vue-element時(shí)，遇到了el-input輸入卡頓問(wèn)題，影響用戶體驗(yàn)，如下
el-input是這樣寫的，沒(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è)試了這種寫法確實(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()
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
electron-vue中報(bào)錯(cuò)Cannot?use?import?statement?outside?a?m
Electron 是一個(gè)使用 JavaScript、HTML 和 CSS 構(gòu)建桌面應(yīng)用程序的框架,下面這篇文章主要給大家介紹了關(guān)于electron-vue中報(bào)錯(cuò)Cannot?use?import?statement?outside?a?module的解決方案,需要的朋友可以參考下2023-02-02
Vue與后臺(tái)Api進(jìn)行交互通常是利用vue-resource來(lái)實(shí)現(xiàn)的，本質(zhì)上vue-resource是通過(guò)http來(lái)完成AJAX請(qǐng)求相應(yīng)的。這篇文章主要介紹了Vue中的vue-resource示例詳解,需要的朋友可以參考下2018-11-11
Vue+SpringBoot實(shí)現(xiàn)支付寶沙箱支付的示例代碼
本文主要介紹了Vue+SpringBoot實(shí)現(xiàn)支付寶沙箱支付的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06
vue項(xiàng)目element UI input框掃碼槍掃描過(guò)快出現(xiàn)數(shù)據(jù)丟失問(wèn)題及解決方案
這篇文章主要介紹了vue項(xiàng)目element UI input框掃碼槍掃描過(guò)快出現(xiàn)數(shù)據(jù)丟失問(wèn)題,輸入框要掉兩個(gè)接口，根據(jù)第一個(gè)驗(yàn)證接口返回的code，彈不同的框，點(diǎn)擊彈框確認(rèn)再掉第二個(gè)接口，需要的朋友可以參考下2022-12-12
詳解基于 axios 的 Vue 項(xiàng)目 http 請(qǐng)求優(yōu)化
這篇文章主要介紹了詳解基于 axios 的 Vue 項(xiàng)目 http 請(qǐng)求優(yōu)化,非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-09-09
微前端qiankun主應(yīng)用與子應(yīng)用之間的跳轉(zhuǎn)示例
這篇文章主要為大家介紹了微前端qiankun主應(yīng)用與子應(yīng)用之間的跳轉(zhuǎn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要介紹了vue子組件如何使用父組件傳過(guò)來(lái)的值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了axios攜帶cookie配置詳解(axios+koa)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
vue.js 嵌套循環(huán)、if判斷、動(dòng)態(tài)刪除的實(shí)例
下面小編就為大家分享一篇vue.js 嵌套循環(huán)、if判斷、動(dòng)態(tài)刪除的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
在vscode 中設(shè)置 vue模板內(nèi)容的方法
這篇文章主要介紹了在vscode 中設(shè)置 vue模板內(nèi)容的方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-09