今天在写登录功能的时候,在用Vue的@key.enter的时候由于使用elementUI组件,@keyup.enter不起作用,经排查,发现需要这样@keyup.enter.native=“login”
代码
<el-form ref="loginForm" :model="loginForm" :rules="myRules" @keyup.enter.native="login">
<el-form-item prop="account">
<el-input v-model="loginForm.account" type="text" placeholder="请输入用户名">
<template slot="prepend">用户名</template>
</el-input>
</el-form-item>
<el-form-item prop="pwd">
<el-input v-model="loginForm.pwd" type="password" placeholder="请输入登录密码">
<template slot="prepend">登录密码</template>
</el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login" >登录</el-button>
</el-form-item>
</el-form>
使用情景
实现点击enter键的时候能够提交表单

1、当用@keyup.enter敲击enter回车之后直接提交表单, 如果加了element组件就要用
@keyup.enter.native , 但是当你只有一个输入框的时候 from元素上要加上。
2、当然也可以在input上加监听
<input v-on:keyup.13="login">

本文介绍在Vue项目中使用ElementUI组件时,如何正确设置键盘事件以实现按下Enter键即触发登录功能。文章详细解释了为何在ElementUI中直接使用@keyup.enter可能不生效,并提供了解决方案,即使用@keyup.enter.native属性。
2776

被折叠的 条评论
为什么被折叠?



