vue动态限制输入框小数点后的位数

杂记丶

已于 2023-12-28 15:51:14 修改

阅读量451

点赞数 3

文章标签： vue.js elementui javascript

于 2023-11-13 14:37:10 首次发布

本文链接：https://blog.csdn.net/m0_73202019/article/details/134376894

版权

1.通过@input事件强制限制

 <template>
	 <el-input v-model="financeScale"  @input="financeScale=formatDecimal(financeScale,2)" placeholder="请输入">
	 </el-input>
 <template/>

  methods: {
    formatDecimal(str, num) {
      //str当前输入值，num是想要保留的小数位数
      str = String(str);
      if (!str.trim()) {
        return str;
      }
      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 (num || num === 0) {
        var rest = str.split(".")[1];
        if (rest && rest.length > num) {
          rest = rest.substr(0, num);
          str = str.split(".")[0] + "." + rest;
        }
      }
      return str;
    }
}

2.通过@blur事件输入后限制进行四舍五入

 <template>
	 <el-input v-model="financeScale"  @blur="formatDecimal('参数')" placeholder="请输入">
	 </el-input>
 <template/>

    formatDecimal(参数) {
    // 从form中查找是否是此参数
      if (this.form[参数]) {
        // 正则限制
        const regex = /^[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?$/;
        if (regex.test(this.form[type])) {
          const obj = {
            参数1: 小数位,
            参数2: 小数位,
          };

          this.form[参数] = new this.$BigNumber(this.form[参数]).toFixed(
            obj[参数]
          );
        } else {
          this.form[参数] = "";
          this.$message.error("请输入数字！");
        }
      }
    }