vue中el-input绑定键盘按键(按键修饰符)


Posted in Javascript onJuly 22, 2020

vue怎么写键盘事件

vue允许将按键值作为修饰符来使用,如监听回车事件,有两种写法,如下代码:

<input type="text" @keyup.13="console.log($event)"></input>
<input type="text" @keyup.enter="console.log($event)"></input>

但要注意的是:当我们在在el-input采用如上两种写法时,他是不生效的。el-input监听不到键盘事件,原因是element-ui是封装组件,所以el标签属于自定义标签,因此触发不了键盘事件。

解决办法:加上.native原生事件修饰符即可。.native:监听组件根元素的原生事件,主要作用是给自定义的组件添加原生事件。
vue与elementUI中给el-input绑定键盘按键代码如下:

<el-input placeholder="店铺名称" clearable v-model="queryObj.shopname" @keyup.enter.native="query">
 <template slot="prepend">店铺名称</template>
</el-input>

常用按键修饰符

别名修饰符 键值修饰符 对应按键
.delete .8/.46 回格/删除
.tab .9 制表
.enter .13 回车
.esc .27 退出
.space .32 空格
.left .37
.up .38
.right .39
.down .40

鼠标按键修饰符

别名修饰符 可用版本 对应按键
.left 2.2.0以上 左键
.right 2.2.0以上 右键
.middle 2.2.0以上 中键

系统按键修饰符

别名修饰符 可用版本 对应按键
.ctrl 2.1.0以上 Ctrl键
.alt 2.1.0以上 Alt键
.shift 2.1.0以上 Shift键
.meta 2.1.0以上 meta键(Windows系统上为田键)

关于组合修饰符的使用:

vue为我们提供了组合修饰符的机制,但是它的使用,必须配合系统按键修饰符才可以生效。如下是一段测试代码:

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
<div id="app">
 <button @click.ctrl="ctrlClick" @click="together">带上ctrl来找我玩呀</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script type="text/javascript">
 let vm = new Vue({
 el: '#app',
 methods: {
  together(event) {
  if (!event.ctrlKey) {
   console.log('------------- 我是可爱的分割线呀 -------------')
   console.log('$event.ctrlKey:', event.ctrlKey)
  } else {
   console.log('欢迎呀!')
  }
  },
  ctrlClick(event) {
  console.log('------------- 我是可爱的分割线呀 -------------')
  console.log('$event.ctrlKey:', event.ctrlKey)
  console.log('Ctrl你来了呀!')
  }
 }
 })
</script>
</body>
</html>

到此这篇关于vue中el-input绑定键盘按键(按键修饰符)的文章就介绍到这了,更多相关el-input绑定键盘按键内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript小数计算出现近似值的解决办法
Feb 06 Javascript
JavaScript中的isXX系列是否继续使用的分析
Apr 16 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
Oct 19 Javascript
使用js获取地址栏中传递的值
Jul 02 Javascript
js识别不同浏览器基于userAgent做判断
Jul 29 Javascript
微信分享的标题、缩略图、连接及描述设置方法
Oct 14 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
JavaScript对象参数的引用传递
Jan 14 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
详解Webpack抽离第三方类库以及common解决方案
Mar 30 Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
Jul 22 #Javascript
js实现查询商品案例
Jul 22 #Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 #Javascript
eslint+prettier统一代码风格的实现方法
Jul 22 #Javascript
解决vue-router 切换tab标签关闭时缓存问题
Jul 22 #Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
Jul 22 #Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 #Javascript
You might like
基于PHP CURL用法的深入分析
2013/06/09 PHP
PHP生成随机密码类分享
2014/06/25 PHP
PHP中加密解密函数与DES加密解密实例
2014/10/17 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
JS保存、读取、换行、转Json报错处理方法
2013/06/14 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
2015/10/23 Javascript
jquery trigger实现联动的方法
2016/02/29 Javascript
jQuery原理系列-常用Dom操作详解
2016/06/07 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
seaJs使用心得之exports与module.exports的区别实例分析
2017/10/13 Javascript
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
通过vue手动封装on、emit、off的代码详解
2019/05/29 Javascript
jQuery表单选择器用法详解
2019/08/22 jQuery
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
python实现从pdf文件中提取文本,并自动翻译的方法
2018/11/28 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
python elasticsearch环境搭建详解
2019/09/02 Python
python中有函数重载吗
2020/05/28 Python
Python使用tkinter制作在线翻译软件
2021/02/22 Python
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
斯洛伐克家具和时尚装饰品购物网站:Butlers.sk
2019/09/08 全球购物
研究生求职推荐信范文
2013/11/30 职场文书
英文简历自荐信范文
2013/12/11 职场文书
招商业务员岗位职责
2013/12/16 职场文书
三好学生事迹材料
2014/12/24 职场文书
毕业生评语大全
2015/01/04 职场文书
大学生入党自我鉴定范文
2019/06/21 职场文书
如何利用js在两个html窗口间通信
2021/04/27 Javascript
分布式Redis Cluster集群搭建与Redis基本用法
2022/02/24 Redis