プロジェクト開発中に、el-input-number に 10+ または -10+ という奇妙な組み合わせを入力すると、送信時に値が null になる可能性があることがわかりました。
解決策はキーダウンを使用することです。
<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"
/>