vue快速限制input框可输入的数字类型（整数，正整数，小数限制小数点后几位）

vue快速限制input框可输入的数字类型（自然数，正整数，小数限制小数点后几位）

• 项目中有许多地方需要限制输入框中的数字，比如只允许输入正整数啦，只允许输入自然数（正整数包括0），小限制小数点位数的需求，这些我们大可以封装一个公共的mixins混合方法放在公共部分，然后给input输入框绑定一个@input事件来调用mixins方法就可以啦。
• 先上代码，开锤开锤，直接莽

方法封装

先在src目录下创建一个mixins文件夹用来放我们的公共方法，然后新建一个checknum.js文件,以下是验证三种数字的方法的代码

export default {
  methods: {
    /**
     * 整数
     * @description 情况一：深度改变对象中的数字
     * @author LeeYunxiang
     * @param {Object} object 数字的父对象
     * @param {String} target 要监听的字段
     * @param {Number} value 数字
     * @description 情况二：改变的仅是data中的数字
     * @param {String} target 要监听的字段
     * @param {Number} value 数字
     * */
    checkInt(...arg) {
      const reg = /[^0-9$]/g;
      if (arg.length === 3) {
        let object = arg[0],
          target = arg[1],
          value = arg[2];
        let number = value.replace(reg, "");
        this.$set(object, target, number);
      } else {
        let target = arg[0],
          value = arg[1];
        let number = value.replace(reg, "");
        this.$data[target] = number;
      }
    },
    /**
     * 正整数
     * @description 情况一：深度改变对象中的数字
     * @author LeeYunxiang
     * @param {Object} object 数字的父对象
     * @param {String} target 要监听的字段
     * @param {Number} value 数字
     * @description 情况二：改变的仅是data中的数字
     * @param {String} target 要监听的字段
     * @param {Number} value 数字
     * */
    checkPositive(...arg) {
      if (arg.length === 3) {
        let object = arg[0],
          target = arg[1],
          value = arg[2];
        const flag = new RegExp("^[1-9][0-9]{0,}$").test(value);
        flag || this.$set(object, target, "");
      } else {
        let target = arg[0],
          value = arg[1];
        const flag = new RegExp("^[1-9][0-9]{0,}$").test(value);
        if (!flag) {
          this.$data[target] = "";
        }
      }
    },
    /**
     * 限制数字输入小数点后几位
     * @description 情况一：深度改变对象中的数字
     * @author ChenYaohong
     * @param {Number} limit 允许输入小数点后几位 例：1代表允许输入小数点后1位
     * @param {Number} nums input框输入的值
     * @param {Number} object 数字的父对象
     * @param {String} target 要监听的字段
     * @description 情况二：改变的仅是data中的数字
     * @param {Number} limit 允许输入小数点后几位 例：1代表允许输入小数点后1位
     * @param {Number} nums input框输入的值
     * @param {String} target 要监听的字段
     * */
    checkFloat(...arg) {
      const onlyDecimal = (num, limit) => {
        let number = null;
        if (num.indexOf(".") != -1) {
          var str_ = num.substr(num.indexOf(".") + 1);
          if (str_.indexOf(".") != -1) {
            number = num.substr(0, num.indexOf(".") + str_.indexOf(".") + 1);
          }
        }
        let array = num.split(".");
        if (!!array[1] && array[1].length > limit) {
          array[1] = array[1].substr(0, limit);
          number = array[0] + "." + array[1];
        }
        return number;
      };

      let limit = arg[0];
      let nums = arg[1];
      if (nums) {
        nums = nums.replace(/[^0-9.]/g, "");
        if (onlyDecimal(nums, limit) != null) {
          nums = onlyDecimal(nums, limit);
        }
      }
      if (arg.length === 4) {
        let object = arg[2];
        let target = arg[3];
        this.$set(object, target, nums);
      } else {
        let target = arg[2];
        this.$data[target] = nums;
      }
    },
    /**
     * @description 计算小数点后面有几位数
     * @author LeeYunxiang
     * @param {Number} n 要验证的数字
     *
     */
    countFloat(n) {
      try {
        return n.toString().split(".")[1].length;
      } catch (err) {
        return 0;
      }
    }
  }
};

解释一下

我这里在写公共方法的时候为什么可能接收不同位的参数呢？
那是因为我们v-model的值有可能就在data中，一般也有可能在data的对象中，简而言之就是有可能会存在一个父对象，这样就需要兼容一下

举个栗子

<template>
	
	<el-input v-model="form.numbers" @input="checkInt(form,'numbers',form.numbers)">el-input>
	<el-input v-model="numbers" @input="checkInt('numbers',number)">el-input>
	
	<el-input v-model="form.positive" @input="checkPositive(form,'positive',form.positive)">el-input>
	<el-input v-model="positive" @input="checkPositive('positive',positive)">el-input>
	
	<el-input v-model="form.float_num" @input="checkFloat(2,form.float_num,form,'float_num')">el-input>
	<el-input v-model="float_num" @input="checkFloat(2,float_num,'float_num')">el-input>
<template/>

<script>
import checkNum from "@/mixins/checknum";
export default {
	// 在这里添加引入的mixins
	mixins: [checkNum],
	data(){
		return {
			form: {
				numbers: "",
				positive: "",
				float_num: ""
			},
			numbers: "",
			positive: "",
			float_num: ""
		}
	}
}
script>

上面给了三组例子，每组两种情况，用的时候记得input要为text类型，最好绑定input事件，change事件一些骚操作可能会有bug.