elementUI组件中的 el-input-number 笔记本电脑触摸点击 触发多次 解决方案

最新推荐文章于 2026-05-11 21:21:06 发布
原创 最新推荐文章于 2026-05-11 21:21:06 发布 · 921 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#elementui #前端 #javascript
文章讲述了在elementUI的el-input-number组件中，由于饿了么底层的自定义事件设计导致笔记本电脑触摸点击会触发多次。提供了两种解决方案：一是修改源码将v-repeat-click改为@click；二是升级到2.15.x及以上版本，因为该问题在新版本中已修复。

问题：elementUI组件中的 el-input-number  笔记本电脑触摸点击 触发多次

原因：因为在底层饿了么写了自定义事件 是点击事件和键盘事件集合 这就导致产生bug。

解决方法一：

        修改源码：找到elementUI源码->找到input-number/input-number.vue

        把v-repeat-click 修改成 @click 即可 （需要学习怎么引用修改后源码的代码）

解决方法二：

        当前问题版本是2.14.x 但是在 2.15.x后 该问题已经被修复。所以更换版本即可(>2.15.x)

skyseey
关注
native导致elementUI元素两次触发
qizi_的博客
10-23 1168
.native导致elementUi元素点击事件触发两次的一种解决方案 <el-radio-button @click.native="fn()"></el-radio-group> 其中fn方法触发会执行两次,原因是冒泡事件,使用prevent阻止冒泡会导致样式失效. 我使用的是另一种解决方案,在data中定义一个状态属性为true 方法中引用即可 if (this.noTwoReq) {//这里的代码是解决native会导致el元素点击事
el-input-number计数器，笔记本电脑触控板点击一次增加两次问题
qq_45844988的博客
06-08 1042
【代码】el-input-number计数器，笔记本电脑触控板点击一次增加两次问题。
【javascript】vue和elementui中的键盘事件，el-input-number输入框限制输入数据规则，只能输入正整数，禁止输入除正整数以外的其他字符
DecorateCC的博客
06-06 8985
keyup.native=“UpNumber” @keydown.native="UpNumber"这是一个Vue.js中的事件绑定语法，用于监听键盘按键事件。其中@keyup.native表示监听键盘松开事件，@keydown.native表示监听键盘按下事件，UpNumber是自定义的事件处理函数。首先要监听keyup（键盘按下）事件，因为elementUi上面的input组件监听事件是没有这个事件的，所以可能会报错，所以我们需要加个vue事件的修饰符 .native，代表原生事件的意思。
el-input-number组件无法触发change事件，实时校验失效的解决办法
qq_43637218的博客
06-09 6200
解决el-input-number无法实时校验
VUE Element UI中el-input-number组件无法实时触发change事件
热门推荐
dmr123456的博客
11-03 1万+
el-input-number组件添加必填校验，不使用组件自带增减符号进行填充，手动填充值无法及时清除校验提示，组件失去焦点时才会消失。 希望在输入值之后即时清除校验提示。 解决方案 <el-input-number v-model="form.eventDisposalRange" :min="1" label="描述文字" :disabled="edit" @input.native="eventDisposalRangeChange()
2026面试预判及实际面试
最新发布
Mr.小灰狼_随笔
05-11 397
本文摘要总结了多个前端开发岗位的面试问题和答案，涵盖Vue3、ECharts、数据可视化、JavaScript核心概念等内容。 Vue3高频问题 组合式API相比选项式API的优势在于逻辑内聚、更好的TS支持和复用性。 状态管理推荐Pinia，轻量且支持组合式API风格。 动态路由和权限控制通过router.addRoute和路由守卫实现。 响应式原理基于Proxy和Reflect，解决了Vue2的局限性。 ECharts与数据可视化 性能优化包括数据聚合、懒渲染和dataZoom区域缩放。
el-input-number 触摸板点击一次加2问题
kanglongking的博客
07-14 2889
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
element ui 计数器，快速点击的连续提交问题解决
qq_41551150的博客
01-25 766
问题:由于计数器按钮可以长按,change监听到数据变化导致数秒内提交几十次数据 解决： <el-row class="icy-taskdetail__select"> <el-col :span="6" class="icy-taskdetail__input"> <img class="icy-taskdetail__input--img" src="@/assets/images/task_estimatedHours.png" alt="预计工时
el-input-number不能input事件
m0_48334955的博客
02-26 1276
虽然输入框尾部的上下箭头去掉了，但是，当我们鼠标焦点在输入框中时，上下滚动鼠标滚轮，这时输入框中的数字会发生变化，容易导致误操作，这时只需要将el-input元素改成如下即可。用的el-input-number，发现不能实现input，因为拿到的值要做操作，所以最后选择了el-input结合正则来做。要求input只能输入正整数。去除input后面箭头。
关于element中 input获取焦点重复触发问题
Horses丶浩的博客
08-25 4012
<el-autocomplete @focus="autocompleteFocus" @click.native="autocompleteFocus" > 当时input输入框获取焦点的时候,进行弹窗提示. 使用@focus的时候 会重复触发陷入死循环 于是使用原生click事件 解决问题 ...
关于el-input-number计数器change事件校验数据，改变绑定数据值后change方法失效问题的原因及解决方法
direction_0528的博客
03-28 3468
查阅资料后发现问题原因在 change事件发生后触发了dom更新，而数据更改变化是在dom更新之后，这就导致了dom当中挂载的数据值还是更新之前的值，并且此后无刷新控制dom重新渲染的指令，使得chhange方法失效。解决方法：用$nextTick函数对绑定值进行更改（ this.$nextTick(() => { this.绑定值= 更改值 }) ），即在dom初次完成渲染挂载后，修改其值再次触发dom渲染挂载。
计数器的点击事件
Rowse的博客
03-16 911
今天我们来学习以秒计数的计数器，点击开始计数按钮后input标签会开始计数，然后点击停止计数则会停止计数。 代码 1.HTML：设置一个input标签使显示的数字在input标签里面显示，两个button按钮用于开始与停止计数。 <body> <input type="text" value="0" id="number"> <button id="start">开始计数</button> <button id="sto...
el-input-number 失去焦点blur事件，
qq_52125118的博客
04-11 3853
最近遇到了个奇怪的需求，需要代码手动给数字输入框手动触发失焦事件；后来再阅读了 el-input-number的 template部分的源码后；
Element组件（inputNumber计数器）
weixin_68915174的博客
11-29 2165
按照指定间隔递增或递减。
element ui 计数器长按,快速点击的连续提交问题解决
qq_33239420的博客
09-12 1360
需求:点击计数器±,修改数据并提交 问题:由于计数器按钮可以长按,change监听到数据变化导致数秒内提交几十次数据 解决:element计数器有默认的change事件,所以我在change事件里添加mouseup事件提交数据, 问题2:change事件里的mouseup会执行多次累加(console出来的是1 1,2 1,2,3 1,2,3,4 …以此类推),也就是说还是会提交...
【Element-ui】InputNumber 计数器与Select 选择器
m0_62599305的博客
12-03 4594
在Web开发中，用户输入和选择是常见的交互行为。为了提供更好的用户体验，前端框架和组件库经常提供丰富的表单元素。本文将重点介绍Element-ui中的两个常用表单组件——InputNumber 计数器和 Select 选择器。这两个组件为用户输入和选择提供了强大而灵活的解决方案，使得开发者能够轻松构建交互性强的界面。Element-ui中的 InputNumber 计数器和 Select 选择器为我们提供了强大的表单元素，简化了用户输入和选择的处理。
element el-input-number 加减失效或者只加减一次就失效
m0_49623851的博客
02-20 6670
element el-input-number 加减失效或者只加减一次就失效
Element组件el-input-number的@input事件延迟问题
YZero_cn的博客
12-18 1384
el-input组件没有这个问题,而el-input-number存在，说明应该是与输入内容变动之后的组件内部校验有关，数字输入框在输入其他字符时会直接丢弃掉。推测应该是触发@input在前，组件内校验在后，校验未完成导致绑定值没有更新，所以在@input函数中加一个延迟等待完成校验之后再读取绑定值即可获取到最新的输入内容。比如此时输入框的值为12，在后面输入0，变为120，但是通过@input调用的函数中，获取组件绑定的值，显示为12，再将120修改为12，结果打印输出120，总是比输入慢一步。
el-input-number无法实时监听输入事件？我的解决办法
Dawnchen1的博客
03-22 7688
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"
el-input-number计数器change事件校验数据，改变绑定数据值后change方法失效问题的原因及解决方法
qq_58307541的博客
07-10 1487
在change事件中如果对el-input-number绑定的数据进行更改，会出现change事件失效的问题。试过：this.$set()及赋值等方法，都无法解决。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值