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

目录

一、问题

二、解决方法

三、总结


一、问题

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

二、解决方法

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

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

  1. ant3.xxx 可以正常使用 的版本
html 复制代码
<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

html 复制代码
<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监听

javascript 复制代码
function formatValue(value: string | number) {
  const str = value ? String(value) : ''
  currentValue.value = str.replace(/\D+/g, '')
}
watch(currentValue, (val: any) => {
  formatValue(val)
})
html 复制代码
<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.但是搞不明白为什么,如有大佬知道,欢迎赐教!

/*

希望对你有帮助!

如有错误,欢迎指正!

*/

相关推荐
灵感__idea2 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴3 小时前
Mix
前端·webgl
代码续发3 小时前
前端组件梳理
前端
试图让你心动4 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码4 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记4 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏4 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数5 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante5 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam5 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript