Element组件el-input-number的@input事件延迟问题

最新推荐文章于 2024-05-31 08:18:00 发布
最新推荐文章于 2024-05-31 08:18:00 发布
阅读量728 收藏
点赞数
文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YZero_cn/article/details/135064756
版权

问题复现

vue中使用el-input-number组件时，使用@input事件获取输入值的变动，并以此来作为表格组件的数据筛选条件

比如此时输入框的值为12，在后面输入0，变为120，但是通过@input调用的函数中，获取组件绑定的值，显示为12，再将120修改为12，结果打印输出120，总是比输入慢一步

解决方式

在@input函数中延迟20ms即可获取到实际输入值

问题分析

el-input组件没有这个问题,而el-input-number存在，说明应该是与输入内容变动之后的组件内部校验有关，数字输入框在输入其他字符时会直接丢弃掉。推测应该是触发@input在前，组件内校验在后，校验未完成导致绑定值没有更新，所以在@input函数中加一个延迟等待完成校验之后再读取绑定值即可获取到最新的输入内容

Y.Zero
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
计数器的点击事件
Rowse的博客
03-16 739
今天我们来学习以秒计数的计数器，点击开始计数按钮后input标签会开始计数，然后点击停止计数则会停止计数。 代码 1.HTML：设置一个input标签使显示的数字在input标签里面显示，两个button按钮用于开始与停止计数。 <body> <input type="text" value="0" id="number"> <button id="start">开始计数</button> <button id="sto...
element input-number 默认值设置为空
02-26
element input-number 当值传入的为''时，默认显示为0，有些情况我们不希望显示0，而是显示为空，针对这种情况我们对element input-number的源码做了兼容处理
vue中el-input绑定键盘按键(按键修饰符)
11-20
vue怎么写键盘事件 vue允许将按键值作为修饰符来使用，如监听回车事件，有两种写法，如下代码： <input type="text" @keyup.13="console.log($event)"></input> <input type="text" @keyup.enter="console.log($event)"></input> 但要注意的是：当我们在在el-input采用如上两种写法时，他是不生效的。el-input监听不到键盘事件,原因是element-ui是封装组件，所以el标签属于自定义标签，因此触发不了键盘事件。 解决办法：加上.native原生事件修饰符即可。
el-input-number无法实时监听输入事件？我的解决办法
Dawnchen1的博客
03-22 6315
el-input-number无法实时监听输入事件？我的解决办法 一般来说el-input-number的@change方法只会在blur的时候触发，那如何实时监听输入数字的变化呢? 步骤一：将@change替换成@input.native <el-input-number :ref="'ref' + $index" v-model="row.energy" @input.native="handleInput(row, $index)" :precision="3"
【区分vue2和vue3下的element UI InputNumber 计数器组件，分别详细介绍属性，事件，方法如何使用，并举例】
最新发布
xiejunlan的博客
05-31 1140
在 Vue 2 中，Element UI 提供了组件作为计数器组件，用于处理数字输入。而在 Vue 3 中，Element Plus 同样提供了类似的组件，但可能有一些属性、事件或方法的细微差异。下面我将分别介绍 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中组件的属性、事件和方法，并给出示例。
el-input-number不能input事件
m0_48334955的博客
02-26 609
虽然输入框尾部的上下箭头去掉了，但是，当我们鼠标焦点在输入框中时，上下滚动鼠标滚轮，这时输入框中的数字会发生变化，容易导致误操作，这时只需要将el-input元素改成如下即可。用的el-input-number，发现不能实现input，因为拿到的值要做操作，所以最后选择了el-input结合正则来做。要求input只能输入正整数。去除input后面箭头。
vue3的elementPlus中使用el-input控制用户输入正确金额，el-input-number遇到的一系列问题
CHENC0518的博客
02-23 2118
但是，el-input-number会存在一个致命的问题，尤其是对于金额方面，el-input-number会对输入的值进行四舍五入，也就是如果用户复制了一个数为。el-input-number的值就是不变，但是数组的值已经变化了，差点让我原地去世，此时，原本一个很小的需求已经花费了一个小时还没解决，我大汗淋漓。首先，我原先使用的组件是el-input-number，这个确实是一个非常好的组件，但是在某些方面，他却隐含着巨大的隐患。（但有方法确实是可以改的，但也太过麻烦）到输入框，里面的值就会自动变为。
【javascript】vue和elementui中的键盘事件，el-input-number输入框限制输入数据规则，只能输入正整数，禁止输入除正整数以外的其他字符
DecorateCC的博客
06-06 8026
keyup.native=“UpNumber” @keydown.native="UpNumber"这是一个Vue.js中的事件绑定语法，用于监听键盘按键事件。其中@keyup.native表示监听键盘松开事件，@keydown.native表示监听键盘按下事件，UpNumber是自定义的事件处理函数。首先要监听keyup（键盘按下）事件，因为elementUi上面的input组件监听事件是没有这个事件的，所以可能会报错，所以我们需要加个vue事件的修饰符 .native，代表原生事件的意思。
关于el-input-number计数器change事件校验数据，改变绑定数据值后change方法失效问题的原因及解决方法
direction_0528的博客
03-28 2915
查阅资料后发现问题原因在 change事件发生后触发了dom更新，而数据更改变化是在dom更新之后，这就导致了dom当中挂载的数据值还是更新之前的值，并且此后无刷新控制dom重新渲染的指令，使得chhange方法失效。解决方法：用$nextTick函数对绑定值进行更改（ this.$nextTick(() => { this.绑定值= 更改值 }) ），即在dom初次完成渲染挂载后，修改其值再次触发dom渲染挂载。
el-input-number与el-input限制输入小数点后两位
m0_64707449的博客
01-10 6031
还有一种就是给el-input-number加属性:precision='2' 代表精确到小数点后两位。:step='0.1' 代表每次增加0.1。但是这对属性的缺点是，自动补零。针对于个别需求来说不适用。// 通过正则过滤小数点后两位。
el-input-number 失去焦点blur事件，
qq_52125118的博客
04-11 2817
最近遇到了个奇怪的需求，需要代码手动给数字输入框手动触发失焦事件；后来再阅读了 el-input-number的 template部分的源码后；
Element InputNumber计数器的使用方法
10-15
计数器的使用方法的文章就介绍到这里了，Element UI 的 InputNumber 组件是一个非常实用的元素，用于创建可增减数值的输入框。这个组件在前端开发中常用于处理需要精确控制数字输入的场景，例如商品数量选择、评分等...
element el-input directive数字进行控制
12-29
使用自定义指令格式化el-input 背景 使用element开发的过程中遇到循环的数据只能输入数字，并且有不要小数点，有需要小数点的 ...el-input v-if=form.valuation_type==1 v-numberInt:0=item.first_fe
Element Input输入框的使用方法
10-15
class="input-with-select"> <el-select v-model="select" slot="prepend" placeholder="请选择"> <el-option label="餐厅名" value="1"></el-option> <el-option label="订单号" value="2"></el-option> ...
vue element-ui实现input输入框金额数字添加千分位
10-15
主要介绍了vue element-ui实现input输入框金额数字添加千分位,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
关于使用el-input-number设置不让删除为空，让强制为最小值1，以及从1删除，但是发现输入框还是没有最小值的问题
m0_59157023的博客
04-18 3100
关于使用el-input-number设置不让删除为空，让强制为最小值1，以及从1删除，但是发现输入框还是没有最小值的问题
element ui组件 el-input只能数据整数，且设置不能小于0大于10
mq1314520_zhl的博客
01-31 2638
第一个属性：type=“number” input的原生属性，标明input框的类型第二个属性： step=“0.5” input的原生属性，type=“number” 时生效， 标明输入字段的合法数字间隔（假如 step=“0.5”，则合法数字应该是 -0.5、0、0.5、1，以此类推）第三个属性： min=“0” max=“10” min 属性规定输入字段所允许的最小值。max 属性规定输入字段所允许的最大值。min 属性与 max 属性配合使用，可创建合法值范围。
elementui中的el-input-number只能输入数字
godming的博客
11-24 4578
1.需求是只能输入数字，输入框中不能有除数字外的文字 查询资料发现都说加这段代码 onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" 但是在火狐中输入框中仍然能输入除数字外的文字， 给el-input-number加input事件，因为是组件所以是@input.native： <el-input-number v-model="num" onKeypress="return (/[\d]/..
vue el-input输入框事件 输入框输入后触发(输入身份证号码，自动产生出生日期) 输入框回车后触发(验证身份证号是否合法)
tanzongbiao的专栏
05-29 2984
输入框输入后触发(输入身份证号码，自动产生出生日期)输入框回车后触发(验证身份证号是否合法)el-input输入框事件。
element el-input-number 计数器只能输入整数
07-27
你可以通过设置 `el-input-number` 组件的 `step` 属性为整数来限制计数器只能输入整数值。例如，将 `step` 设置为 `1`，就可以确保只能输入整数值。下面是一个示例代码： ```html <el-input-number v-model="count" :step="1"></el-input-number> ``` 在这个示例中，`v-model` 绑定了一个名为 `count` 的变量，而 `:step="1"` 则设置了计数器的步长为 `1`，这样用户就只能输入整数值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值