Vue绑定键盘按键并触发事件

Vue绑定键盘按键并触发事件

最后修改时间:7 months ago

在Vue中绑定键盘按键,并触发事件

问题描述: 在做项目的时候遇到 使用键盘的左右键来翻页的功能,一开始想当然的使用JS的绑定键盘事件发现并不好用 在Vue中要借用$nextTick来处理一下

created() {
    //监听左右箭头按键的键盘按下事件
    this.$nextTick(() => {
      document.onkeydown = (e) => {
        if (e.keyCode == 39 && this.currentPage < this.pageCount) {
          //这是右箭头,
          this.currentPage++; 
        } else if (e.keyCode == 37 && this.currentPage > 1) {
          //这是左箭头,
          this.currentPage--; 
        }
      };
    });
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

左右键分别是37和39

# 附加:

键盘对应的键码值

1619676179984

表一

1619676338954

表二

1619676401949

表三

1619676421157

表四

亲测有效,奔走相告!

- 全文完 -

留下一条留言?
默认颜色

主题颜色

标准颜色

更多颜色...