elementUI组件 input 限制金额

原创已于 2022-08-18 10:25:05 修改 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui

于 2022-08-16 15:30:49 首次发布

js 同时被 3 个专栏收录

2 篇文章

订阅专栏

vue

1 篇文章

订阅专栏

elementui

1 篇文章

订阅专栏

这篇博客主要介绍了在前端开发中如何使用`<el-input>`组件结合`v-model`和`@keyup.native`事件来实现价格输入的格式化处理。作者通过JavaScript编写了一个名为`oninput`的函数，该函数包括了去除多余的0、限制小数点位置、限制小数位数等关键逻辑，确保输入的价格符合规范。

<el-input v-model.trim="price" @keyup.native="price = oninput(price)"></el-input>

oninput(num) {
  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, '') // 保留数字和小数点
  str = str.replace(/\.\d\d\d$/, '') // 小数点后只能输两位
  return str
}