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

作者站长头像
站长
· 阅读数 7

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;
    }
  }
}
回复
1个回答
avatar
test
2024-06-28
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;
}


回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容