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

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;

}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容