如何让以下自定义指令支持正负浮点数？

Z时代
2024-02-26
分类：IT

vue2项目封装了指令，输入框只能输入正浮点数，现在需要在此代码基础上修改下，支持输入正浮点数和负浮点数。

源码如下：

export default {
  bind(el, binding, vnode) {
    const input =
      el.querySelector(".el-input__inner") ||
      el.querySelector(".el-textarea__inner") ||
      el;
    input.addEventListener("compositionstart", () => {
      vnode.locking = true; // 解决中文输入双向绑定失效
    });
    input.addEventListener("compositionend", () => {
      vnode.locking = false; // 解决中文输入双向绑定失效
      input.dispatchEvent(new Event("input"));
    });
    // 输入监听处理
    input.onkeyup = () => {
      if (vnode.locking) {
        return;
      }
      // v-input.float
      if (binding.modifiers.float) {
        // 只能输入浮点型（只能一个小数点）
        onlyFloat(input, binding.value);
      }
      input.dispatchEvent(new Event("input"));
    };
   //  浮点数
   function onlyFloat(input, n) {
      let value = input.value;
      value = value.replace(/[^\d.]/g, "");
      value = value.replace(/^\./g, "");
      value = value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
      if (n && Number(n) > 0) {
        // 限制n位
        var d = new Array(Number(n)).fill("\\d").join("");
        var reg = new RegExp(`^(\\-)*(\\d+)\\.(${d}).*$`, "ig");
        value = value.replace(reg, "$1$2.$3");
      }
      if (value && !value.includes(".")) {
        value = Number(value).toString(); // 去掉开头多个0
      }
      input.value = value;
    }
  }}

回答：

function onlyFloat(input, decimalPlaces) {
  let val = input.value;
  if (val.startsWith('-')) {
    val = '-' + val.slice(1).replace(/-/g, '');
  }
  val = val.replace(/^\./g, '0.').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
  if (decimalPlaces !== undefined && !isNaN(decimalPlaces)) {
    const parts = val.split('.');
    if (parts[1] && parts[1].length > decimalPlaces) {
      parts[1] = parts[1].substring(0, decimalPlaces);
      val = parts.join('.');
    }
  }
  val = val.replace(/[^\d.-]/g, '');
  val = val.replace(/^(-?)0+([1-9])/, '$1$2').replace(/^(-?)0+\./, '$10.');
  input.value = val;
}