Vue中的按键别名():
-
回车 =>
enter
-
删除 =>
delete
(退格 、 删除 按键) -
退出 =>
esc
-
空格 =>
space
-
换行 =>
tab
(必须配合keydown
去使用) -
上 =>
up
-
下 =>
down
-
左 =>
left
-
右 =>
right
如果没有内置别名可以组合:
- 组合类 =>
shift + tab
监听事件:
keydown
:当用户按下任意键时触发。keyup
:当用户释放任意键时触发。keypress
:当字符键被按下并松开时触发。注意,此事件对于非字符键(如箭头键、功能键等)可能不会触发。
例如:
html
<!-- 在输入框元素上绑定不同键盘事件 -->
<input
type="text"
@keyup.enter="onEnterKeyPressed"
@keydown.delete="onDeleteKeyPressed"
@keydown.shift.tab="onShiftTabPressed"
@keydown.esc="onEscPressed"
@keydown.space="onSpaceBarPressed"
@keydown.arrow-up="onArrowUp"
@keydown.arrow-down="onArrowDown"
@keydown.arrow-left="onArrowLeft"
@keydown.arrow-right="onArrowRight"
>
<script>
// 在 Vue 实例的 methods 对象中定义相应的事件处理函数
new Vue({
el: '#app',
methods: {
onEnterKeyPressed(event) {
console.log('回车键被按下并释放');
// 可以在此处执行特定逻辑
},
onDeleteKeyPressed(event) {
console.log('退格键被按下');
// 删除操作或其他逻辑
},
onShiftTabPressed(event) {
if (event.shiftKey && event.key === 'Tab') {
console.log('Shift+Tab 组合键被按下');
// 处理换行或焦点切换逻辑
}
},
onEscPressed(event) {
console.log('ESC 键被按下');
// 可能用于关闭弹窗等操作
},
onSpaceBarPressed(event) {
console.log('空格键被按下');
// 执行与空格键相关的功能
},
onArrowUp(event) {
console.log('向上箭头键被按下');
// 滚动、导航等操作
},
onArrowDown(event) {
console.log('向下箭头键被按下');
// 同样可用于滚动或导航
},
onArrowLeft(event) {
console.log('向左箭头键被按下');
// 左侧导航或调整
},
onArrowRight(event) {
console.log('向右箭头键被按下');
// 向右导航或调整
},
},
});
</script>