iview组件库的input框type设置为number时maxlength失效

iview组件库的input框type设置为number时maxlength失效

业务场景为字段只能输入数字,并且最大输入8位。

用了iview的input框,type设置为number,maxlength设置为8

在这里插入图片描述

发现并没有限制输入位数,看了下官网当type为number时,maxlength会失效,于是查阅了一下网上的方法,经实践,有效方法如下:

在input组件的on-change方法中判断长度,超过长度用slice方法切割
在这里插入图片描述

你以为结束了吗,其实没有!

字段已经切割了,以为可以了,但是发现输入框看起来还是没限制,此时需要刷新视图。
在这里插入图片描述

为什么会出现这样的问题

input组件的 onchange方法应该是微任务,不会刷新视图,所以要用vue的nextTick方法刷新视图

猜你喜欢

转载自blog.csdn.net/weixin_42255789/article/details/129187108