Vue3中number输入框target.value不包含小数点问题

这个问题是<input type="number">的原生机制导致的，和Vue、TypeScript没有关系：

• 浏览器会对number类型输入框的value做合法性校验，只有符合合法数字语法的字符串才会被同步到target.value，输入过程中的不合法中间态不会出现在value属性中。
• 当你输入1.（1后面跟小数点，还没输入小数位）的时候，这个字符串不是合法的可解析数字，此时读取target.value，不同浏览器会返回空字符串或者已输入的整数部分"1"，始终不会返回带孤立小数点的"1."，和你调试时看到的现象一致。
• 你的代码在每次input事件触发时，都会执行target.value = target.value.slice(0, props.maxLen)把值回写到输入框：刚输入小数点的瞬间，你拿到的value里根本没有小数点，回写之后直接把用户刚敲的小数点覆盖掉了，自然永远输不进小数部分。

你注释掉的数值范围校验逻辑也有同样的隐患：输入到1.这个中间态时，+target.value会得到NaN，后续的min/max计算都会出问题，直接回写就会清空用户输入。

不要在number类型输入框上做逐字符的字符串截断操作，两种常用实现：

• 方案1：延迟回写时机，不要在输入中间态强制改value
  不要每次input事件都立刻截断回写值，等输入值是合法数字（比如失焦时、或者valueAsNumber不为NaN时）再做长度截断、min/max范围校验，避免打断用户输入小数的中间过程。
• 方案2：改用type="text"做输入控制
  number输入框的设计目标是采集合法数值，不支持逐字符的输入过程管控。如果要严格限制最大长度、允许输入的字符类型，直接用text类型输入框，在input事件里过滤非数字、小数点的字符，再做长度截断，逻辑可控性比硬改number输入框高很多，不会出现中间态值丢失的问题。

内容的提问来源于stack exchange，提问作者Some Noob Student