当前位置: 首页 > news >正文

探究element-ui 2.15.8中<el-input>的keydown事件无效问题

一、问题描述

今天看到一个问题,在用Vue2+element-ui 2.15.8开发时,使用input组件绑定keydown事件没有任何效果。

<template><div id="app"><el-input v-model="content" placeholder="请输入"  @keydown="handelKeydown"/></div>
</template><script>
export default {data() {return {content: ''}},methods: {handelKeydown() {console.log('触发了Keydown事件!!!') // 实际不会触发}}
}
</script>

二、问题排查

我们直接调试代码,找到Vue2中事件初始化的地方initEvents

在这里插入图片描述
在这里插入图片描述

可以看到,我们的keydown事件其实是有记录到的,那么事件绑定的关键就在updateComponentListeners

在这里插入图片描述

在这里有两句代码很关键:

target$1 = vm;target$1 这个变量后面会提到,它就是vm,我们<el-input>组件的实例对象。
updateListenersupdateComponentListeners实际内部调用的事件更新处理,它里面如何执行,我们往下看:

在这里插入图片描述

可以看到,updateListeners里实现事件绑定的逻辑是在add函数内:

在这里插入图片描述
在这里我们再次看到了 target$1变量,从而keydown事件其实就是绑定在它上面了。

那么如果要使得keydown事件能够正常触发,<el-input>组件内部在<input>上应该要有@keydown,并$emit('keydown')。于是,到<el-input>组件源码内看看到底有没有这个:

在这里插入图片描述
可以看到<el-input>组件并没有绑定keydown事件。

接下来,修改一下它的源码来验证一下:

在这里插入图片描述
在这里插入图片描述

这时候不要直接去调试,如果直接修改源码后调试会发现没有任何效果,即使你重新启动服务。原因在于,加载的Element-UI目标文件并不是源码文件:

在这里插入图片描述

也就是,在main.js中使用的import Element from 'element-ui'导入的其实是node_modules\element-ui\lib\element-ui.common.js

所以这里我们还要再修改一下main.js

import Element from 'element-ui'替换成下面的代码:

import Element from 'element-ui/src/index'

最后我们yarn serve重启一下服务,来验证一下:

在这里插入图片描述

三、解决方案

在实际开发中,不用去修改element-ui的源码也能使keydown事件生效,这里需要用到Vue的事件修饰符:navtive

修改一下代码:

<el-input v-model="content" placeholder="请输入"  @keydown.native="handelKeydown"/>

在这里插入图片描述

同样可以看到它生效了。

这里你可能有疑问,native为何能使keydown生效了呢?我们简单看一下:

在这里插入图片描述
在这里插入图片描述

可以看到:

给普通vnode创建完dom后、和createChilren后,会调用invokeCreateHooks函数,这里面会执行属性、事件、指令等的create钩子函数(注意不是组件实例的create钩子函数)。

在事件的create钩子函数中,会调用updateDomLIsteners方法的updateListeners方法,因为是创建阶段,所以又会调用add方法,使用target.addEventListeners给目标真实dom元素添加监听事件。

另:

在最后调试的过程中,在invokeCreateHooks函数内,你可能会好奇:cbs.create[i_2]指向updateDOMListeners,这个是怎么来的呢?

在这里插入图片描述

关于这个其实来自于下面的代码:

在这里插入图片描述
在这里插入图片描述

相关文章:

探究element-ui 2.15.8中<el-input>的keydown事件无效问题

一、问题描述 今天看到一个问题&#xff0c;在用Vue2element-ui 2.15.8开发时&#xff0c;使用input组件绑定keydown事件没有任何效果。 <template><div id"app"><el-input v-model"content" placeholder"请输入" keydown&quo…...

Unity 代码控制Text自适应文本高度

在使用代码给Text赋值时&#xff0c;且文本有多段&#xff0c;并需要根据实际文本高度适配Text组件的高度时&#xff0c;可以使用以下方法&#xff1a; //Text文本 public TextMeshProUGUI text;void Start() {//代码赋值文本text.text "好!\n很好!\n非常好!";//获…...

TiDB 7.1 多租户在中泰证券中的应用

本文详细介绍了中泰证券在系统国产化改造项目中采用 TiDB 多租户技术的实施过程。文章分析了中泰证券数据库系统现状以及引入 TiDB 资源管控技术的必要性&#xff0c;探讨了 TiDB 多租户的关键特性&#xff0c;并阐述了在实际应用中的具体操作步骤。通过该技术的应用&#xff0…...

嵌入式-stm32-SR04超声波测距介绍及实战

一&#xff1a;超声波传感器介绍 1.1、SR04超声波测距硬件模块 1.2、SR04的四个IO口 vcc:提供电源5V gnd:接地 Trig:是**发送**声波信号的触发器 Echo:是**接收**回波信号的引脚 当TRIG信号被触发时&#xff0c;传感器会发送一定频率的声波信号&#xff0c;该信号被反射后&am…...

智能优化算法应用:基于白鲸算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于白鲸算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于白鲸算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.白鲸算法4.实验参数设定5.算法结果6.参考文献7.MA…...

mac m1芯片 pytorch安装及gpu性能测试

pytorch 使用mac的m1芯片进行模型训练。 #小结&#xff1a;在数据量小和模型参数少&#xff0c;batch_size小时&#xff0c;cpu训练更快&#xff08;原因&#xff1a;每次训练时数据需要放入GPU中&#xff0c;由于batch_size小。数据放入gpu比模型计算时间还长&#xff09; 在…...

go 使用 - sync.WaitGroup

使用 - sync.WaitGroup 简介使用注意点 简介 waitgroup 是等待一组并发操作完成得方法。Goroutines对Go来说是独一无二的&#xff08;尽管其他一些语言有类似的并发原语&#xff09;。它们不是操作系统线程&#xff0c;它们不完全是绿色的线程(由语言运行时管理的线程)&#x…...

Java Web Day07-08_Layui

1. Layui概念介绍 layui&#xff08;谐音&#xff1a;类 UI) 是一套开源的 Web UI 解决方案&#xff0c;采用自身经典的模块化规范&#xff0c;并遵循原生 HTML/CSS/JS 的开发方式&#xff0c;极易上手&#xff0c;拿来即用。其风格简约轻盈&#xff0c;而组件优雅丰盈&#x…...

阿里云华北3(张家口)暂时无法办理经营性ICP许可证

阿里云服务器的华北 3&#xff08;张家口&#xff09;地域暂时无法办理经营性ICP许可证&#xff0c;如有经营性ICP业务请勿选择此地域。如果需要办理经营性ICP业务的用户&#xff0c;不需要选择华北3&#xff08;张家口&#xff09;地域&#xff0c;可以选择华北2&#xff08;北…...

八种常见顺序存储的算法

目录 1、线性枚举 1&#xff09;问题描述 2&#xff09;动图演示 3&#xff09;示例说明 4&#xff09;算法描述 5&#xff09;源码详解 2、前缀和差分 1&#xff09;问题描述 2&#xff09;动图演示 3&#xff09;样例分析 4&#xff09;算法描述 5&#xff09;源码…...

Leetcod面试经典150题刷题记录 —— 栈篇

Leetcod面试经典150题刷题记录 —— 栈篇 1. 有效的括号2. 简化路径3. 最小栈4. 逆波兰表达式求值5. 基本计算器 1. 有效的括号 题目链接&#xff1a;有效的括号 - leetcode 题目描述&#xff1a; 给定一个只包括 ( &#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[&…...

【Qt-QThread-QQueue】

Qt编程指南 ■ QThread■ 示例■ QQueue■■■ QThread ■ 示例 #include <QThread> class myThread : public QThread {Q_OBJECT signals...

电子握力器改造

toy_hand_game 介绍 消耗体力玩具&#xff0c;使用握力器(Grip Strengthener)控制舵机旋转。 开始设想是控制丝杆电机滑动&#xff0c;两套设备就可以控制两个丝杆电机进行“模拟拔河”&#xff0c;后续发现硬件设计错误&#xff0c;ULN2003不能控制两相四线电机&#xff0c;…...

3D展2D数学原理

今年早些时候&#xff0c;我为 MAKE 杂志写了一篇教程&#xff0c;介绍如何制作视频游戏角色的毛绒动物。 该技术采用给定的角色 3D 模型及其纹理&#xff0c;并以编程方式生成缝纫图案。 虽然我已经编写了一般摘要并将源代码上传到 GitHub&#xff0c;但我在这里编写了对使这一…...

MacOS+Homebrew+iTerm2+oh my zsh+powerlevel10k美化教程

MacOS终端 你是否已厌倦了MacOS终端的大黑屏&#xff1f; 你是否对这种美观的终端抱有兴趣&#xff1f; 那么&#xff0c;接下来我将会教你用最简单的方式来搭建一套自己的终端。 Homebrew的安装 官网地址&#xff1a;Homebrew — The Missing Package Manager for macOS (o…...

jenkins解决工具找不到的问题

--------------------------插件选择版本最好能跟服务器对上...

Android : 画布的使用 简单应用

示例图&#xff1a; MyView.java&#xff1a; package com.example.demo;import android.content.Context; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.view.Vi…...

紫光展锐5G扬帆出海 | 东南亚成为5G新热土

东南亚是一块充满活力和潜力的市场&#xff0c;这里人口基数大、年轻消费群体占比高&#xff0c;电子市场在过去几年显著增长。 增速“狂飙”的东南亚手游 近年来&#xff0c;东南亚手游下载量逐年增长&#xff0c;2023 年第一季度下载量突破 21 亿次&#xff0c;贡献了全球近…...

STM32 学习(一)新建工程

本课程使用的stm32型号 引脚定义&#xff0c;有FT能接5v&#xff0c;没有FT能接3.3v 启动配置 第二种启动模式中&#xff0c;系统存储器中存放了一部分Bootloader程序&#xff0c;该程序可以接收串口的数据&#xff0c;然后刷新到主闪存中&#xff0c;这样就可以使用串口下载程…...

ROBOGUIDE教程:FANUC机器人固定点焊焊接虚拟仿真

目录 概述 机器人系统创建 焊接工件模型创建 机器人抓手工具添加与工件安装 工作台添加与工件安装 固定点焊焊枪支架模型创建与组装 固定点焊焊枪添加与配置 机器人远程TCP标定(核心内容) 远程TCP手动测试 远程TCP指令介绍 机器人仿真程序编写 机器人示教编程 机…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)

🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

【论文阅读28】-CNN-BiLSTM-Attention-(2024)

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

LangChain知识库管理后端接口:数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

C++.OpenGL (20/64)混合(Blending)

混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

Caliper 负载(Workload)详细解析

Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分,它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构: use strict;/…...