Element UI: u-input控制只能输入整数

在平常的工作中，写表单是不可或缺的一项，关于一些值，我们只想填入整数，比如年龄，但是当我们设置type为number的时候，发现可以输入小数，这就有问题了，那么本篇就是用来记录如何设置输入整数，话不多说，直接上代码，提供了三种方法，应该够用吧?

<template>
  <div class="home">
    <el-form :model="ruleForm" :rules="rules">
      <!-- 1. 使用v-model.number 此写法在输入小数的时候会直接无效，但是可以输入字母，所以需要搭配rules验证规则使用 -->
      <el-form-item label="整数" prop="num">
        <el-input v-model.number="ruleForm.num"></el-input>
      </el-form-item>

      <!-- 2. 设置type为number，使用oninput事件，利用replace正则代替的方式达到目的 ，不能使用@input，会不起效 -->
      <el-form-item label="整数" prop="num1">
        <el-input
          type="number"
          v-model="ruleForm.num1"
          oninput="value = value.replace(/[^\d]/g, '')"
        ></el-input>
      </el-form-item>

      <!-- 3. 设置type为number，利用@input事件，在函数内进行正则匹配，重新赋值等等 -->
      <el-form-item label="整数" prop="num2">
        <el-input
          type="number"
          v-model="ruleForm.num2"
          @input="input"
        ></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      ruleForm: {
        num: null,
        num1: null,
        num2: null,
      },
      rules: {
        num: [{ type: "number", trigger: ["blur", "change"] }],
      },
    };
  },
  methods: {
    input(e) {
      let rule = /^[1-9][0-9]*$/;
      if (rule.test(e)) {
        this.ruleForm.num2 = e;
      } else {
        this.ruleForm.num2 = e.replace(".", "");
      }
    },
  },
};
</script>