Vue常用的按键别名
- 回车=>enter
- 删除=>delete(捕获“删除”和“空格”键)
- 退出=>esc
- 空格=>space
- 换行=>tab (特殊:必须配合keydown使用)
- 上=>up
- 下=>down
- 左=>left
- 右=>right
别名使用案例
<div id="root">
<!-- 别名 -->
<input @keyup.right="showInfo"/>
</div>
<script>
const vm = new Vue({
el:"#root",
methods: {
showInfo(e){
console.log(e.key,e.keyCode);
console.log(e.target.value);
},
},
})
</script>
注意
- Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)
- 系统修饰键(用法特殊):ctrl、alt、shift、meta
(1)配合keyup使用,按下修饰键的同时,再按下其它键,随后释放其它键,事件才被触发
(2)配合keyup使用并拼接指定按键使用 javascript <input @keyup.ctrl.y="showInfo"/>
(3)配合keydown使用,正常触发事件 - 也可以使用keyCode去指定具体的按键(不推荐)
javascript <input @keyup.13="showInfo"/>
- Vue.config.keyCodes自定义键名 = 键码,可以去定制按键别名
<div id="root"><input @keyup.huiche="showInfo"/></div>
<script>
Vue.config.keyCodes.huiche = 13;
const vm = new Vue({
el:"#root",
methods: {
showInfo(e){
console.log(e.key,e.keyCode);
},
},
})
</script>
- 并不是键盘所有按键都可以绑定事件(eg:调节音量键)