element的el-input,想要输入表单的时候只输入范围数字
<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>
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的正整数
这样就可以解决问题了
隐含的坑点:网上之前查的解决方案,比如在这个输入框里面进行中文输入->负数,再输入其他的输入框,再回来进行中文输入->负数,提交时候这个表单字段的值会显示为' “空字符串,有问题