输入框限制输入n位小数

 

/**
 * instructions.js
 * 
 * 配合 el-input-number 限制输入框只能输入n位小数
 * <el-input-number v-model="num" :controls="false" v-input-number-limit="2"
 * @input.native="inputNumEvt"
  @change="handleNumberChange" :min="1" :max="10" :precision="2"></el-input-number>


  inputNumEvt(nVal) {
    // 如果有最大、最小数值限制，InputNumber计数器 实时计算需要配合 @change 使用
    // console.log('nVal==', nVal.target.value)
  }
  handleNumberChange(value) {
    console.log(value);
  }
*/
export const inputNumberLimt = {
  bind(el, binding = {}) {
    const { value } = binding
    if (value === null || value === undefined) {
      return
    }
    const target = el instanceof HTMLInputElement ? el : el.querySelector("input");
    target.addEventListener("input", e => {
      let val = e.target.value ? e.target.value.toString() : ''
      if (Number(val) != val && val !== '-') {
        val = val.slice(0,-1)
        val = val.replace(/[^\d^\.]+/g, '')
      } else {
        const decLen = typeof value === 'number' ? value : value.value
        // 小数点 - 长度限制
        if (typeof decLen !== 'undefined' && val) {
          const valArr = val.split('.')
          if (decLen === 0) {
            val = valArr[0]
          } else if (valArr[1] && valArr[1].length > decLen) {
            val = valArr[0] + '.' + valArr[1].substr(0, decLen)
          }
        }
      }
      const max_num = value.maxNumber ? typeConversion(value.maxNumber, 'number') : 1000000000000
      // const max_num = 1000000000000
      // 最大值限制
      if(val > max_num) {
        val = max_num
      }
      e.target.value = val; // 不能在此转Number类型，否则无法输入小数点
    })
  }
}

/**
 * main.js 注入自定义指令
 */
import * as instructions from '@/utils/instructions' // 小数点限制指令
Vue.directive('inputNumberLimit', instructions.inputNumberLimt)