一、背景
项目使用vue3+element plus进行搭建，需求场景要使用数字输入框，但element plus的数字输入框是可以输入小数点、e、+、-等字符的，如果想要实现上述字符不可输入，就需要通过js进行处理。
二、实现
1.键盘直接输入数字校验
使用keydown进行事件处理，当event.key为数字时，校验通过，其他字符则不通过。同时，还需要考虑输入数字常用的一些按键，比如：删除、左移、右移等。
处理代码如下：
<template> <el-input-number v-bind='$attrs' @keydown="handleNumber($event)" /></template><script lang="ts" setup>const handleNumber= (e: any) => { const key = e.key const allowList = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'Backspace', 'ArrowRight', 'ArrowLeft'] if (allowList.includes(key)) { return true } e.returnValue = false returnfalse}</script>2.键盘直接输入数字校验
按照上述操作，可以实现完美处理输入数字、字母、特殊字符等场景。但在中文输入法情况下，输入e然后回车，仍可以输入到数字输入框（在谷歌浏览器）；输入任意字母回车都可以输入到数字输入框（在火狐浏览器）。element plus组件库中，实现el-input-number处理中文模式输入字母情况，需要js进行处理。在el-input-number添加compositionstart和compositionend事件。
处理代码如下：
<template> <el-input-number v-bind='$attrs' @keydown="handlePoint($event)" @compositionstart="handleCompositionStart($event)" @compositionend="handleCompositionEnd($event)" /></template><script lang="ts" setup>// 处理英文模式输入字母、小数点等const handlePoint = (e: any) => { const key = e.key const allowList = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'Backspace', 'ArrowRight', 'ArrowLeft'] if (allowList.includes(key)) { return true } e.returnValue = false returnfalse}// 处理中文模式输入字母let value = ''const handleCompositionStart = (e: any) => { value = e.target.value}const handleCompositionEnd = (e: any) => { e.target.value = value}</script>三、总结
在开发过程中，使用外部组件可以大大提高开发效率，但有时组件的样式和逻辑可能跟业务需求不尽相同，就需要开发者手动实现想要的效果。本文讲述了如何在element plus组件库的el-input-number基础上，实现整数框的输入效果。如有问题，请大家指正。
