el-input只能number类型

首先,在element-ui中已经有了对el-input在number类型时的一些限制,但是对输入框内容的限制并不是很完善. 所以,就需要用到正则的方法来限输入框. 原理:根据获取键盘码判断输入框内容从而进行正则限制

<el-input
                            type="number"
                            @mousewheel.native.prevent
                            @keyup.native="prevent($event)"
                            onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8"
                            v-model="item.subjectTypesList[scope.$index].count"
                            @input="inputChange"
                          ></el-input>

/**
     * 限制输入框只能输入数字
     * 获取键盘码
     * 限制输入框输入负数小数点
     */
    prevent(e) {
      let keynum = window.event ? e.keyCode : e.which; //获取键盘码
      if (keynum == 189 || keynum == 190 || keynum == 109 || keynum == 110) {
        this.$message.warning("禁止输入小数以及负数");
        console.log(e.target.value);
        e.target.value = "";
      }
    },

number类型的时候会显示数字升降箭头,如果不需要可以通过css样式隐藏升降箭头

/**
输入框验证正整数后的箭头隐藏
*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
input[type="number"] {
  -moz-appearance: textfield;
}

这钟隐藏会保留键盘上下键控制val值的功能