elementui键盘
ElementUI 键盘事件处理
ElementUI 组件库本身并未提供专门的键盘事件处理功能，但可以通过原生 JavaScript 或 Vue 的事件绑定方式实现键盘交互。以下是几种常见的方法：
在 el-input 上监听键盘事件
ElementUI 的 el-input 组件支持原生 @keyup、@keydown 等事件，可以直接绑定方法：
<template>
<el-input
v-model="inputValue"
@keyup.enter="handleEnter"
@keydown.esc="handleEsc"
/>
</template>
<script>
export default {
methods: {
handleEnter() {
console.log("Enter 键被按下");
},
handleEsc() {
console.log("ESC 键被按下");
}
}
};
</script>全局键盘事件监听
如果需要监听全局键盘事件（如页面级快捷键），可以在 Vue 组件的生命周期中绑定：
<script>
export default {
mounted() {
window.addEventListener('keydown', this.handleKeyDown);
},
beforeDestroy() {
window.removeEventListener('keydown', this.handleKeyDown);
},
methods: {
handleKeyDown(event) {
if (event.key === 'Enter') {
console.log("全局 Enter 键被按下");
}
if (event.ctrlKey && event.key === 's') {
event.preventDefault(); // 阻止默认行为（如保存页面）
console.log("Ctrl + S 被按下");
}
}
}
};
</script>使用自定义指令
可以封装一个 Vue 自定义指令，方便在多个组件中复用键盘逻辑：
// main.js 或单独指令文件
Vue.directive('hotkey', {
bind(el, binding) {
el._keyHandler = function(e) {
if (e.key === binding.arg) {
binding.value(e);
}
};
window.addEventListener('keydown', el._keyHandler);
},
unbind(el) {
window.removeEventListener('keydown', el._keyHandler);
}
});使用方式：
<template>
<div v-hotkey:enter="handleEnter">按 Enter 触发</div>
</template>
<script>
export default {
methods: {
handleEnter() {
console.log("Enter 键通过指令触发");
}
}
};
</script>第三方库辅助
如果需要更复杂的快捷键管理，可以使用以下库：
- hotkeys-js：轻量级键盘事件库，支持组合键。
- vue-shortkey：Vue 专用的快捷键插件。
安装 hotkeys-js：
npm install hotkeys-js示例：
import hotkeys from 'hotkeys-js';
hotkeys('ctrl+shift+a', (event) => {
event.preventDefault();
console.log("Ctrl + Shift + A 被按下");
});常见键盘事件键值
| 键名 | 事件键值 |
|---|---|
| Enter | Enter |
| Esc | Escape |
| 空格 | ` ` |
| Ctrl | Control |
| Shift | Shift |
| Alt | Alt |
| 方向键 | ArrowUp 等 |
通过结合 ElementUI 组件和上述方法，可以灵活实现各种键盘交互需求。
