封装el-input组件，限制输入为指定的数值类，不符合提示（同样也适于表格动态添加行，单元格校验）

一、封装组件

<template>
    <el-input
            :class="['InputNumber', {inConformity: 'inConformity'}]"
            v-bind="$attrs"
            v-on="$listeners"
            v-model="inputVal"
            @input.native="inputHandle($event)"
            @blur="blurHandle"
            @change="onChange"
            @keyup.enter.native="onKeyUpEnter"
            ref="inputRef"
    ></el-input>
</template>

<script>
    export default {
        name: "InputNumber",
        inheritAttrs: false,
        props: {
            // 输入框的值
            fieldValue: {
                default: "",
            },
            // 输入最大长度限制
            maxlength: {
                type: String,
                default: '15',
            },
            // 是否为整数
            isInteger: {
                type: Boolean,
                default: true,
            },
            // 每次输入后的回调
            callback: {
                type: Function,
                default: null,
            },
        },
        data() {
            return {
                inputVal: "",
                originVal: "",
                inConformity: false, //  不符合
                isAdd: true
            };
        },
        watch: {
            // 监听外部值的改变
            fieldValue: {
                handler(val) {
                    this.originVal = this.inputVal = val;
                },
                immediate: true,
            },
            inputVal: {
                handler(val) {
                    let isAccordWith = this.verifyNumber(val);
                    this.updateStatus(!isAccordWith);
                },
                immediate: true,
            }
        },
        methods: {

            updateStatus(inConformity){
                this.inConformity = inConformity;
            },
            inputHandle(e) {
                // 输入框为空时
                if (e.target.value === "") {
                    this.originVal = "";
                    this.inputVal = "";
                    if (this.callback) this.callback("");
                    return;
                }

                let isAccordWith = this.verifyNumber(e.target.value);

                if (isAccordWith) {
                    // 符合指定规则
                    if (this.isInteger || /^0+[^.]/.test(e.target.value)) {
                        // 是否格式化一下
                        this.inputVal = Number(e.target.value)
                    }
                    this.originVal = this.inputVal;
                    if (this.callback) this.callback(this.inputVal);
                } else {
                    this.inputVal = e.target.value;
                }
            },

            // 失焦去除数值末尾可能存在的.（浮点）
            blurHandle() {
                if (/\.$/.test(this.inputVal)) {
                    this.inputVal = Number(this.inputVal);
                    this.originVal = this.inputVal;
                }
                const val = this.inConformity ? this.inputVal : Number(this.inputVal);
                this.$emit('update:fieldValue', val);
                if(this.isAdd) {
                    this.$emit("blur");
                    this.isAdd = true;
                } else {
                    this.onExitEdit();
                }
            },
            onChange() {
                if(this.inConformity) {
                    this.inputVal = this.originVal;
                    // 此处更改为自己需要的提示语句
                    this.$message.error("所输入的数据格式不对！");
                    this.isAdd = false;
                } else {
                    if(this.isInteger) {
                        let isAccordWith = this.verifyMaxOrMin(this.inputVal);
                        if(!isAccordWith) {
                            // 此处更改为自己需要的提示语句
                            this.$message.error("所输入的数据范围不对！");
                            this.inputVal = this.fieldValue;
                            this.originVal = this.inputVal;
                            this.isAdd = false;
                        }
                    }
                }
                const val = this.inConformity ? this.inputVal : Number(this.inputVal);
                this.$emit("update:fieldValue", val);
            },
            onExitEdit(){
                this.$emit("onExitEdit");
            },
            onKeyUpEnter() {
                this.blurHandle();
            },
            verifyNumber(val){
                if(!val) return true;
                let rule = /.*/;

                if (this.isInteger) {
                    rule = /^[+-]?(\d+)$/;
                } else {
                    rule = /^[+-]?(\d+|([1-9]\d+))(\.\d+)?$/;
                }

                return rule.test(val);
            },
            verifyMaxOrMin(num){
                const max = Math.pow(2, 63);
                const min = Math.pow(-2, 63);
                return (min <= num) && (num <= max);
            },
            focus(){
                this.$refs.inputRef.focus();
            },
            blur(){
                this.$refs.inputRef.blur();
            }
        },
        destroyed() {
            this.isAdd = true;
        }
    };
</script>
<style lang="scss" scoped>
    ::v-deep .InputNumber {
        .el-input__inner {
            color: #606266;
            border: none;
            border-radius: 0;
        }
    }
    .inConformity {
        .el-input__inner {
            color: red !important;
        }
    }
</style>

二、使用步骤

<template>
  <div class="home">
    <h1>This is an home page</h1>
    <hr />
    <InputNumber :fieldValue.sync="iptVal" />
    <p>-----{{ iptVal }}-----</p>
  </div>
</template>

<script>
import InputNumber from "@/components/mycompo/InputNumber.vue";
export default {
  name: "HomeView",
  components: {
    InputNumber,
  },
  data() {
    return {
      iptVal: "",
    };
  },
};
</script>