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与elementUI中给el-input绑定键盘按键--按键修饰符相关推荐

vue循环生成元素_Vue循环中多个input绑定指定v-model实例
Vue.js中提供了v-model可以双向绑定表单元素,这个方法可以非常方便的获得输入的值,但是有时候表单元素需要循环生成,在循环中要怎样获得指定输入框的值呢这里介绍两种: 一种是v-for中循环生 ...
Vue：element-ui中表格过长内容隐藏显示
一.el-table表格在使用VUE显示后台数据时,经常会遇到数据过长,显示出来的效果很难看,如下图所示: 上图中,红框框出的内容由于长度过长,占据了三行空间,如果内容更多的话,占据行数就更多了,表 ...
理解vue之element-ui中的 template slot-scope=scope
如果有用过element-ui中的table组件,可能会发现有这么一个写法: <template slot-scope="scope"> 在实际的使用过程中,这种用法当 ...
在 C# 中，new 关键字可用作运算符、修饰符或约束。
(1)new 运算符用于创建对象和调用构造函数. (2)new 修饰符用于隐藏基类成员的继承成员. (3)new 约束用于在泛型声明中约束可能用作类型参数的参数的类型. new 运算符 1. ...
类中static、const、readonly、partial修饰符
static 修饰类成员: static在C#中的用法与C++类似,当声明一个类成员为静态时,意味着无论有多少个类的对象被创建,只会有一个静态成员的副本,static变量可在成员函数或类的定义外部进行 ...
ElementUI中el-radio-group使用v-model绑定是属性为String字符串类型时不回显数据
场景结合el-radio-group元素和子元素el-radio可以实现单选组,在el-radio-group中绑定v-model,在el-radio中设置好label即可,无需再给每一个el-ra ...
vue 的elementui中select下拉框多选项-multiple属性
vue的select下拉框多选项-multiple属性最近在使用vue-element-admin这个后台管理框架开源模板在做一个管理后台,使用起来其实还挺方便的,大部分的组件源码里面都已经写好了, ...
vue解决element-ui中循环产生的popover中的内容手动点击完操作后隐藏
1.想要功能--如下图:既点击弹窗中的列表项之后,弹窗popover隐藏 2.解决方法-没有使用回调时在el-popover中加属性 :ref="popover-${scope.$inde ...
基于vue的element-ui中无总页数的分页封装
借鉴于https://blog.csdn.net/NirvanaRebirth/article/details/92412794,感谢! 上面介绍的很详细,同时在此基础上进行了样式上的调整,样式写的比 ...

vue与elementUI中给el-input绑定键盘按键--按键修饰符

vue怎么写键盘事件

常用按键修饰符

鼠标按键修饰符

系统按键修饰符

vue与elementUI中给el-input绑定键盘按键--按键修饰符相关推荐

最新文章

热门文章