背景
使用view-design组件库的Input组件的时候,按照产品的要求,输入框中只能键入正整数。
使用效果
-
如果直接使用组件的type属性,设置类型为
number
时,乍一看没啥问题,但是当我们键入 小数点(.) 或者 e/E 后面没有跟任何数字时,会发现我们的input或者change回调函数中,根本就没有小数点这个字符,还有很多字符都会对这个限制(输入框中只能键入正整数)有影响,不建议使用这中方案
以上是示例的输出结果,我们可以明显的发现,在键入小数点,返回值中没有小数点,当再输入一个数值,小数点才会显现出来。原因:
任何数字都是可接受的值,只要它是有效的浮点数w3c的官方解释:什么是有效浮点数 -
我们使用type类型为
text
,本来以为这种肯定可以,因为我们可以在input或者change的时候,更改(格式化)输入的结果,
类似这样:
onInput/onChange(value) {
/** 非数字的字符全部替换为空字符串 */
this.settingForm.readingTime = value.replaceAll(/\D/g, "");
}
但是,神奇的发现,竟然没有效果,键入的值没有按照预计的结果输出,并没有把非数字字符替换为空字符串.
然后当我去查看view-design组件库源码之后,发现确实他们做处理了
handleInput (event) {
if (this.isOnComposition) return;
let value = event.target.value;
if (this.number && value !== '') value = Number.isNaN(Number(value)) ? value : Number(value);
this.$emit('input', value);
/** 把值更改了 **/
this.setCurrentValue(value);
this.$emit('on-change', event);
},
setCurrentValue (value) {
/** 当我们执行change更改的时候,它又认为前后值相同,直接return */
if (value === this.currentValue) return;
this.$nextTick(() => {
this.resizeTextarea();
});
this.currentValue = value;
if (!findComponentUpward(this, ['DatePicker', 'TimePicker', 'Cascader', 'Search'])) {
this.dispatch('FormItem', 'on-form-change', value);
}
},
watch: {
value (val) {
this.setCurrentValue(val);
}
},
解决
由于项目中还引入了elementUI,所以博主直接使用了elementUI,完美解决。
有一说一,名声高还是有一定实力的。
写在最后
当我们发现某些行为出乎意料时,首先看看我们使用的工具是否鲁棒性够好,在简单的问题上,不要过于怀疑我们自己的问题
如果有帮助到大家,不管是问题本身还是思维方式,都希望大家可以点个赞支持下博主!!!