网站建设深圳哪里学互联网域名交易中心

背景

使用view-design组件库的Input组件的时候，按照产品的要求，输入框中只能键入正整数。

使用效果

1. 如果直接使用组件的type属性，设置类型为number时，乍一看没啥问题，但是当我们键入 小数点(.) 或者 e/E 后面没有跟任何数字时，会发现我们的input或者change回调函数中，根本就没有小数点这个字符，还有很多字符都会对这个限制（输入框中只能键入正整数）有影响，不建议使用这中方案
   
   以上是示例的输出结果，我们可以明显的发现，在键入小数点，返回值中没有小数点，当再输入一个数值，小数点才会显现出来。

   原因：
   任何数字都是可接受的值，只要它是有效的浮点数w3c的官方解释：什么是有效浮点数

2. 我们使用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，完美解决。
有一说一，名声高还是有一定实力的。

写在最后

当我们发现某些行为出乎意料时，首先看看我们使用的工具是否鲁棒性够好，在简单的问题上，不要过于怀疑我们自己的问题

如果有帮助到大家，不管是问题本身还是思维方式，都希望大家可以点个赞支持下博主！！！