【VUE禁止输入框输入小数点】

有一些需求，需要用户输入数字时，只能输入正整数，禁止输入出现小数情况

<el-input
            v-model="indexInfo.score"
            class="input-info"
            type="number"
            style="width: 54%;margin-left:42px;"
            :disabled="indexFlag"
            placeholder="请输入"
            min="0"
            max="9999"
            @input="value => indexInfo.score = getRightVal(indexInfo.score)"
            @blur="validateSingle(indexInfo.score,'score');value => indexInfo.score = getRightVal(indexInfo.score)"
          />

@input在输入框内容发生变化后触发，调用getRightVal()函数，实现对输入框的字符判断

getRightVal(val) {
      // 不合法类型、0、负数返回0
      if(val === "" || val <= 0) {
        return 0;
      }
      // 超过9999返回9999
      if(val > 9999) {
        return 9999;
      }
      // 取正整数
      val = parseInt(val);
      // 转换异常返回0
      if(isNaN(val)) {
        return 0;
      }
      // 返回正整数
      return val;
    },

通过函数判断，可以方便后续更改和维护

第二种方案

 <el-input
            v-model="indexInfo.score"
            class="input-info"
            type="integer"
            style="width: 54%;margin-left:42px;"
            :disabled="indexFlag"
            placeholder="请输入"
            @oninput="this.value = this.value.replace(/\D|\./g, '');if(value>9999)value=9999;if(value<0)value=0"
            @input="validateSingle(indexInfo.score,'score')"
          />

通过正则表达式——”this.value = this.value.replace(/\D|\./g, '');“ 来限制小数点的输入。

在type="number"的情况下实践之后，又出现了一个小问题，这样子确实会禁止小数点的输入，但是输入框的光标位置会随着左右移动。

所以将type="number"改为type="integer"。