@keyup.enter:按下回车触发
@keyup.delete:按下删除触发
@keyup.esc:按下esc触发
@keyup.space:按下空格触发
@keyup.tab:按下tab触发
@keyup.down:按下 ↓ 触发
@keyup.w:按下w触发
@keyup.alt.c:按下alt+c触发
备注:也可以使用keyCode去指定具体的按键(不太推荐)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue基础</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>
<body>
<div id="root">
<!--
TODO:
1.Vue中常用的按键别名(牢牢掌握):
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab(必须配 合keydown才有效果)
上 => up
下 => down
左 => left
右 => right
2.备注:也可以使用keyCode去指定具体的按键(不太推荐)
-->
<!-- TODO:
如果用了封装组件的话,比如Element-ui,使用按键修饰符需要加上.native
例如 <el-input
v-model.trim="searchForm.id"
size="medium"
placeholder="请输入渠道编号"
clearable
@keyup.enter.native="$refs.tableSys.handleSearch()"
/>
-->
<input type="text" placeholder="按下回车提示输入" @keyup.enter="keyModifier"/><br />
<input type="text" placeholder="按下回车提示输入" @keyup.13="keyModifier"/><br />
<input type="text" placeholder="按下删除提示输入" @keyup.delete="keyModifier"/><br />
<input type="text" placeholder="按下esc提示输入" @keyup.esc="keyModifier"/><br />
<input type="text" placeholder="按下空格提示输入" @keyup.space="keyModifier"/><br />
<input type="text" placeholder="按下tab提示输入" @keyup.tab="keyModifier"/><br />
<input type="text" placeholder="按下↓提示输入" @keyup.down="keyModifier"/><br />
<input type="text" placeholder="按下w提示输入" @keyup.w="keyModifier"/><br />
<input type="text" placeholder="按下alt+c提示输入" @keyup.alt.67="keyModifier"/>
<input type="text" placeholder="按下alt+c提示输入" @keyup.alt.c="keyModifier"/>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el: '#root',
methods: {
keyModifier() {
console.log(event.target.value);
},
},
});
</script>
</body>
</html>