网站整体克隆包含后台,wordpress分享到微信二维码,福建省城乡建设官方网站,如何做好宣传推广背景
使用view-design组件库的Input组件的时候#xff0c;按照产品的要求#xff0c;输入框中只能键入正整数。
使用效果 如果直接使用组件的type属性#xff0c;设置类型为number时#xff0c;乍一看没啥问题#xff0c;但是当我们键入 小数点(.) 或者 e/E 后面没有跟任…背景
使用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完美解决。 有一说一名声高还是有一定实力的。
写在最后
当我们发现某些行为出乎意料时首先看看我们使用的工具是否鲁棒性够好在简单的问题上不要过于怀疑我们自己的问题
如果有帮助到大家不管是问题本身还是思维方式都希望大家可以点个赞支持下博主
