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

目录

一、问题

二、解决方法

三、总结

---

一、问题

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>

三、总结

1. 修改显示不对倒是 比较简单啦

2.但是 某些输入法需要输入两次这个有点离谱呀，只能在笔记本上复现，不理解。闭着眼睛修改。

3.试了好多次没用，去看了ant-design官网有一个示例，让测试试了一下竟然没有问题！！！

4.于是照着官网 采用watch监听修复了问题。真是解铃还须系铃人！

5.以后使用第三方库有问题，记得去官网看看哈！

6.ant-design的 input格式化建议参考官网使用 watch监听更新，以免遇到各种离谱的问题

7.但是搞不明白为什么，如有大佬知道，欢迎赐教！

/*

希望对你有帮助！

如有错误，欢迎指正！

*/