vue登录页面回车执行事件@keyup.enter.native问题
作者：吴冬雪~ 发布时间：2023-07-02 17:01:42
标签：vue,回车,@keyup.enter.native
vue登录页面回车执行事件@keyup.enter.native
<el-form ref="loginForm" :model="loginForm" :rules="loginFormRules" label-width="80px">
<!-- 用户名 -->
<el-form-item label="用户名" prop="userName">
<el-input v-model="loginForm.userName" prefix-icon="el-icon-user" clearable @keyup.enter.native="submitForm('loginForm')"></el-input>
</el-form-item>
<!-- 密码 -->
<el-form-item label="密码" prop="passWord" style="margin-bottom: 0;">
<el-input v-model="loginForm.passWord" prefix-icon="el-icon-lock" type="password" show-password @keyup.enter.native="submitForm('loginForm')"></el-input>
</el-form-item>
</el-form>
vue中回车键登录实现
给登录按钮绑定两个点击事件：
代码如下：
<el-button type="primary" @click="login（）" @keyup.enter="keyDown(e)">登录</el-button>
login 是直接点击按钮的登录事件：
代码如下：
methods: {
login() {
},
// 点击回车键登录
keyDown(e) {
// 回车则执行登录方法 enter键的ASCII是13
if (e.keyCode == 13 || e.keyCode == 100) {
this.login(); // 定义的登录方法
}
},
},
mounted() {
// 绑定监听事件
window.addEventListener("keydown", this.keyDown);
},
destroyed() {
// 销毁事件
window.removeEventListener("keydown", this.keyDown, false);
},
这样就实现点击键盘回车键和点击按钮实现登录功能。
来源：https://blog.csdn.net/qq_37548296/article/details/108484132
0
投稿猜你喜欢
- 提到分发请求，相信大多数人首先会想到Nginx，Nginx作为一种多功能服务器，不仅提供了反向代理隐藏主机ip的能力，还拥有简单的缓存加速功
- 单例模式是一种常用的软件设计模式。在它的核心结构中只包含一个被称为单例类的特殊类。通过单例模式可以保证系统中一个类只有一个实例而且该实例易于
- SQL Server 2000中存在的许多的备份和恢复特性都同样保留在了SQL Server 2005中，但是有一些新的提高同样值得我们关注
导语：哈喽，哈喽~今天小编又来分享小游戏了——flappy bird（飞扬的小鸟），这个游戏非常的经- 本文实例讲述了C#操作SQLite数据库帮助类。分享给大家供大家参考，具体如下：最近有WPF做客户端，需要离线操作存储数据，在项目中考虑使用
- MySql Server安装步骤如下所示：1安装MySql Server2 安装MySqlServer管理工具解压中文语言包，将文件复制到安
- 在pycharm中，当调用( import / from … import… )其他文件夹下的函数或模块，会发现编辑器无法识别（ can n
- 一、python线程的模块1.1 thread和threading模块thread模块提供了基本的线程和锁的支持threading提供了更高
- 本文实例讲述了mysql 数据库备份的多种实现方式。分享给大家供大家参考，具体如下：一、使用mysqldump进行备份1、完整备份所有数据库
- 本文实例讲述了python实现通过队列完成进程间的多任务功能。分享给大家供大家参考，具体如下：1.通过队列完成进程间的多任务import m
- 本文列出了初学网页编程中常用到的一些代码和一些技巧，简单实用，您一定用得到。1、oncontextmenu="window.eve
- MySQL是一个大数据库。有的数据库里面个有种各样的数据。如果不按照规定划分好会显得看起来很乱。凡是东西都要通过整理才能规矩，每一堆数据整理
- Facebook的网站速度做为最关键的公司任务之一。在2009年，我们成功地实现了Facebook网站速度提升两倍 。而正是我们的工程师团队
- <％'该函数作用：按指定参数格式化显示时间。'numformat=1:将时间转化为yyyy-mm-dd h
- 本文实例为大家分享了opencv实现图像平移效果的具体代码，供大家参考，具体内容如下图像平移：按照指定方向和距离，移动到相应位置格式：cv.
- Line plotsAxes3D.plot(xs, ys, *args, **kwargs)绘制2D或3D数据参数描述xs, ysX轴，Y轴
- 有一个比较大的数据集需要自己处理，在分出训练集和测试集时，如果靠手动实在太麻烦，于是自己写了一段代码。（其实就是在某一路径下的子文件夹里取出
- 我们用pyinstaller把朋友文件打包成exe文件，但有时候我们需要还原，我们可以用pyinstxtractor.py用法：python
- 1、引言小 * 丝：鱼哥， 都说要想代码写的溜，Lamdba不能少。小鱼：你在项目代码多写几个lamdba试试，看看架构师找不找你喝茶水。小 * 丝
- 本次案例使用OpenCV和selenium来解决一下滑块验证码先说一下思路：弹出滑块验证码后使用selenium元素截图将验证码整个背景图截
