vue 限制el-input 只输入小数,动态设置小数位

复制代码
使用
 <el-input v-model="form.jkzzbX" type="text"v-input-float="{ limit: 3, min: 0,max:10000 }" />
 
/**
 * @example
 * v-input-float="{ limit: 1, min: 0, max: 100 }" 只允许输入一位小数 type="text" 生效
 * @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)
            }
          }
        })
      }
    }
  }
导入
import InputFloat from './utils/inputfloat'
 
Vue.directive('input-float', InputFloat)
 
 
复制代码

 

posted @   柒言·C  阅读(178)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
点击右上角即可分享
微信分享提示