vue监听键盘事件的快捷方法【推荐】

这篇文章主要为大家详细介绍了vue监听键盘事件的快捷方法【推荐】，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随四海网的小编两巴掌来看看吧！

在我们的项目经常需要监听一些键盘事件来触发程序的执行，而Vue中允许在监听的时候添加关键修饰符：

代码如下：

<input v-on:keyup.13="submit">

对于一些常用键，还提供了按键别名：

代码如下：

<input @keyup.enter="submit">   <!-- 缩写形式 -->

全部的按键别名：

 .enter
 .tab
 .delete (捕获“删除”和“退格”键)
 .esc
 .space
 .up
 .down
 .left
 .right

修饰键：

 .ctrl
 .alt
 .shift
 .meta

代码如下：

<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

与按键别名不同的是，修饰键和 keyup 事件一起用时，事件引发时必须按下正常的按键。换一种说法：如果要引发 keyup.ctrl，必须按下 ctrl 时释放其他的按键；单单释放 ctrl 不会引发事件。

代码如下：

<!-- 按下Alt + 释放C触发 -->
<input @keyup.alt.67="clear">
<!-- 按下Alt + 释放任意键触发 -->
<input @keyup.alt="other">
<!-- 按下Ctrl + enter时触发 -->
<input @keydown.ctrl.13="submit">

对于elementUI的input，我们需要在后面加上.native, 因为elementUI对input进行了封装，原生的事件不起作用。

代码如下：

<input v-model="form.name" placeholder="昵称" @keyup.enter="submit">
<el-input v-model="form.name" placeholder="昵称" @keyup.enter.native="submit"></el-input>

 

总结

 

以上所述是小编给大家介绍的vue监听键盘事件的快捷方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对四海网网站的支持！

本文来自：http://www.q1010.com/184/5251-0.html

注：关于vue监听键盘事件的快捷方法【推荐】的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js