最近封装了个输入框只输入数字的公共指令,允许修改保留几位小数,默认无参数时只保留整数,例:v-number-only=“2“ 则为保留两位小数



export default {
  bind(el, binding) {
    const input = el.tagName === "INPUT" ? el : el.querySelector("input")
    if (!input) {
      return
    }
 
    let composing = false
    const decimals =
      Number.isInteger(Number(binding.value)) && Number(binding.value) >= 0
        ? Number(binding.value)
        : 0
 
    const normalize = (raw) => {
      if (!raw) {
        return ""
      }
      let s = String(raw).replace(/[^d.]/g, "")
      const idx = s.indexOf(".")
      if (idx !== -1) {
        if (decimals === 0) {
          s = s.slice(0, idx)
        } else {
          s = s.slice(0, idx + 1) + s.slice(idx + 1).replace(/./g, "")
          if (decimals > 0) {
            s = s.slice(0, idx + 1 + decimals)
          }
        }
      }
      if (s.startsWith(".")) {
        s = "0" + s
      }
      if (/^0d+/.test(s) && !s.startsWith("0.")) {
        s = String(Number(s))
      }
      return s
    }
 
    const setValueIfChanged = (val) => {
      if (val !== input.value) {
        input.value = val
        input.dispatchEvent(new Event("input", { bubbles: true }))
      }
    }
 
    const onInput = () => {
      if (!composing) {
        setValueIfChanged(normalize(input.value))
      }
    }
    const onCompositionStart = () => (composing = true)
    const onCompositionEnd = () => {
      composing = false
      setValueIfChanged(normalize(input.value))
    }
    const onPaste = () => setTimeout(() => setValueIfChanged(normalize(input.value)), 0)
    const onBlur = () => {
      if (decimals >= 0) {
        const raw = input.value
        if (raw && raw !== "." && !isNaN(Number(raw))) {
          const fixed = Number(raw).toFixed(decimals)
          if (fixed !== input.value) {
            input.value = fixed
            input.dispatchEvent(new Event("input", { bubbles: true }))
          }
        }
      }
    }
 
    input.addEventListener("input", onInput)
    input.addEventListener("compositionstart", onCompositionStart)
    input.addEventListener("compositionend", onCompositionEnd)
    input.addEventListener("paste", onPaste)
    input.addEventListener("blur", onBlur)
 
    el._v_number_only = {
      input,
      onInput,
      onCompositionStart,
      onCompositionEnd,
      onPaste,
      onBlur
    }
  },
  unbind(el) {
    const o = el._v_number_only
    if (o && o.input) {
      o.input.removeEventListener("input", o.onInput)
      o.input.removeEventListener("compositionstart", o.onCompositionStart)
      o.input.removeEventListener("compositionend", o.onCompositionEnd)
      o.input.removeEventListener("paste", o.onPaste)
      o.input.removeEventListener("blur", o.onBlur)
      delete el._v_number_only
    }
  }
}

© 版权声明
THE END
如果内容对您有所帮助,就支持一下吧!
点赞0 分享
Huoyyyyy-的头像 - 鹿快
评论 抢沙发

请登录后发表评论

    暂无评论内容