如何给 el-input 添加键盘回车事件

本文揭示了如何在ElementUI的el-input组件中使用.native修饰符实现回车键监听,解释了native修饰符的作用——让父组件接收到原生事件。通过对比分析,介绍了native修饰符的应用场景和限制。
摘要由CSDN通过智能技术生成

查找 Element UI 的 input输入框组件(el-input组件),都没有发现可以给输入框添加的回车键监听事件,因为Element UI对其做了进一步封装,想要直接添加 @keydown(或者@keyup.enter)是无效的。

要想在el-input中实现回车键监听事件,需要在@keyup.enter后面加上.native,即

<el-input v-model="messageInput" @keyup.enter.native="sendMsg">

那么 .native 是如何给组件添加原生事件的呢?
我们对比下面两个组件在最后生成的页面中有哪些不同点

在这里插入图片描述

发现,添加了 .native 修饰符的 el-input 组件会有原生的 keyup 事件,其实就是在组件的根标签上添加了一个事件监听

总结:

  1. native修饰符可以让父组件接收到原生事件, 否则只能接收自定义事件(通过子组件$emit触发)
  2. native修饰符只能用在组件上, 不能用在原生标签上
  • 7
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值