vue中关于el-input框的长度限制

需求:需要把输入框的整数长度限制为10位小数 并且可以输入两位小数 也就是13位的长度 于是我给el-input做了个maxlength=13 并且写了个正则


    <el-col :span="11">
            <el-form-item label="降价策略(元/分钟):" prop="failTactics">
              <el-input
                class="input-width"
                v-model="ruleForm.failTactics"
                :maxlength="13"
                autocomplete="off"
                placeholder="请输入降价策略"
                size="mini"
              @input.native="keyup($event,'failTactics')"
                @blur="blurmethod($event,'failTactics')"
              ></el-input>
            </el-form-item>
          </el-col>



  keyup(e,val){
            //限制10位整数 与两位小数的正则规则
             if (e.target.value[0] === '.') {
                e.target.value = e.target.value.replace(/^(\.)/, '0$1');
            } else if (e.target.value[0] === '0' && /\d/.test(e.target.value[1])) {
                e.target.value = e.target.value.substring(1)
            } else if (e.target.value.includes('.')) {

               const arr = e.target.value.split('.')
                if (arr[0].length > 13) {
                    e.target.value = e.target.value.substring(0, 12)
                this.ruleForm[val] = e.target.value

                }
                e.target.value = e.target.value.replace(/[^(\d\.)]/g, '')
                e.target.value = e.target.value.replace(/^(\d{1,12}\.?\d{0,2}).*/, '$1');

                this.ruleForm[val] = e.target.value

            } else {
                e.target.value = e.target.value.replace(/[^\d]/g, '')
                e.target.value = e.target.value.replace(/^(\d{0,10}).*/, '$1');
                this.ruleForm[val] = e.target.value
            }
    },
blurmethod(e,val){
  
 if (e.target.value[e.target.value.length - 1] === '.'){
    e.target.value = e.target.value.substring(0, [e.target.value.length - 1])
                this.ruleForm[val] = e.target.value

 }

结果出现了 bug 就是我输入了10位整数并且输入了小数后 我再回到前面整数位置 再输入 会吧小数清除了 并且变成了11位整数 再次输入又变成了10位正整数 我觉得可能是输入框绑定的问题 目前没有找到解决的办法 当时写的时候做限制10位整数的时候发现可以继续键入11位 但是输入框没有显示 绑定的值内是11位 属于我就加了一句 this.ruleForm[val] = e.target.value 来解决 但是现在出现这个bug不知道怎么解决

img

你把input类型限制为数字,然后rule里限定最大值,最小值就行了