element-ui ：封装el-input 遇到的问题

因项目中有多处输入框要求只能输入整数或者浮点数， el-input 设置type=number 火狐浏览器这个属性是无效的； 所以就想到了 使用el-input type=text 输入的时候 正则匹配， 只能输入整数或者浮点数; 所以为了方便使用，需要对第三方库el-input 进行封装。

1. 初始封装的组件Number-input.vue 代码如下：

<template>
    <el-input 
    :value="value" 
    v-bind="$attrs"
    type="text" 
    @input="handleInput"
    />
 
</template>
<script>
import Big from 'big.js';
    export default {
        inheritAttrs: false,
        props: {
            value: {
                type: String | Number,
                default: ''
            },
            precision: {
                type: Number,
                validator(val) {
                    return val >= 0 && val === parseInt(val, 10);
                }
            },
            minPrecision: {
                type: Number,
                validator(val) {
                    return val >= 0 && val === parseInt(val, 10);
                }
            },
            maxPrecision: {
                type: Number,
                default: Infinity,
                validator(val) {
                    return val >= 0 &&(val === parseInt(val, 10) || val === Infinity);
                }
            },
            isNumber: {
                type: Boolean,
                default: false
            },
            max: {
                type: String | Number,
                default: Infinity
            },
            min: {
                type: String | Number,
                default: -Infinity
            }
        },
        methods: {
            handleInput(val) {
                console.log('ssssss===', val)
                let reg = ''
                if(this.maxPrecision === Infinity) {
                    // this.$emit('input', val)
                   reg  = new RegExp(`^\\D*(\\d*(?:\\.\\d{0,20})?).*$`, 'g')
                    this.$emit('input', val.replace(reg ,'$1'))
                } else if(this.maxPrecision >= 0) {
                    //  正则不能输入最大位数
                   reg  = new RegExp(`^\\D*(\\d*(?:\\.\\d{0,${this.maxPrecision}})?).*$`, 'g')
                    this.$emit('input', val.replace(reg ,'$1'))
                }
                val = val.replace(reg ,'$1')
                this.$emit('input', val)
                console.log('ssssss结束===', val)
            },
            handleInputChange(val) {
                console.log('handleInputChange====',  val, this.precision)
                let newV = isNaN(val) ? '' : (val ? val.toString() : '')
                if(newV) {
                    newV = this.getNewValue(val.toString())
                }
                this.$emit('input', newV)
            },
            getNewValue(val) {
                // 根据精度获取幂次数, 获取精度整数位 利用math.round 四舍五入  转成float类型 再除以相同的10次幂 1.345直接利用tofixed(2) 取2位精度 会有问题 
                let newV = ''
                let bigNewV = new Big(val)
                let precisionArray = val.split('.')
                let precision = precisionArray?.[1]?.length??0
                if(this.minPrecision >= precision) {
                    newV = bigNewV.toFixed(this.minPrecision)
                } else {
                    newV = bigNewV.toFixed(precision)
                }
                return newV
            }
        }
    
    }
</script>

封装第三方组件主要用到 $atrrs 和 $listeners 

v-bind="$attrs" v-on="$listeners" 

 $atrrs：接收父组件传过来的非class 和 style ， 并且未在props  中注册使用的属性 

$listeners ：接收父组件传过来的非native 的事件

（注：.native 事件是父组件本身的事件, 在vue 中.native 只能用于组件上，.native 修饰符的作用是：在一个组件的根元素上直接监听一个原生事件; 原生的标签上不能使用 比如直接在 会报错）

2. 父组件 Add.vue  中使用

 <NumberInput 
:maxPrecision="0" 
v-model="quantity" 
placeholder="请输入" 
clearable />

 上述使用目前为止都是正常的;

然后突然发现另外一个同事使用的时候 ，出现了问题！！！

在封装的组件Number-input.vue中多写一个属性为了接收父组件传过来的事件再传给下一级：v-on="$listeners"

<template>
    <el-input 
    :value="value" 
    v-bind="$attrs"
    v-on="$listeners"
    type="text" 
    @input="handleInput"
    />
 
</template>

和上述对比 导致除了数字其他还能输入

原因就是 el-input 源码中 通过 v-on="$listeners" 接收了 业务组件Add.vue 传过来的事件, Add.vue 使用v-model 实现双向绑定, 默认有一个input 事件； 所以 当输入框输入数据的时候 , el-input 源码 中 触发input 事件, 同时向外触发 this.$emit('input', event.target.value) ， 这个会先后触发Number-input.vue 和 Add.vue 中的 input事件; Add.vue中默认的input 事件接收的是 el-input 源码中传过来的原始值，会覆盖掉 Number-input.vue 中传过来的值， 最终v-model 中的值接收的也是el-input 源码中传过来的原始值. 

el-input 源码
handleInput(event) {
        // should not emit input during composition
        // see: https://github.com/ElemeFE/element/issues/10516
        if (this.isComposing) return;
 
        // hack for https://github.com/ElemeFE/element/issues/8548
        // should remove the following line when we don't support IE
        if (event.target.value === this.nativeInputValue) return;
        console.log('el-input input事件====', event)
        this.$emit('input', event.target.value);
        // ensure native input value is controlled
        // see: https://github.com/ElemeFE/element/issues/12850
        this.$nextTick(this.setNativeInputValue);
      },

知道了原因所在，如何修复该问题:

1. Number-input 组件中的@input 和 @change事件 添加.native ， 这样的话 el-input 源码中的 $emit('input' 就不会触发这两个事件 ; 这两个事件 会添加到 组件的根元素上 ; 看 el-input 源码可知 会添加到最外层的div 上； 然后 当我们输入数据的时候 ，首先$emit('input' 触发的是Add.vue 中的input 事件改变value 值；接着 通过冒泡 会触发父元素上的input 和 change事件, 在这 两个事件中 手动又去触发了 add.vue 中的input 事件（这个主要是自己怎么写）， 改变了 value 值， 最终改了输入框的值

2. Number-input.vue中监听value 值的变化 类似下面： 但是这种 不能 区分是input 还是change事件

watch: {
            value: {
                handler(val, oldV) {
                    let reg = ''
                    if(this.maxPrecision === Infinity) {
                        // this.$emit('input', val)
                    reg  = new RegExp(`^\\D*(\\d*(?:\\.\\d{0,20})?).*$`, 'g')
                        this.$emit('input', val.replace(reg ,'$1'))
                    } else if(this.maxPrecision >= 0) {
                        //  正则不能输入最大位数
                    reg  = new RegExp(`^\\D*(\\d*(?:\\.\\d{0,${this.maxPrecision}})?).*$`, 'g')
                        this.$emit('input', val.replace(reg ,'$1'))
                    }
                    val = val.replace(reg ,'$1')
                    this.$emit('input', val)
                }
            }
        },