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 相关文章推荐
js 提交和设置表单的值
Dec 19 Javascript
Javascript玩转继承(一)
May 08 Javascript
JQuery弹出层示例可自定义
May 19 Javascript
jquery使用hide方法隐藏指定id的元素
Mar 30 Javascript
jQuery插件制作之参数用法实例分析
Jun 01 Javascript
基于Jquery和html5的7款个性化地图插件
Nov 17 Javascript
jQuery验证插件validate使用详解
May 11 Javascript
javascript的惯性运动实现代码实例
Sep 07 Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 Javascript
Javascript模拟实现new原理解析
Mar 03 Javascript
jQuery实现简单全选框
Sep 13 jQuery
详解如何在Canvas中添加事件的方法
Apr 17 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
综合图片计数器
2006/10/09 PHP
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
PHP daddslashes 使用方法介绍
2012/10/26 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
PHP判断FORM表单或URL参数来的数据是否为整数的方法
2016/03/25 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
Javascript实现真实字符串剩余字数提示的实例代码
2013/10/22 Javascript
浅析jQuery1.8的几个小变化
2013/12/10 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
2017/09/28 Javascript
Vue.directive()的用法和实例详解
2018/03/04 Javascript
微信小程序wx:for循环的实例详解
2018/10/07 Javascript
js贪心算法 钱币找零问题代码实例
2019/09/11 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
详解Swift中属性的声明与作用
2016/06/30 Python
python石头剪刀布小游戏(三局两胜制)
2021/01/20 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
幼儿园庆六一游园活动方案
2014/01/29 职场文书
大学生毕业鉴定
2014/01/31 职场文书
酒店员工检讨书
2014/02/18 职场文书
公司承诺书格式
2014/05/21 职场文书
安全伴我行演讲稿
2014/09/04 职场文书
旷课检讨书范文
2015/01/27 职场文书
公司承诺书格式范文
2015/04/28 职场文书
2019年房屋委托租赁合同范本(通用版)!
2019/07/17 职场文书
《合作意向书》怎么写?
2019/08/20 职场文书
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS
Python制作动态字符画的源码
2021/08/04 Python
python机器学习Github已达8.9Kstars模型解释器LIME
2021/11/23 Python