vue自定义指令，限制输入小数点后四位且只能输入数字

 自定义指令函数

export default {
  numericOnly(el) {
    let composing = false
    el.addEventListener('compositionstart', () => {
      composing = true
    })

    el.addEventListener('compositionend', (e) => {
      composing = false
      handleInput(e)
    })

    function handleInput(e) {
      if (composing) return
      let { value } = e.target
      value = value.replace(/[^\d.]/g, '')
      const parts = value.split('.')
      if (parts.length > 2) {
        value = `${parts[0]}.${parts.slice(1).join('')}`
      } else if (parts.length === 2) {
        parts[1] = parts[1].slice(0, 4)
        value = parts.join('.')
      }
      if (value.startsWith('.')) {
        value = `0${value}`
      }
      if (value !== e.target.value) {
        e.target.value = value
        e.target.dispatchEvent(new Event('input'))
      }
    }
    el.addEventListener('input', handleInput)
  }
}

 在main中注册（支持批量注册）

import directives from '@/directives.js'

Object.keys(directives).forEach((key) => {
  Vue.directive(key, directives[key])
})

在页面中使用（v-numericOnly ）

<el-input 
     v-model.trim="form.estimateTaskLoss" 
     v-numericOnly 
     placeholder="请输入预计损失风险金额"
     maxlength="30"
     class="limit" 
/>