elementui keyup

监听键盘事件

在Element UI中监听键盘事件（如keyup）可以通过原生JavaScript或Vue的事件修饰符实现。Element UI组件本身不直接提供keyup事件，但可以通过组件的native修饰符或自定义指令实现。

使用原生事件绑定

对于Element UI的输入组件（如el-input），可以通过@keyup.native监听键盘事件：

<el-input v-model="inputValue" @keyup.native="handleKeyUp"></el-input>

methods: {
  handleKeyUp(event) {
    if (event.key === 'Enter') {
      console.log('Enter key pressed');
    }
  }
}

自定义按键修饰符

Vue允许通过@keyup结合按键修饰符监听特定按键。例如监听回车键：

<el-input v-model="inputValue" @keyup.enter="handleEnter"></el-input>

methods: {
  handleEnter() {
    console.log('Enter key pressed');
  }
}

全局键盘事件监听

若需监听全局键盘事件（如页面级快捷键），可在mounted钩子中添加事件监听：

mounted() {
  window.addEventListener('keyup', this.handleGlobalKeyUp);
},
beforeDestroy() {
  window.removeEventListener('keyup', this.handleGlobalKeyUp);
},
methods: {
  handleGlobalKeyUp(event) {
    if (event.ctrlKey && event.key === 's') {
      event.preventDefault();
      console.log('Ctrl+S pressed');
    }
  }
}

注意事项

• 事件冒泡：某些Element UI组件可能封装了原生事件，需通过.native修饰符访问原生DOM事件。
• 按键检测：使用event.key而非event.keyCode（已废弃）检测按键。
• 性能优化：全局事件监听需在组件销毁时移除，避免内存泄漏。