vue 键盘监听事件如何区分移动端和pc端

Vue 可以通过检测浏览器的 user agent（`navigator.userAgent`）来区分移动端和 PC 端。以下是一个简单的实现方法。

首先，在 Vue 组件中，可以使用通过 `mounted` 生命周期函数来监听页面的加载完成，然后访问全局的 `navigator.userAgent` 字符串：

mounted () {
  if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    // 移动端逻辑
    // 例如，在移动端监听 touchstart 事件
    document.addEventListener('touchstart', this.handleTouchEvent)
  } else {
    // PC 端逻辑
    // 例如，在 PC 端监听 keydown 事件
    document.addEventListener('keydown', this.handleKeyDown)
  }
}

在上述代码中，我们通过正则表达式检测 `navigator.userAgent` 字符串中是否包含移动设备的关键字，例如 `"Android"`、`"iPhone"` 等。如果匹配成功，则可以判断为移动端。否则，就可以判断为 PC 端。

在移动端逻辑中，可以监听移动端的触摸事件（如 `touchstart`、`touchmove`、`touchend` 等）来实现相应的键盘事件监听。在 PC 端逻辑中，则可以监听键盘事件（如 `keydown`、`keyup` 等）。

最后，需要在组件销毁时，也就是通过 `beforeDestroy` 生命周期函数，移除事件监听器，以免造成内存泄漏：

beforeDestroy () {
  if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    document.removeEventListener('touchstart', this.handleTouchEvent)
  } else {
    document.removeEventListener('keydown', this.handleKeyDown)
  }
}

通过以上逻辑，我们可以区分移动端和 PC 端，并实现相应的键盘事件监听。