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

解決Vue?input輸入框卡死的問題

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

原因

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

解決方法

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

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

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

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

補(bǔ)充：下面看下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

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

相關(guān)文章

最新評論