vue3+ts+elePlus 解决el-input-number可以输入+或者-的解决方法

在项目开发中发现el-input-number可以输入10+或者-10+这样的奇怪组合导致提交时value变成了null

 

解决办法使用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>

 进阶用法变成自定义指令

在utils的文件夹中先建一个TiMiInputNumber.ts文件

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);
    // }
};

在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');

场景使用 加入v-timi-keydown

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

后记：根据大家的反应情况，中文状态下的e仍然可以输入提供正则方法（数据可以为正负数且可以带小数点后四位）

              <el-input placeholder="数字" v-model="input1"  style="width:130px" class="tree-map-inputnum"  
oninput="value=value.replace(/^([0-9-]\d*\.?\d{0,4})?.*$/,'$1')">
                <template slot="append">%</template>
              </el-input>//默认值input1为0