目录
一、问题
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.但是搞不明白为什么，如有大佬知道，欢迎赐教！
/*
希望对你有帮助！
如有错误，欢迎指正！
*/