vue 中 input 限制最多2位小数,功能实现了,但是有小瑕疵

Sven
  • 553

在vue中有个input 我使用v-model 以及watch 获取输入的数字,然后现在最多输入2位小数
虽然功能实现了,但是在输入的时候,实际上是可以输入3位小数的,只不过我通过watch 截取了输入的数据,重新赋值,达到最多2位小数的需求,但是在输入的过程中,输入的数据一直闪...体验不太好

请问,对于这类需求,有其他的解决方案么? vue中使用的

图片描述

图片描述

回复
阅读 5.7k
5 个回答

你可以不实时监控计算啊。你在input失去焦点事件的时候,对输入的数据进行一个过滤就行了。

给input的max length绑定数据,碰到有小数点就统计整数位+3? 没实践 可以试一下

idleb
  • 277

方法一:可以用绑定键盘事件处理,watch 的话,需要input的value变化之后才会执行你的方法,所以输入会闪。可以再监听keydown事件,在如果满足两个小数点,就直接return。
方法二:通过input 的 maxlength 限制输入,在输入小数点后一位时,改变maxlength为当前长度+1

自己模拟个输入框,光标。然后监听按键按下- -

宣传栏