使用iviewui组件库的坑

news2024/12/24 9:48:51

背景

使用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);
            }
        },