vue使用element-ui的el-input监听不了回车事件解决
转自:http://blog.csdn.net/u014520745/article/details/71746343
仅用于学习,不可商用!!!
vue使用element-ui的el-input监听不了回车事件,原因应该是element-ui自身封装了一层input标签之后,把原来的事件隐藏了,所以如下代码运行是无响应的:
<el-input v-model="form.loginName" placeholder="账号" @keyup.enter="doLogin"></el-input>
- 1
解决方法需要在事件后面加上.native
<el-input v-model="form.loginName" placeholder="账号" @keyup.enter.native="doLogin"></el-input>
正常的自己写的input标签添加键盘事件
- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- <meta charset="utf-8">
- <script src="vue.js"></script>
- <script type="text/javascript">
- window.onload = function(){
- var vm = new Vue({
- el:'#box',
- methods:{
- show:function(ev){
- if(ev.keyCode == 13){
- alert('你按回车键了');
- }
- },
- }
- });
- }
- </script>
- </head>
- <body>
- <div id="box">
- <input type="text" placeholder="请输入" @keyup="show($event)">
- <input type="text" placeholder="请输入" @keyup.13="show($event)">
- </div>
- </body>
- </html>
当按下键盘的时候,执行show方法,然后再去执行相应的业务。
两个input的效果都是一样的 如果按13 也就是按键 enter 才会执行弹窗!!
@keyup.13 回车
@keyup.enter 回车
@keyup.left 左键
@keyup.right 右键
@keyup.up 上键
@keyup.down 下键
@keyup.delete 删除键
原文链接:http://www.cnblogs.com/zycbloger/p/6423132.html
vue使用element-ui的el-input监听不了回车事件解决相关推荐
- vue图片懒加载插件vue-lazyload监听加载失败事件的解决方案
对于vue项目而言,图片懒加载是一个常见的图片加载方案,可以优化用户体验,而vue-lazyload则是一个广泛使用的插件. 对于某些业务场景,我们需要监听图片加载失败事件,而后进行相应的处理,然 ...
- Vue+JS+Element UI实战(电商项目1)
目录 1.电商业务概述 2.电商后台管理系统的功能 3.项目初始化步骤 4.后台项目的环境安装配置 4.1. API V1 接口说明 4.2. 支持的请求方法 4.3. 通用返回状态说明 5.测试后 ...
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
- Node mysql mvc vue_net MVC +Vue.js+Element UI 笔记
最近项目需求,要在MVC里用Vue 与 Element UI,故而做个笔记来记录一些遇到的问题和处理思路 (方式比较麻瓜,如果不是临时用的话,建议还是学一下Vue-cli,新项目还是老老实实前后端分离 ...
- 【Vue】 element ui 引入第三方图标
最近一个项目用到 vue 和 element ui开发前端.使用element ui自带的icon太少,所以引入第三方的.截止目前为止国内外网络上的相关教程我搜索到没超过5篇,而且都不详细,即使全部阅 ...
- Vue安装element ui踩坑
在vue安装element ui 的过程中报了许多错误,慢慢踩坑,希望能帮到各位 1. 输入 vue add element 输入 y y zh-CN 如果报错 ERROR comman ...
- vue问题三:element ui的upload组件上传图片成功和移除事件
element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...
- [vue] vue组件里写的原生addEventListeners监听事件,要手动去销毁吗?为什么?
[vue] vue组件里写的原生addEventListeners监听事件,要手动去销毁吗?为什么? 需要,原生DOM事件必须要手动销毁,否则会造成内存泄漏 个人简介 我是歌谣,欢迎和大家一起交流前后 ...
- angular4点击事件监听_JavaScript从零开始——DOM事件编程(1)
事件的本质是程序各个组成部分之间的一种通信方式,也是异步编程的一种实现.DOM 支持大量的事件,本章开始,我们一起看看 DOM 的事件编程. 1 概念 DOM 的事件操作(监听和触发),都定义在Eve ...
- Android 监听Home键按键事件
Android 监听Home键按键事件 标签(空格分隔):Android Home键 在Android开发中有很多按键事件需要在App中捕获从而做出一些针对性的操作,例如返回键,音量键等都可以直接在d ...
最新文章
- 浅析网站页面加载速度如何提升?
- 从思维导图学习操作系统(二)
- PPA格式Linux安装,Ubuntu12.04 用PPA安装fcitx和搜狗输入法附加组件Linux版
- 在uipath_UiPath狂欢节Day 3——国内超级企业CFO大咖RPA案例分享!
- c语言数据类型简介表格,C语言基本数据类型简介.docx
- Eclipse中,查找文件后(使用ctrl shift R/T),如何关联到文件所在目录(查看文件所在的目录结构)。
- 快来看看Ubuntu 17.04官方吉祥物长什么样子!
- 相机标定原理介绍(二)
- Docker离线安装
- Mysql登录默认密码
- 【Foreign】Melancholy [线段树]
- PyInstaller 的安装和使用(python生成exe文件)_联网安装
- 【复旦大学】考研初试复试资料分享
- 联发科的10核Helio X20处理器
- HiveHive创建数据库与创建数据库表
- 建好这个“群”,建设郑州国家中心城市成首要突破口
- 【产业互联网周报】销售易获腾讯1.2亿美元投资;国科恒泰完成11亿C轮融资;工信部、科技部推进大数据及人工智能...
- Deferred Shading VS Deferred Lighting
- 什么是EE(exploration and exploitation)问题
- android系统的刷机步骤,怎么刷机安卓系统,自己就能刷机的方法,太方便了
热门文章
- File(File f, String child) File(String parent, String child)
- Python Jquery学习
- 自己写的python脚本(抄的别人的,自己改了改,用于整理大量txt数据并插入到数据库)...
- 钩子教程 - 原理(二十五) : 消息 -- WM_CANCELJOURNAL
- ubuntu-12.04.5-desktop-amd64.iso:ubuntu-12.04.5-desktop-amd64:安装Oracle11gR2
- 初学Flask(1)
- 模板 n维矩阵的二分幂
- MySQL主从复制 + Mycat实现读写分离
- python 特殊方法实例
- c语言的数组长度问题