vue+elementUI的el-form的回车键登录,监听键盘来触发事件

整理方法如下

1.当只有一个el-input的时候,可以用elementUI的自带的回车键触发提交事件

但是有时候会同时触发刷新页面,这样可以在el-form上添加@submit.native.prevent来解决

<el-form :model="ruleForm" label-position='left' status-icon :rules="rules" @submit.native.prevent ref="ruleForm" label-width="50px" class="demo-ruleForm"><el-form-item label="账号" prop="name"><el-input v-model="ruleForm.name" placeholder="请输入管理员账号"></el-input></el-form-item><el-form-item><el-button type="primary" native-type="submit" @click="submitForm('ruleForm')">登录</el-button><el-button @click="resetForm('ruleForm')">清空</el-button></el-form-item>
</el-form>

2.使用回车键enter来进行登录,在登录按钮上面添加native-type=“submit”

<el-form :model="ruleForm" label-position='left' status-icon :rules="rules" ref="ruleForm" label-width="50px" class="demo-ruleForm"><el-form-item label="账号" prop="name"><el-input v-model="ruleForm.name" placeholder="请输入管理员账号"></el-input></el-form-item><el-form-item label="密码" prop="pass"><el-input type="password" show-password v-model="ruleForm.pass" placeholder="请输入密码" autocomplete="off"></el-input></el-form-item><el-form-item><el-button type="primary" native-type="submit" @click="submitForm('ruleForm')">登录</el-button><el-button @click="resetForm('ruleForm')">清空</el-button></el-form-item>
</el-form>

3.监听键盘来触发登录事件

created() {window.addEventListener('keydown', this.handkeyCode, true)//开启监听键盘按下事件},
handkeyCode(e) {let key = null;if (window.event === undefined) {key = e.keyCode;} else {key = window.event.keyCode;}if (key === 13) {this.login(); //登录事件}},

4.直接在el-from上加 @keyup.enter.native=”login()” 即可

<el-form :model="ruleForm" label-position='left' status-icon :rules="rules" @keyup.enter.native="login()" ref="ruleForm" label-width="50px" class="demo-ruleForm"><el-form-item label="账号" prop="name"><el-input v-model="ruleForm.name" placeholder="请输入管理员账号"></el-input></el-form-item><el-form-item><el-button type="primary" native-type="submit" @click="submitForm('ruleForm')">登录</el-button><el-button @click="resetForm('ruleForm')">清空</el-button></el-form-item>
</el-form>

vue+elementUI的el-form的回车键登录相关推荐

  1. 用vue+element-ui快速写一个注册登录页面

    vue+element-ui可以快速开发一个页面,免除大部分的css代码. 一.用表单来做: 1.代码: <!--基本html代码区域--> <template><div ...

  2. 3、Vue+ElementUI制作用户登录页面

    前面两篇简单了解了一下vue和SPA,现在来用Vue+ElementUI做一个用户登录页面,ElementUI是Element出的一套针对vue的UI库,类似的UI库非常多,ElementUI只是其中 ...

  3. 常见的 vue elementUI el的标签总结

    vue elementUI el的标签总结 标签源码 标签作用 el-col 整体 el-container 主体区域 el-tooltip 提示框信息 el-header 内容头部区域 el-asi ...

  4. vue + element-ui 对登录功能、重置表单、退出功能、路由重定向、挂载路由导航守卫的实现

    vue + element-ui 对登录功能.重置表单.退出功能.路由重定向.挂载路由导航守卫的实现 表单验证规则: 重置表单 和 对登录功能的验证: 路由重定向: 挂载路由导航守卫: 退出功能的实现 ...

  5. 前端技术:Vue+elementUI 饿了吗UI+CRUD,创建图书管理系统

    1.Vue框架 JavaScript升级版,JS它脚本语言,Vue框架 语言它my生命,api工具类 文章中心思想,有生命力 Vue框架思想,MVVM框架思想,数据驱动思想,组件化思想 2.j2ee框 ...

  6. Vue+elementUI登陆界面实战

    Vue 前置知识 1.html 2.css(一般不用css,用sass或less比较多) less sass 3.javascript(vue.React.Axios.ajax) Vue Axios ...

  7. springboot + vue + elementUI项目实战——简洁清新的员工管理系统(一)

    springboot + vue + elementUI + mybatis + redis 清新的员工管理系统 前言   从这期,项目从需求分析开始,一步步实现一个老经典的清新的员工管理系统,适合有 ...

  8. Vue实战快速上手-vue+ElementUI

    Vue实战快速上手-vue+ElementUI 前言 创建工程 安装依赖 使用 创建组件 配置路由 导入路由 展示 运行 问题 前言 ElementUI是饿了么的官方组件库,可以将vue和Elemen ...

  9. Vue+ElementUI纯前端技术实现对表格数据的增删改查

    Vue+ElementUI纯前端技术实现对表格数据的增删改查 页面展示效果 一.页面结构 分为三个部分 head body 以及script 一般我个人是在head中引入一些组件库 , 还有一些样式 ...

最新文章

  1. C++:随笔3--复杂的数据结构
  2. 日志插件 log4net 的使用
  3. ensp启动设备蓝屏_Windows 10系统遇到蓝屏怎么解决?
  4. 泽西岛2.9及更高版本中的声明式链接
  5. es6 语法 (Decorator)
  6. 斐波那契数列的量化分析
  7. maven整合ssh框架笔记
  8. 使用FFmpeg视频缩略图实现
  9. 保持健康和快乐的20种方法
  10. ADAS高级辅助驾驶视觉系统(Advanced Driver Assistant System)
  11. Caffe新手教程傻瓜系列(9):训练和测试自己的图片
  12. oracle如何总计,如何在Oracle中产生分组小计和总计?
  13. 计算机组成原理sltu指令,计算机组成原理第二次作业题及答案.doc
  14. 了解什么是用户留存率
  15. 解决中端投资痛点,“轻中端”能否抢占投资价值高地?
  16. Machine Learning-Based Prototyping of Graphical User Interfaces for Mobile Apps 论文解读
  17. CentOS 之 libc-dev 安装
  18. DIV在FLASH上面、FLASH透明背景
  19. 日期格式转换oracle,Oracle 关于日期格式转换与使用
  20. 微信小程序0基础快速入门(史上最全!!!)

热门文章

  1. 巧解汽车冬季病 启动无力别“轰油”热车
  2. FastReport studio 动态加载数据集 (zhuan)
  3. 计算机网络知识学习(核心:网络协议)-- 应用层
  4. java 复制一个对象_Java如何完全复制一个对象
  5. Javascript第四章内置函数、函数的基本用法第一课
  6. miui锁屏通知显示android,MIUI10系统又更新了!新增勿扰锁屏通知功能,修复系统Bug...
  7. 虚幻四中怎么保持导入模型坐标_[CG分享]|虚幻引擎5 技术解析
  8. 欢乐大作战服务器维护,欢乐大作战
  9. Luogu2467 SDOI2010 地精部落 DP
  10. Python面向对象中的“私有化”