問題描述
當小程序的input輸入框輸入過快或連續(xù)刪除時描焰，會出現(xiàn)數(shù)值不準逼肯、回退和閃爍的問題
問題代碼
<input
v-model="inputValue"
type="text"
@focus="inputFocus"
@blur="inputBlur"
>
第一次嘗試
將v-model雙向綁定替換成用value操控初始值胎围，失焦的時候更新數(shù)據(jù)的方式留攒。未解決問題
第二次嘗試
通過id直接操縱元素的方式賦默認值坚洽，input值改變（input事件）的時候更新數(shù)據(jù)捌斧。問題減輕但沒有解決
第三次嘗試
自定義滾動選擇器彈出時笛质，問題明顯，推斷是頁面元素和數(shù)據(jù)過多導(dǎo)致卡頓捞蚂，通過v-if在不需要用到滾動選擇器的時候進行隱藏妇押。問題減輕但沒有解決
最終嘗試
將第二次嘗試和第三次嘗試的結(jié)果進行合并。問題解決
實現(xiàn)代碼
<input
type="text"
@focus="inputFocus"
@input="updateValue"
@blur="inputBlur"
>
//掛載前將初始值賦值給input
document.getElementById(inputId).value = data.dataInput;
// 更新數(shù)據(jù)
function updateValue(e) {
let value = e.detail.value;
setTimeout(() => {
context.emit('input' ,value);
}, 0)
}
//不使用的時候不進行渲染
<nut-popup
v-if="showFlag"
v-model:visible="showFlag"
position="bottom"
>
<scroll-selector-box />
</nut-popup>
