美文网首页
Vue 实现input输入框只能输入数字以及小数点后两位

Vue 实现input输入框只能输入数字以及小数点后两位

作者: 橙_知足常乐 | 来源:发表于2021-02-06 14:38 被阅读0次

1.调用 checkInput ,实现: @keyup.native="product.price = checkInputs(product.price)"

<el-input v-model="product.price" class="bg-grey" size="small"    placeholder="实际销售价格" style="width: 210px;" @keyup.native="product.price = checkInputs(product.price)">

            <span slot="prefix">¥</span>

  </el-input>

2.实现方法:checkInput

//检测控制只能输入小数点后2位方法

export function checkInput(num) {

  let str = num.toString();

  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);

    }

    if (str_.length > 2) {

      this.$message.warning(`金额小数点后只能输入两位,请正确输入!`);

      return (str = "");

    }

  }

  //正则替换

  str = str.replace(/[^\d^\.]+/g, ""); // 保留数字和小数点

  return str;

}

相关文章

网友评论

      本文标题:Vue 实现input输入框只能输入数字以及小数点后两位

      本文链接:https://www.haomeiwen.com/subject/rsfbtltx.html