talentisan
talentisan
  • 发布:2025-03-06 14:03
  • 更新:2025-03-06 14:03
  • 阅读:61

uniappx封装键盘监听事件

分类:uni-app x

之前用nvue封装过一个(代码如下)、现在用uniappx 发现完全不一样了,会的兄弟帮一把

export default {
data() {
return {
// 按键码常量
KEY_CODES: {
UP: 19,
DOWN: 20,
LEFT: 21,
RIGHT: 22,
ENTER: 23,
BACK: 4,
HOME: 3,
MENU: 82,
VOLUME_UP: 24,
VOLUME_DOWN: 25,
},
};
},
onReady() {
this.addKeyListener();
},
beforeDestroy() {
this.removeKeyListener();
},
methods: {
addKeyListener() {
// 添加按键监听
plus.key.addEventListener("keydown", this.handleKeyEvent);

  // 添加返回按键监听  
  plus.key.addEventListener("backbutton", this.handleBackButtonEvent);  
},  
removeKeyListener() {  
  // 移除按键监听  
  plus.key.removeEventListener("keydown", this.handleKeyEvent);  

  // 移出返回按键监听  
  plus.key.removeEventListener("backbutton", this.handleBackButtonEvent);  
},  
// 处理按键事件  
handleKeyEvent(event) {  
  const keyCode = event.keyCode || event.which;  
  // 调用具体的按键处理方法  
  switch (keyCode) {  
    case this.KEY_CODES.UP:  
      this.onKeyUp?.(event);  
      break;  
    case this.KEY_CODES.DOWN:  
      this.onKeyDown?.(event);  
      break;  
    case this.KEY_CODES.LEFT:  
      this.onKeyLeft?.(event);  
      break;  
    case this.KEY_CODES.RIGHT:  
      this.onKeyRight?.(event);  
      break;  
    case 66: // 电脑return键 = 66  
    case this.KEY_CODES.ENTER:  
      this.onKeyEnter?.(event);  
      break;  
    case this.KEY_CODES.BACK:  
      // if (this.onKeyBack?.(event) !== false) {  
      //    // 如果没有处理返回键,则阻止默认行为  
      //    event.preventDefault();  
      // }  
      break;  
    default:  
      this.onKeyOther?.(keyCode, event);  
  }  
},  
// 定义一个命名的事件处理函数  
handleBackButtonEvent(event) {  
  this.onKeyBack(event);  
},  

},
};

2025-03-06 14:03 负责人:无 分享
已邀请:

要回复问题请先登录注册