vue中做一个最多输入一位小数且可以为负数的输入框（包含最前面最后面为小数点及多个-符号与前导零校验）

需求背景

日常开发中会有对input做校验的需求  例如做一个只可以输入一位小数及可以为负数的输入框  这时候会出现0开头、多个--、多个小数点插入或开头结尾为小数点的情况

实现过程

<el-input
            style="width: 80px;"
            v-model="dataForm.low"
            @input="lowHandleInput($event, 'low')"
            @blur="lowValueBlur('low')"
          ></el-input>
const formatValue=(value:any)=> {
      // 格式化输入的值，确保最多1位小数
      const [integerPart, decimalPart] = value.split(".");
      if (decimalPart && decimalPart.length > 1) {
        return `${integerPart}.${decimalPart.slice(0, 1)}`;
      }
      //只保留最前面的.
      value=value.replace(/\.(?=.*\.)/g, '');
      //多个-处理
      const firstChar = value[0] || '';
      const restOfString = value.slice(1).replace(/-/g, '');
      value= firstChar + restOfString;
      return value;
    }
  const  lowHandleInput=(value:any,name:string)=> {
      //基础格式检测
      const regex = /^[-]?\d*(\.\d{0,1})?$/;
      if (!regex.test(value)) {
        dataForm[name] = formatValue(
          value.replace(/[^-\d.]/g, "").replace(/(\.\d*)?\.$/, "$1"),
        );
        return;
      }
      dataForm[name] = formatValue(value);
    }
  const  lowValueBlur=(name:string)=> {
      if (dataForm[name].length) {
        //最后一位为.
        if (dataForm[name][dataForm[name].length - 1] == ".") {
          dataForm[name] = dataForm[name].slice(0, -1);
        }
        //最前面为.
        if (dataForm[name][0] == ".") {
          dataForm[name] = dataForm[name].slice(1);
        }
        //将前导零忽略
        dataForm[name]=String(Number(dataForm[name]));
      }
  }

失焦及输入事件可传key进行复用  若小数点需要支持多位 例如3位时可将正则及slice内数字1进行替换为3