Vue监听原生回车事件keyup.enter.native

最新推荐文章于 2025-03-21 09:59:11 发布

原创最新推荐文章于 2025-03-21 09:59:11 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍在Vue项目中如何使用element-ui组件库的el-input元素，通过监听键盘事件来实现Enter键登录功能。具体展示了如何在输入框中设置@keyup.enter.native事件，以及在按钮上使用@click.native.prevent来调用登录方法。

keyup.enter.native

以element button组件为例：

// 监听按下
     <el-input
       :type="pwdType"
        v-model="loginForm.password"
      	name="password"
        placeholder="请输入密码"
        clearable
        @keyup.enter.native="handleLogin" />
	  <el-button :loading="loading" type="primary" style="width:100%;" @click.native.prevent="handleLogin">登录</el-button>

在这里插入图片描述