vue登录页面回车执行事件@keyup.enter.native问题
更新时间:2023年03月04日 14:43:25 作者:吴冬雪~
这篇文章主要介绍了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); },
这样就实现点击键盘回车键和点击按钮实现登录功能。
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
今天小编就为大家分享一篇解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08vue3.0使用vue-pdf-embed在线预览pdf 控制页码显示范围不生效问题解决
这篇文章主要介绍了vue3.0使用vue-pdf-embed在线预览pdf 控制页码显示范围不生效问题的问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-01-01
最新评论