当前位置：首页 > article >正文

ant-design4.xx实现数字输入框；某些输入法数字需要连续输入两次才显示

article 2025/8/15 12:12:08

一、问题

二、解决方法

三、总结

一、问题

1.代码里有一个基于ant封装的公共组件数字输入框，测试突然说无效了，输入其他字符也会显示；改了只有又发现某些输入法需要连续输入两次才能显示出来。

二、解决方法

1.就离谱，之前用的好好的，另外一个项目也在用。对比后发现唯一的区别在于一个项目使用的是 ant3.xxx,一个使用的ant4.xxx

2.有问题这个项目最近把 ant从 3.xxx升级到 4.xxx了

3. ant3.xxx 可以正常使用的版本

<template><!-- 数字输入框 --><AInput v-model:value="currentValue" v-bind="attrs" :allowClear="allowClear" @change="handleChange" />
</template><script lang="ts" setup>
import { useVModel } from '@vueuse/core'interface Props {value?: string | numberallowClear?: boolean
}
const props = defineProps<Props>()const emit = defineEmits(['update:value'])const currentValue = useVModel(props, 'value', emit)
const attrs = useAttrs()function handleChange(e: any) {const str = e.target.value ? String(e.target.value) : ''currentValue.value = str.replace(/\D+/g, '')
}
</script>

4.ant4.xxx 发现数字输入框显示上不能正常过滤其他字符的修复版本, 手动设置 e.target.value的值

修改： e.target.value = currentValue.value

<template><!-- 数字输入框 --><AInput v-model:value="currentValue" v-bind="attrs" @change="handleChange" />
</template><script lang="ts" setup>
import { useVModel } from '@vueuse/core'interface Props {value?: string | number
}
const props = defineProps<Props>()const emit = defineEmits(['update:value'])const currentValue = useVModel(props, 'value', emit)
const attrs = useAttrs()function handleChange(e: any) {const str = e.target.value ? String(e.target.value) : ''currentValue.value = str.replace(/\D+/g, '')e.target.value = currentValue.value
}
</script>

5.ant4.xxx 发现某些输入法需要输入两次才能显示一个数字，修改为watch监听

修改：change事件改为 watch监听

function formatValue(value: string | number) {const str = value ? String(value) : ''currentValue.value = str.replace(/\D+/g, '')
}
watch(currentValue, (val: any) => {formatValue(val)
})

<template><!-- 数字输入框 --><AInput v-model:value="currentValue" v-bind="attrs" @change="handleChange" />
</template><script lang="ts" setup>
import { useVModel } from '@vueuse/core'interface Props {value?: string | number
}
const props = defineProps<Props>()const emit = defineEmits(['update:value'])const currentValue = useVModel(props, 'value', emit)
const attrs = useAttrs()function handleChange(e: any) {// const str = e.target.value ? String(e.target.value) : ''// currentValue.value = str.replace(/\D+/g, '')// e.target.value = currentValue.value ?? ''
}function formatValue(value: string | number) {const str = value ? String(value) : ''currentValue.value = str.replace(/\D+/g, '')
}
watch(currentValue, (val: any) => {formatValue(val)
})
</script>