欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解決Vue?input輸入框卡死的問(wèn)題

 更新時(shí)間：2022年09月17日 14:37:43   作者：什么都干的派森  
這篇文章主要介紹了解決Vue?input輸入框卡死的問(wèn)題,文中同時(shí)給大家提到了Vue-element中el-input輸入卡頓問(wèn)題及解決方法，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下

原因

我把 vuex 全局變量 $store.state.search.key 綁定到 v-model 上，然后在頁(yè)面掛載時(shí)通過(guò)代碼修改 $store.state.search.key 的值，最后在頁(yè)面上輸入任意值 input 框就卡住了

解決方法

1.input 標(biāo)簽增加 @input 屬性

<input v-model='$store.state.search.key' @input="forceUpdateInput">

2.methods 中增加對(duì)應(yīng)方法

forceUpdateInput(){this.$forceUpdate();}

補(bǔ)充：下面看下Vue-element中el-input輸入卡頓問(wèn)題

最近使用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

到此這篇關(guān)于Vue input輸入框卡死的解決辦法的文章就介紹到這了,更多相關(guān)Vue input輸入框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論