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

GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐