之前用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);
},
},
};
0 个回复