Element-Ui input只允许输入数字和两位小数，封装input组件

最近在使用element-ui  的input组件时，遇到了一些问题，业务要求只支持数字和两位小数，刚开始使用了oninput事件然后写正则过滤，发现正常输入没有问题，但是如何input里面是实时监听动态计算的就会出现bug，当输入中文的时候，input框会直接无法点击，试了很多办法无法解决，最后看issue  https://github.com/ElemeFE/element/issues/10516 这个问题没发解决，最后发现修改源码可以实现需求

1. 首先将element-ui 中的input组件找到 然后复制下来，只需要修改 handleInput 事件就可以

    handleInput(event) {
           // should not emit input during composition
           // see: https://github.com/ElemeFE/element/issues/10516
           if (this.isComposing) return;
           //支持数字或者数字小数点
           if(this.isNumber){
             event.target.value = event.target.value.replace(/[^\d]/g,'')
           } else if(this.isNumberAndAlphabet){
             event.target.value = event.target.value.replace(/[\W]/g,'')
           } else if(this.isRate){
             if(event.target.value>100)
             event.target.value = 100
             event.target.value = event.target.value.match(/^\d*(\.?\d{0,2})/g)[0];
           } else{
             event.target.value = event.target.value.match(/^\d*(\.?\d{0,2})/g)[0];
           }
   
           // 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;
   
           this.$emit('input', event.target.value);
   
           // ensure native input value is controlled
           // see: https://github.com/ElemeFE/element/issues/12850
           this.$nextTick(this.setNativeInputValue);
         },

   isNumber是只支持数字，isNumberAndAlphabet支持数字和字母，isRate支持比例（数字和两位小数，超过100时置为100）

2. 如果有新的业务规则可以继续添加逻辑，然后全局注册一下在main.js中引入

   import amountInput from '@/components/amount-input/index';

    

3.  在需要的vue文件中直接使用