Element input输入框，只允许数值（数字）输入

在实际开发中，涉及到金额并且存在很严格的校验规则的情况下，为了更好的用户体验，从而写了下面的，代码

首先下面是，element组件的具体代码

<div class="class-box-input">
      <el-input placeholder="请输入内容" @input="handleInput" style="width: 300px;" maxlength="7" v-model="input" clearable></el-input>
</div>

js代码：实际就是使用了js中的正则匹配，然后替换

 handleInput(v) {


            let cleanedValue = v.replace(/[^\d.]/g, '');//移除非数字和小数点

            cleanedValue  = cleanedValue.replace(/^0\d+/g, '');//当输入第二个00的时候直接清空输入框

            if (/\.\d+\./.test(cleanedValue)) {//当输入多个小数点匹配其数字和小数点组合
            cleanedValue = cleanedValue.replace(/\.\d+\./g, '.'); // 移除中间的数字和小数点组合
            }

            let parts = cleanedValue.split('.');//分割小数点

            if (parts.length === 2) {
                this.input = `${parts[0].replace(/^0+(\d)/, '$1')}.${parts[1].slice(0, 2)}`;
            } else {
            const firstDigit = cleanedValue.match(/\d/);

            if (firstDigit && firstDigit[0] !== '0') {
                this.input = cleanedValue.endsWith('.') ? cleanedValue : cleanedValue;
            } else {
                this.input = firstDigit ? cleanedValue.replace(/^0+(\d)/, '$1') : cleanedValue.slice(1);
            }
            }

                console.log(this.input, '+++++++++++');
            },

为了更好的用户体验，采取了直接限制用户输入的价格，直接清空输入框，此输入框可输入，小数、整数，不可输入英文，与不合法的数字

下面是效果图：