element的el-input，想要输入表单的时候只输入范围数字

?

1 2 3 4 5 6 7 8 9 10 11 12

<el-form-item label="通过门限：" prop="passRate">                     <el-input                         placeholder="请输入"                         type="number"                         @input="oninput($event)"                         clearable                         v-model="addReviewForm.passRate"                         maxlength="30"                     >                         <template #append>%</template>                     </el-input>                 </el-form-item>

　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

const oninput = (val: any) => {     let value: any = "";     if (val) {         if (Number(val.replace(/[^\d]+/g, "")) > 100) {             value = 100;         } else if (Number(val.replace(/[^\d]+/g, "")) == 0) {             value = 1;         } else {             value = Number(val.replace(/[^\d]+/g, ""));         }         //value = Number(val.replace(/[^\d]+/g, "")) > 100 ? 100 : Number(val.replace(/[^\d]+/g, ""));     }       addReviewForm.value.passRate = value; };

 

下面这行css可以把原生input的type=number右边难看的上下按钮隐藏

<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    appearance: none !important;
}
</style>

 

eg：只能输入1-100的正整数　　

这样就可以解决问题了

隐含的坑点：网上之前查的解决方案，比如在这个输入框里面进行中文输入->负数，再输入其他的输入框，再回来进行中文输入->负数，提交时候这个表单字段的值会显示为' “空字符串，有问题