vue3+ts+elePlus resuelve el problema de que el-input-number puede ingresar + o -

Durante el desarrollo del proyecto, descubrí que el-input-number puede ingresar una combinación extraña de 10+ o -10+, lo que hace que el valor se vuelva nulo cuando se envía.

 

La solución es usar keydown.

<template>
  <el-input-number v-model="num" :min="1" :max="10" 
@change="handleChange" 	@keydown="onKeydown" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const num = ref(1)
const handleChange = (value: number) => {
  console.log(value)
}
const onKeydown = (e)=>{
			 	 // 输入框中禁止输入e、+、-
            	let key = e.key;
            	if (key === 'e' || key === 'E' || key === '+' || key === '-') {
                	e.returnValue = false;
            	} else {
                	e.returnValue = true;
            	}
			}

</script>

 El uso avanzado se convierte en instrucciones personalizadas

Primero cree un archivo TiMiInputNumber.ts en la carpeta utils

import { Directive } from 'vue';

export const TimiKeydown: Directive = {
    mounted(el, binding) {
        function handleKeydown(e: KeyboardEvent) {
            // 输入框中禁止输入e、+、-
            let key = e.key;
            if (key === 'e' || key === 'E' || key === '+' || key === '-') {
                e.preventDefault();
            }
        }
        el.addEventListener('keydown', handleKeydown);
    },
    // unmounted(el) {
    //     el.removeEventListener('keydown', handleKeydown);
    // }
};

Registrar referencias globalmente en main.ts

import { createApp } from 'vue';
import App from './App.vue';

import { TimiKeydown } from './utils/TiMiInputNumber.ts';

const app = createApp(App);

app.directive('timi-keydown', TimiKeydown);

app.mount('#app');

El uso del escenario agrega v-timi-keydown

            <el-input-number
                        v-model="form.n_Sort"
                        class="mx-4"
                        :min="1"
                        v-timi-keydown
                        controls-position="right"
                      
                    />