vue监听键盘事件的快捷方法【推荐】
程序员文章站
2022-06-16 23:04:23
在我们的项目经常需要监听一些键盘事件来触发程序的执行，而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监听键盘事件的快捷方法，希望对大家有所帮助