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

Timi_666

已于 2023-10-17 15:08:17 修改

阅读量1.9k

点赞数 11

文章标签： vue.js 前端 javascript

于 2023-05-25 17:11:21 首次发布

本文链接：https://blog.csdn.net/Timi_666/article/details/130871141

版权

文章讲述了在Vue项目中遇到el-input-number组件可以输入非法组合如10+或-10+，导致value变为null的bug。解决方案是通过监听keydown事件，阻止输入e,+,-字符。进一步将这个功能封装成自定义指令TimiKeydown，并在main.ts中全局注册，确保输入的合法性。对于更复杂的情况，如中文状态下的e输入和特定格式的数字要求，可以使用正则表达式进行校验。

摘要由CSDN通过智能技术生成

在项目开发中发现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