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

最新推荐文章于 2024-05-31 08:18:00 发布
最新推荐文章于 2024-05-31 08:18:00 发布
阅读量469 收藏
点赞数 3
文章标签： elementui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sky8880/article/details/137158122
版权
文章讲述了在elementUI的el-input-number组件中，由于饿了么底层的自定义事件设计导致笔记本电脑触摸点击会触发多次。提供了两种解决方案：一是修改源码将v-repeat-click改为@click；二是升级到2.15.x及以上版本，因为该问题在新版本中已修复。
摘要由CSDN通过智能技术生成

问题：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
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
计数器的点击事件
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...
input禁止键盘及中文输入,但可以点击
09-04
标题中的“input禁止键盘及中文输入,但可以点击”指的是在HTML中，如何实现一个<input>元素，使得用户无法通过键盘输入文字（包括中文），但仍然可以点击该输入框进行其他操作，例如选择日期、时间或者使用下拉列表...
el-input-number计数器，笔记本电脑触控板点击一次增加两次问题
qq_45844988的博客
06-08 710
【代码】el-input-number计数器，笔记本电脑触控板点击一次增加两次问题。
native导致elementUI元素两次触发
qizi_的博客
10-23 963
.native导致elementUi元素点击事件触发两次的一种解决方案 <el-radio-button @click.native="fn()"></el-radio-group> 其中fn方法触发会执行两次,原因是冒泡事件,使用prevent阻止冒泡会导致样式失效. 我使用的是另一种解决方案,在data中定义一个状态属性为true 方法中引用即可 if (this.noTwoReq) {//这里的代码是解决native会导致el元素点击事
【区分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 触摸板点击一次加2问题
kanglongking的博客
07-14 2538
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
element ui 计数器长按,快速点击的连续提交问题解决
qq_33239420的博客
09-12 1149
需求:点击计数器±,修改数据并提交 问题:由于计数器按钮可以长按,change监听到数据变化导致数秒内提交几十次数据 解决:element计数器有默认的change事件,所以我在change事件里添加mouseup事件提交数据, 问题2:change事件里的mouseup会执行多次累加(console出来的是1 1,2 1,2,3 1,2,3,4 …以此类推),也就是说还是会提交...
Element组件（inputNumber计数器）
weixin_68915174的博客
11-29 1875
按照指定间隔递增或递减。
vue element table中自定义一些input的验证操作
10-15
在Vue Element UI框架中，`el-form`组件是用于创建表单的重要部分，它提供了强大的表单验证功能。本文将详细介绍如何在`el-form`与`el-table`结合使用时，自定义`input`的验证操作。 首先，`el-form`组件通过`:...
vue监听input标签的value值方法
10-18
在Vue.js中，监听组件的状态变化是其核心特性之一，这使得我们可以实时响应用户的交互行为。在本例中，我们将探讨如何在Vue中监听`input`标签的`value`值，以便实现实时搜索或其他需要根据用户输入触发的功能。 ...
Element InputNumber 计数器的实现示例
10-15
Element UI 的 InputNumber 组件是一种用于输入数值的控件，它提供了一个方便的计数器功能，允许用户通过点击上下箭头进行数值的增减。这个组件在网页设计中常用于表单输入，例如设置商品数量、评分等需要精确调整...
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
12-11
在Vue.js和Element UI框架中，实现点击表格某一行进行编辑功能，主要涉及以下几个关键知识点： 1. **Element UI的`el-table`组件**：这是一个强大的表格组件，它支持多种功能，如行选中、排序、自定义列模板等。在...
EL-input添加双击或者单击事件
简码笔记，让你的代码更加简约精炼
11-21 3729
大家都知道el-input是无法直接添加click或者dblclick事件的，本文将介绍如何简单便捷的给el-input组件添加单击和双击事件。
el-input输入框回车时触发表单默认提交事件解决方法
weixin_46886397的博客
10-10 1071
elementUi中input组件回车触发页面刷新问题及解决方案： 问题描述: 输入框中按回车按钮，页面重新刷新 问题原因: 当 el-form 内只有一个 el-input 时，在输入框内回车就会触发表单提交的默认事件 解决方案: 在el-form中加@submit.prevent阻止这一默认行为 （）
Web前端-Vue ElementUI el-input组件绑定点击事件
热门推荐
MinggeQingchun的博客
12-22 2万+
1、element中el-input组件事件 <el-input v-model="value" v-on:change="handleChange"></el-input> <el-input v-model="value" @change="handleChange"></el-input> <el-input v-model="value" v-on:input="handleChange"></el-input> &lt
Vue自定义InputNumber 计数器组件
weixin_43882265的博客
08-03 2093
因为原始的el-element的el-input-number组件有问题： 1. 原生组件能输入英文，不能限制只能输入数值； 2. 原始组件能通过键盘上的删除按钮，将数据全部删除，若提交表单的话，就会将一个空值提交给后端，这是错误的，所以前端还要给组件做非空校验，比较麻烦； 3. 原始组件必须要失焦才能触发数据更新，若我们在更改数值后，没有点击失焦，而是直接点击确认提交表单，此时我们以为我们已经将数值改变了，其实数值没有改变，数值还是改变之前的值，若此时刷新页面的话，就能看到数值没有更新，所以必须要在更改数
【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，代表原生事件的意思。
element ui 计数器，快速点击的连续提交问题解决
qq_41551150的博客
01-25 643
问题:由于计数器按钮可以长按,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="预计工时
关于element中 input获取焦点重复触发问题
Horses丶浩的博客
08-25 3365
<el-autocomplete @focus="autocompleteFocus" @click.native="autocompleteFocus" > 当时input输入框获取焦点的时候,进行弹窗提示. 使用@focus的时候 会重复触发陷入死循环 于是使用原生click事件 解决问题 ...
el-input-number点击事件
10-18
el-input-number组件有两个点击事件，一个是input事件，一个是change事件。input事件在用户输入时触发，而change事件在用户输入完成后，失去焦点时触发。如果你想在用户输入时实时获取输入的值，可以使用input事件。如果你想在用户输入完成后再进行操作，可以使用change事件。 下面是一个el-input-number的示例代码： ``` <template> <div> <el-input-number v-model="value" @input="handleInput" @change="handleChange"></el-input-number> </div> </template> <script> export default { data() { return { value: 0 } }, methods: { handleInput(value) { console.log('input event:', value) }, handleChange(value) { console.log('change event:', value) } } } </script> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值