问题描述
当小程序的input输入框输入过快或连续删除时，会出现数值不准、回退和闪烁的问题
问题代码
<input
v-model="inputValue"
type="text"
@focus="inputFocus"
@blur="inputBlur"
>
第一次尝试
将v-model双向绑定替换成用value操控初始值，失焦的时候更新数据的方式。未解决问题
第二次尝试
通过id直接操纵元素的方式赋默认值，input值改变（input事件）的时候更新数据。问题减轻但没有解决
第三次尝试
自定义滚动选择器弹出时，问题明显，推断是页面元素和数据过多导致卡顿，通过v-if在不需要用到滚动选择器的时候进行隐藏。问题减轻但没有解决
最终尝试
将第二次尝试和第三次尝试的结果进行合并。问题解决
实现代码
<input
type="text"
@focus="inputFocus"
@input="updateValue"
@blur="inputBlur"
>
//挂载前将初始值赋值给input
document.getElementById(inputId).value = data.dataInput;
// 更新数据
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>
