限制 el-input 输入格式（保留小数）

1. utils 创建文件 InputFloat.js

/**
 * @example
 * v-input-float="{ limit: 1, min: 0, max: 100 }" 只允许输入一位小数
 * @param limit 小数位数
 * @param min 最小值
 * @param max 最大值
 *
 */
export default {
  bind: (el, bind) => {
    const input =
      el.nodeName.toLowerCase() === 'input'
        ? el
        : el.getElementsByTagName('input')[0]
    // 改变值过后，需要主动触发input时间，组件绑定的值才会改变
    let triggerBySelf = false
    if (input) {
      input.addEventListener('input', () => {
        if (triggerBySelf) {
          triggerBySelf = false
          return
        }
        // 将千分为值转换成正常的数值，如果input type为number 不需要千分位，可把第一个repalce正则删除
        let val = input.value.replace(/,/gi, '').replace(/[^0-9.]/gi, '')
        // 验证数字
        if (val === '') {
          input.value = ''
          return
        }
        const valArr = val.split('.')

        if (bind.expression) {
          try {
            const option = bind.value
            if (typeof option === 'object') {
              const { limit, min, max } = option
              if (limit !== undefined) {
                if (valArr.length > 1) {
                  let pointLength = valArr[1].length
                  pointLength = limit > pointLength ? pointLength : limit
                  if (limit > 0) {
                    val =
                      +valArr[0] +
                      (valArr.length > 1
                        ? `.${valArr[1].substr(0, pointLength)}`
                        : '')
                  } else {
                    val = +valArr[0] + ''
                  }
                } else {
                  val = +val + ''
                }
              }
              if (typeof min === 'number' && +val < +min) {
                val = min + ''
              }
              // // 数值大于最大值，不可再输入
              // if (typeof max === "number" && +val > +max) {
              //   //以下控制显示的最大数为当前输入的可取最大值
              //   let nVal = val.split(".")[0];
              //   const pointVal = val.split(".")[1] ? val.split(".")[1] : "";
              //   const maxStringLength = String(max).split(".")[0].length;
              //   nVal = nVal.slice(0, maxStringLength);
              //   val = nVal + "." + pointVal;
              //   //以下是当值大于最大值 直接赋值为最大值
              //   // val = max + "";
              // }

              if (typeof min === 'number' && +val < +min) {
                val = min + ''
              }
              if (typeof max === 'number' && +val > +max) {
                val = max + ''
              }
              //数值转换为千分为，如果不需要千分位展示 可以直接删除
              //val = String(val).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
              // 改变值过后，需要主动触发input时间，组件绑定的值才会改变
              const ev = new Event('input', { bubbles: true })
              input.value = val
              triggerBySelf = true
              input.dispatchEvent(ev)
            }
          } catch (err) {
            input.value = val
            console.error(err)
          }
        }
      })
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

2. main.js 引入自定义指令

import InputFloat from '../src/utils/InputFloat'
Vue.directive('input-float', InputFloat)
1
2

3. 使用

   <el-input
                v-model="form.price"
                placeholder="请输入"
                v-input-float="{ limit: 1, min: 0, max: 999999 }"
    ></el-input>
1
2
3
4
5