Vue 全局监听键盘事件（在项目中使用键盘左右键控制翻页）

本文链接：https://blog.csdn.net/qq_45689821/article/details/117958964

Vue 全局监听键盘事件（在项目中使用左右键控制翻页）

想法
实现方法

想法

此段可略过，直接看后面如何实现的

页面结构：

有一个含有表格的父组件，表格利用iView里的 <i-table> 和 render 函数实现的，表格中含有一个显示按钮，点击后会出现一个 <Drawer> 的抽屉，其中，这个抽屉由于在项目中多次用到，被我封装成了一个 <charts> 组件，抽屉中左侧为详细信息的数据，右侧是用 echarts实现的折线图等。点击父组件的按钮，出现抽屉，显示对应那一条数据的详细信息和图表等。

待实现功能：

我在子组件中添加了左右两个按钮，希望点击按钮可以实现不用返回父组件页面就能切换下一条数据的信息和图表。
同时，点击键盘的左右键可以同时实现这一项功能。

实现方法

在父组件中利用生命周期函数 mounted()，全局监听键盘左右键事件：

mounted () {
   // 全局监听键盘左右键事件
   var _this = this
   document.onkeyup = function (e) {
     if (e.code === 'ArrowLeft') {
       console.log('arrowleft')
       // pageUp() 和 pageDown()是具体实现的函数
       _this.pageUp()
     } else if (e.code === 'ArrowRight') {
       console.log('arrowright')
       _this.pageDown()
     }
   }
},

在Vue中，取消了键盘码，用名字代替，如 e.code === 'ArrowLeft' 代表的就是左键，其他名字可以在控制台打印出自己想要的按键名，或直接参照菜鸟教程.

在实现该功能之前绘制图表的参数依靠表格的属性params.row，现在改为直接从后端获取的数据searchData。searchData总体上是一个数组，利用searchData可以实现切换下一条，而params.row仅为当前条，无法实现切换，缺点是searchData没有像params.row一样的索引，先获取到params.row的索引，再为searchData的每一项都添加index索引值即可实现切换上下条数据

triggerFetchChart () {
  // 为searchData添加索引值
  for (let item in this.searchData) {
    this.searchData[item].index = parseInt(item)
  }
  this.paramsPassChild = this.searchData
  // 向子组件传图表要用到的参数和当前条数据的索引值
  this.$refs.fetchChart.fetchChart(this.paramsPassChild, this.currentRow)
},

在触发左右键时，将当前条数据的索引值加一或减一，不要忘记判断前面或后面没有数据了的情况：

pageUp () {
  console.log('pageUp')
  // 切换为上一行的参数,传给子组件
  this.currentRow--
  if (this.currentRow > 0) {
    this.triggerFetchChart()
  } else {
    this.$message('到头啦')
  }
},
pageDown () {
  console.log('pageDown')
  // 切换为下一行的参数,传给子组件
  this.currentRow++
  if (this.currentRow < this.searchData.length) {
    this.triggerFetchChart()
  } else {
    this.$message('到尾啦')
  }
}