项目场景:
项目场景:uni.app,input组件限制输入的数字不能大于100
问题描述
input组件绑定的值赋值之前,判断用户输入的不能超过最大值,超过的话默认为100,,这个判断和赋值然后视图更新只能触发一次,之后在输入,发现值改了页面但是不更新。
<uni-forms-item label="退款比例" required name="percent">
<uni-easyinput
type="digit"
:trim="true"
:inputBorder="false"
maxlength="3"
:modelValue="state.formData.percent"
@input="handlePercentInput"
placeholder="请输入退款比例(0-100)"
:clearable="false"
/>
</uni-forms-item>
// 退款比例input
function handlePercentInput(value) {
if (!value) {
state.formData.percent = '';
return;
}
const num = Number(value);
if (isNaN(num)) return;
if (num > 100) {
state.formData.percent = 100
} else {
state.formData.percent = value;
}
}
原因分析:
v-model和:value都试过。都没用,网上描述的这个bug能追溯到19年。看来是个老bug。
解决方案:
解决办法就是将赋值代码写在延时器中
// 退款比例input
function handlePercentInput(value) {
if (!value) {
state.formData.percent = '';
return;
}
const num = Number(value);
if (isNaN(num)) return;
if (num > 100) {
setTimeout(() => {
state.formData.percent = 100
},10)
} else {
state.formData.percent = value;
}
}

1万+

被折叠的 条评论
为什么被折叠?



