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.0+ts的项目步骤

    如何搭建一个完整的Vue3.0+ts的项目步骤

    这篇文章主要介绍了如何搭建一个完整的Vue3.0+ts的项目步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • vue项目中main.js的用法

    vue项目中main.js的用法

    src/main.js是入口文件,主要作用是初始化vue实例并使用需要的插件, Vue.use()的作用就是让它里面被注册的组件能够被全局使用,本文通过实例代码介绍vue项目中main.js的用法,感兴趣的朋友一起看看吧
    2023-10-10
  • Vue自定义全局弹窗组件操作

    Vue自定义全局弹窗组件操作

    这篇文章主要介绍了Vue自定义全局弹窗组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue调用swiper插件步骤教程(最易理解且详细)

    vue调用swiper插件步骤教程(最易理解且详细)

    有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理,下面这篇文章主要给大家介绍了关于vue调用swiper插件的相关资料,需要的朋友可以参考下
    2023-04-04
  • vue 请求拦截器的配置方法详解

    vue 请求拦截器的配置方法详解

    这篇文章主要为大家介绍了vue 请求拦截器的配置方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-01-01
  • vue-router中scrollBehavior的巧妙用法

    vue-router中scrollBehavior的巧妙用法

    本文给大家介绍vue-router中scrollBehavior的妙用,文中给大家提到了两种解决方案,需要的朋友可以参考下
    2018-07-07
  • vue单页面如何通过prerender-spa-plugin插件进行SEO优化

    vue单页面如何通过prerender-spa-plugin插件进行SEO优化

    这篇文章主要介绍了vue单页面如何通过prerender-spa-plugin插件进行SEO优化,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • vue实现伸缩菜单功能

    vue实现伸缩菜单功能

    这篇文章主要为大家详细介绍了vue实现伸缩菜单功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • Vue3实现clipboard复制的使用示例

    Vue3实现clipboard复制的使用示例

    在日常开发中,为用户提供复制文本功能的需求比较常见,下面介绍一款vue3可用的插件,可以快速实现这个功能,感兴趣的可以了解一下
    2023-11-11
  • Vue组件通信之父传子与子传父详细讲解

    Vue组件通信之父传子与子传父详细讲解

    这篇文章主要介绍了React中父子组件通信详解,在父组件中,为子组件添加属性数据,即可实现父组件向子组件通信,文章通过围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-10-10

最新评论