Elementui如何限制el-input框输入小数点

 更新时间:2022年08月02日 16:02:46   作者:前端开发工程师在杭州  
这篇文章主要介绍了Elementui如何限制el-input框输入小数点,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

限制el-input框输入小数点

<el-input v-model="value" @keyup.native="value = oninput(value,2)"></el-input>
/**
* oninput 限制输入框小数点位数,多出的过滤掉
* @param  Number     {num}
* @param  Number     {limit}
 */
oninput(num, limit) {
  var str = num
  var len1 = str.substr(0, 1)
  var len2 = str.substr(1, 1)
  //如果第一位是0,第二位不是点,就用数字把点替换掉
  if (str.length > 1 && len1 == 0 && len2 != ".") {
    str = str.substr(1, 1)
  }
  //第一位不能是.
  if (len1 == ".") {
    str = ""
  }
  //限制只能输入一个小数点
  if (str.indexOf(".") != -1) {
    var str_ = str.substr(str.indexOf(".") + 1)
    if (str_.indexOf(".") != -1) {
      str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1)
    }
  }
  //正则替换
  str = str.replace(/[^\d^\.]+/g, '') // 保留数字和小数点
  if (limit / 1 === 1) {
    str = str.replace(/^\D*([0-9]\d*\.?\d{0,1})?.*$/,'$1') // 小数点后只能输 1 位
  } else {
    str = str.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1') // 小数点后只能输 2 位
  }
  return str
}

el-input 仅限保留两位小数问题

废话不多说:

 <el-form-item
     label="概率值(100%)"
     rules="[{ required: true, message: '请填写概率值,仅限两位小数'},{pattern:/^\d{1,2}(\.\d{1,2})?$/, message: '概率权重精确到两位小数点,勿超过100'}]"
                    prop="weight">
    <el-input type="number" step="0.01" v-model.number="lotteryBonusCfg.weight" autocomplete="off"></el-input>
</el-form-item>

关键是:正则:/^\d{1,2}(.\d{1,2})?$/

但是这个功能有个bug,就是无法输入0.01,input会直接失去焦点,数字变成0.

解决办法

v-model.number ==》 v-model=“lotteryBonusCfg.weight”

即可输入0.01,或者1.01

以上仅为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue3源码分析组件挂载初始化props与slots

    Vue3源码分析组件挂载初始化props与slots

    这篇文章主要为大家介绍了Vue3源码分析组件挂载初始化props与slots实例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)

    vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)

    这篇文章主要介绍了vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • 区分vue-router的hash和history模式

    区分vue-router的hash和history模式

    这篇文章主要介绍了区分vue-router的hash和history模式,帮助大家更好的理解和学习vue路由,感兴趣的朋友可以了解下
    2020-10-10
  • Vue 解决在element中使用$notify在提示信息中换行问题

    Vue 解决在element中使用$notify在提示信息中换行问题

    这篇文章主要介绍了Vue 解决在element中使用$notify在提示信息中换行问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue线上部署请求接口报错net::ERR_CONNECTION_REFUSED

    vue线上部署请求接口报错net::ERR_CONNECTION_REFUSED

    vue线上部署请求接口报错net::ERR_CONNECTION_REFUSED问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • 图解Vue 响应式流程及原理

    图解Vue 响应式流程及原理

    这篇文章主要为大家介绍了图解Vue的响应式原理,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 优雅地使用loading(推荐)

    优雅地使用loading(推荐)

    这篇文章主要介绍了在Vue和React中如何优雅地使用loading,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 浅谈Vue SPA 首屏加载优化实践

    浅谈Vue SPA 首屏加载优化实践

    本篇文章主要介绍了浅谈Vue SPA 首屏加载优化实践,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • vue-cli基础配置及webpack配置修改的完整步骤

    vue-cli基础配置及webpack配置修改的完整步骤

    这篇文章主要给大家介绍了关于vue-cli基础配置及webpack配置修改的完整步骤,文中通过示例代码介绍的非常详细,对大家的学习或者使用vue-cli具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-10-10
  • vue项目适配屏幕分辨率与屏幕的缩放适配详细教程

    vue项目适配屏幕分辨率与屏幕的缩放适配详细教程

    现在很多14寸的笔记本,出厂默认就是150%的显示。导致很多时候我们的项目,自己开发的时候都是按照100%比例来开发的,上线了就会发现这个问题,今天就这个问题给出解决方案,感兴趣的朋友跟随小编一起看看吧
    2022-11-11

最新评论