背景

使用view-design組件庫的Input組件的時候，按照產(chǎn)品的要求，輸入框中只能鍵入正整數(shù)。

使用效果

1. 如果直接使用組件的type屬性，設置類型為number時，乍一看沒啥問題，但是當我們鍵入 小數(shù)點(.) 或者 e/E 后面沒有跟任何數(shù)字時，會發(fā)現(xiàn)我們的input或者change回調(diào)函數(shù)中，根本就沒有小數(shù)點這個字符，還有很多字符都會對這個限制（輸入框中只能鍵入正整數(shù)）有影響，不建議使用這中方案
   
   以上是示例的輸出結果，我們可以明顯的發(fā)現(xiàn)，在鍵入小數(shù)點，返回值中沒有小數(shù)點，當再輸入一個數(shù)值，小數(shù)點才會顯現(xiàn)出來。

   原因：
   任何數(shù)字都是可接受的值，只要它是有效的浮點數(shù)w3c的官方解釋：什么是有效浮點數(shù)

2. 我們使用type類型為text，本來以為這種肯定可以，因為我們可以在input或者change的時候，更改（格式化）輸入的結果，
   類似這樣：

onInput/onChange(value) {
/** 非數(shù)字的字符全部替換為空字符串 */this.settingForm.readingTime = value.replaceAll(/\D/g, "");
}

但是，神奇的發(fā)現(xiàn)，竟然沒有效果，鍵入的值沒有按照預計的結果輸出，并沒有把非數(shù)字字符替換為空字符串.
然后當我去查看view-design組件庫源碼之后，發(fā)現(xiàn)確實他們做處理了

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) {
/** 當我們執(zhí)行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，完美解決。
有一說一，名聲高還是有一定實力的。

寫在最后

當我們發(fā)現(xiàn)某些行為出乎意料時，首先看看我們使用的工具是否魯棒性夠好，在簡單的問題上，不要過于懷疑我們自己的問題

如果有幫助到大家，不管是問題本身還是思維方式，都希望大家可以點個贊支持下博主！！！