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

news2025/6/8 18:02:49

一、问题

二、解决方法

三、总结

一、问题

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 | number
  allowClear?: 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>