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

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;
    }
  }
}
阅读 2.9k
1 个回答
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;
}


撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏