按键事件
一、在页面中使用
1、普通函数用法
在setup中编写 onKeyDown 和 onKeyUp 方法，并在return中返回此方法。
function onKeyDown(keyEvent: ESKeyEvent) {
//按键被按下
//处理业务逻辑
}
function onKeyUp(keyEvent: ESKeyEvent) {
//按键被抬起
//处理业务逻辑
}
return {
onKeyDown,
onKeyUp,
}
2、Hooks 函数用法
注意
@extscreen/es3-core" ≥ 1.2.6
@extscreen/es3-router ≥ 1.2.3
@extscreen/es3-vue ≥ 2.0.11
@extscreen/es3-vue-style-parser ≥ 2.0.0
@extscreen/es3-vue-css-loader ≥ 2.0.0
import { onKeyDown, onKeyUp } from "@extscreen/es3-vue";
onKeyDown((keyEvent: ESKeyEvent) => {
//按键被按下
//处理业务逻辑
})
onKeyUp((keyEvent: ESKeyEvent) => {
//按键被抬起
//处理业务逻辑
})
二、在组件中使用
在组件标签上监听事件keydown、keyup。
<div class='es-key-event-view-css' @keydown='onKeyDown' @keyup='onKeyUp' />
API
DataStructure
ESKeyEvent
按键事件
| Name | Description | Type | Default |
|---|---|---|---|
| action | 按键动作 | ESKeyAction | - |
| keyCode | 键值 | ESKeyCode | - |
| keyRepeat | 重复按键的次数 | number | - |
ESKeyAction
按键动作
| Name | Description | Type | Default |
|---|---|---|---|
| ES_KEY_ACTION_DOWN | 按下 | ESKeyAction | - |
| ES_KEY_ACTION_UP | 抬起 | ESKeyAction | - |
ESKeyCode
按键值
| Name | Description | Type | Default |
|---|---|---|---|
| ES_KEYCODE_ENTER | 回车键 | number | 66 |
| ES_KEYCODE_DPAD_CENTER | 导航键 确定键 | number | 23 |
| ES_KEYCODE_DPAD_UP | 导航键 向上 | number | 19 |
| ES_KEYCODE_DPAD_DOWN | 导航键 向下 | number | 20 |
| ES_KEYCODE_DPAD_LEFT | 导航键 向左 | number | 21 |
| ES_KEYCODE_DPAD_RIGHT | 导航键 向右 | number | 22 |
| ES_KEYCODE_BACK | 返回键 | number | 4 |
| ES_KEYCODE_ESCAPE | 回退键 | number | 111 |
| ES_KEYCODE_MENU | 菜单键 | number | 82 |
| ES_KEYCODE_SEARCH | 搜索键 | number | 84 |
Exposes
| Name | Description | Type |
|---|---|---|
| onKeyDown | 监听按键按下 | Function |
| onKeyUp | 监听按键抬起 | Function |