vue+element-ui 实现价格的输入限制

实现的功能

勾选结算方式，输入价格，并对输入的价格进行验证和输入的限制。

具体的实现逻辑

<el-form size="mini" :model="prize" ref="prize">
      <el-checkbox-group v-model="checkedPay">
        <div
          v-for="(type, index) in payType"
          :key="type.label"
          class="pay-name"
        >
          <el-checkbox
            :label="type.label"
            @change="handleCheckedPayChange(index, type)"
          >
            {{ type.name }}
          </el-checkbox>
          <el-form-item
            label-width="100px"
            label="单价"
            v-if="modalShow[type.label]"
            style="display:inline-block;"
            :prop="type.label"
            :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]"
          >
            <el-input
              step="0.1"
              v-model="prize[type.label]"
              @change="materielExtraCostChange(type.label)"
              @keyup.native="
                prize[type.label] = prize[type.label].replace(
                  prize[type.label],
                  RestrictedMoney(prize[type.label])
                )
              "
            ></el-input>
          </el-form-item>
        </div>
      </el-checkbox-group>
    </el-form>
    <script>
    /**
 * 输入价格的限制
 */
	var plusOrMinus = (values)  =>  {
		  let newValue;
		  if (!/[^0-9.-]/g.test(values)) {
		    newValue = values
		      .replace(/[^\-\d.]/g, "")
		      .replace(/\b(0+){2,}/g, "0")
		      .replace(/-{2,}/g, "-")
		      .replace(/^\./g, "")
		      .replace(/\.{2,}/g, ".")
		      .replace(".", "$#$")
		      .replace(/\./g, "")
		      .replace("$#$", ".");
		    if (
		      newValue.toString().indexOf(".") > 0 &&
		      Number(newValue.toString().split(".")[1].length) > 2
		    ) {
		      newValue = parseInt(parseFloat(newValue) * 100) / 100;
		    }
		    if (newValue.toString().split("-").length - 1 > 1) {
		      newValue = parseFloat(newValue) || "";
		    }
		    if (
		      newValue.toString().split("-").length > 1 &&
		      newValue.toString().split("-")[0].length > 0
		    ) {
		      newValue = parseFloat(newValue) || "";
		    }
		    if (
		      newValue.toString().length > 1 &&
		      (newValue.toString().charAt(0) === "0" ||
		        (newValue.toString().length > 2 &&
		          newValue.toString().charAt(0) === "-" &&
		          newValue.toString().charAt(1) === "0" &&
		          newValue.toString().charAt(2) !== ".")) &&
		      newValue.toString().indexOf(".") < 1
		    ) {
		      newValue = parseFloat(newValue) || "";
		    }
		    // 判断整数位最多为9位
		    if (
		      newValue.toString().indexOf(".") > 0 &&
		      Number(newValue.toString().split(".")[0].length) > 9
		    ) {
		      newValue =
		        newValue.toString().substring(0, 9) +
		        "." +
		        newValue.toString().split(".")[1];
		    } else if (
		      newValue.toString().indexOf(".") < 0 &&
		      Number(newValue.toString().split(".")[0].length) > 9
		    ) {
		      newValue = newValue.toString().substring(0, 9);
		    }
		  } else {
		    newValue = values.replace(/[^0-9.-]/g, "");
		  }
		  return newValue;
		}
    	data() {
		    var checkPrize = (rule, value, callback) => {
		      if (!value) {
		        return callback(new Error("不能为空"));
		      }
		    };
		    var RestrictedMoney = values => {
		      return plusOrMinus(values.toString());
		    };
		    return {
		      RestrictedMoney: RestrictedMoney,
		      payType: [
		        {
		          label: "anzhuang",
		          name: "安装"
		        },
		        {
		          label: "jihuo",
		          name: "激活"
		        },
		        {
		          label: "zhuce",
		          name: "注册"
		        },
		        {
		          label: "cps",
		          name: "CPS"
		        }
		      ],
		      modalShow: {},
		      checkedPay: [],
		      prize: {
		        anzhuang: "",
		        jihuo: "",
		        zhuce: "",
		        cps: ""
		      },
		      rules: {
		        anzhuang: [{ validator: checkPrize, trigger: "blur" }],
		        jihuo: [{ validator: checkPrize, trigger: "blur" }],
		        zhuce: [{ validator: checkPrize, trigger: "blur" }],
		        cps: [{ validator: checkPrize, trigger: "blur" }]
		      }
		    };
		  },
		  created() {
		    for (let i in this.payType) {
		      this.$set(this.modalShow, this.payType[i].label, false);
		    }
		  },
		  methods: {
		  	handleCheckedPayChange(i, type) {
		      if (this.checkedPay.indexOf(type.label) !== -1) {
		        this.modalShow[type.label] = true;
		      } else {
		        this.modalShow[type.label] = false;
		        this.prize[type.label] = "";
		      }
		    },
		    setData() {
		      var _self = this;
		      return this.checkedPay.map(item => {
		        let current = _self.payType.find(cur => {
		          return cur.label === item;
		        });
		        return {
		          payment_method: current.name,
		          payment_amount: _self.prize[current.label] || 0
		        };
		      });
		    },
		    sendPostData() {
		    	this.$refs["prize"].validate(valid => {
          			if (valid) {
          				alert('提交);
          			}else {
          				console.log('出错);
          			}
		    },
		    materielExtraCostChange(label) {
		      //  防止删除为空
		      if (!this.prize[label]) {
		        this.prize[label] = "0.00";
		      }
		      // 一些错误金额输入的判断
		      if (
		        this.prize[label].toString().indexOf(".") > 0 &&
		        Number(this.prize[label].toString().split(".")[1].length) < 1
		      ) {
		        this.prize[label] = this.prize[label].toString().split(".")[0];
		      }
		      this.prize[label] = parseFloat(this.prize[label]).toFixed(2);
		    }

		  }
    </script>