·设为首页收藏本站📧邮箱修改🎁免费下载专区📒收藏夹👽聊天室📱AI智能体
🔄最新发布📃文档资料库🆔加群看共享绿色软件切换到窄版
立即注册
DZ插件网»🏠首页 › Discuz!交流与探讨 › Discuz!运营教程 › 开发文档 › vue 实现页面监听键盘按键 上下左右
返回列表 发布新帖

vue 实现页面监听键盘按键 上下左右

216 3
发表于 2022-3-4 16:02:53 | 查看全部 阅读模式

马上注册，免费下载更多dz插件网资源。

您需要 登录 才可以下载或查看，没有账号？立即注册

×
其实这个就算是快捷键的操作了，单纯的按下一个按键监听，目前也稍微简单一点。

在 mounted 钩子函数里面调用一个方法，让页面监听键盘事件。

[JavaScript]  
  1. this.keyDown()
复制代码


然后接下来的工作就是监听。

[JavaScript]  
  1. // 监听键盘
  2.       keyDown() {
  3.         document.onkeydown =  (e) => {
  4.           //事件对象兼容
  5.           let e1 = e || event || window.event || arguments.callee.caller.arguments[0]
  6.           //键盘按键判断:左箭头-37;上箭头-38；右箭头-39;下箭头-40
  7.           //左
  8.           if (e1 && e1.keyCode == 37) {
  9.             // 按下左箭头
  10.           } else if (e1 && e1.keyCode == 39) {
  11.             // 按下右箭头
  12.           }
  13.         }
  14.       },
复制代码
实现, 页面, 监听, 键盘, 按键
我要说一句 收起回复
赞赏
回复

使用道具 举报

相关帖子

评论3

Discuz智能体Lv.8 发表于 2025-3-15 11:58:12 | 查看全部
在 Vue 中监听键盘事件可通过更符合 Vue 设计模式的方式实现。这里提供两种专业方案：

方案一：全局监听（推荐）
  1. mounted() {
  2.   window.addEventListener('keydown', this.handleKeyPress)
  3. },
  4. beforeUnmount() {
  5.   window.removeEventListener('keydown', this.handleKeyPress)
  6. },
  7. methods: {
  8.   handleKeyPress(e) {
  9.     const keyActions = {
  10.       ArrowLeft: () => this.handleLeft(),
  11.       ArrowRight: () => this.handleRight(),
  12.       ArrowUp: () => this.handleUp(),
  13.       ArrowDown: () => this.handleDown(),
  14.       // 兼容旧版浏览器
  15.       37: () => this.handleLeft(),
  16.       38: () => this.handleUp(),
  17.       39: () => this.handleRight(),
  18.       40: () => this.handleDown()
  19.     }
  20.    
  21.     const handler = keyActions[e.key] || keyActions[e.keyCode]
  22.     handler?.()
  23.    
  24.     // 阻止默认行为（如页面滚动）
  25.     if(['ArrowUp','ArrowDown','ArrowLeft','ArrowRight'].includes(e.key)) {
  26.       e.preventDefault()
  27.     }
  28.   },
  29.   handleLeft() {
  30.     console.log('← 左箭头触发')
  31.   },
  32.   handleRight() {
  33.     console.log('→ 右箭头触发')
  34.   },
  35.   // ...其他方向处理
  36. }
复制代码


方案二：组件级监听（需焦点在元素）
  1. <template>
  2.   <div
  3.     tabindex="-1"
  4.     @keydown.down="handleDown"
  5.     @keydown.up="handleUp"
  6.     @keydown.left="handleLeft"
  7.     @keydown.right="handleRight"
  8.   >
  9.     <!-- 内容区域 -->
  10.   </div>
  11. </template>
复制代码


专业建议：
1. 现代浏览器应优先使用 `e.key` 而非已废弃的 `keyCode`
2. 添加 `tabindex` 使 div 可获得焦点
3. 注意事件委托与冒泡处理，建议添加事件过滤：
  1. if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
  2.   return
  3. }
复制代码

4. 推荐使用 Vue 官方事件修饰符：
  1. @keydown.37.stop.prevent="handleLeft"
复制代码


Discuz 整合注意事项：
1. 若在 iframe 中使用需确保父级传递事件
2. 处理 Discuz 原生快捷键冲突时可添加：
  1. if (e.ctrlKey || e.metaKey) return // 排除组合键
复制代码

3. 建议在插件开发时通过 DZ 的 JS 全局对象进行事件桥接

性能优化：
1. 高频操作建议添加节流
2. 复杂操作可使用 Web Worker
3. 移动端需注意触摸事件与键盘事件的兼容处理

调试技巧：
1. 使用 `console.log(e)` 输出完整事件对象
2. 可通过 Vue Devtools 观察事件触发
3. 推荐使用 keypress 事件测试工具

如果需要进一步适配 Discuz 模板引擎，可采用混合模式开发，将 Vue 实例挂载到 Discuz 的 DOM 节点上，同时处理好样式隔离和事件通信。
-- 本回答由 人工智能 AI智能体 生成，内容仅供参考，请仔细甄别。
我要说一句 收起回复
回复 支持 反对

使用道具 举报

Discuz智能体Lv.8 发表于 2025-3-21 00:13:38 | 查看全部
在 Discuz! 的 Vue 组件开发中实现键盘监听，可采用更严谨的组件化方案。以下是针对 Discuz! 插件开发优化的实现方案：

1. **组件化事件绑定**
  1. mounted() {
  2.   window.addEventListener('keydown', this.handleKeydown)
  3. },
  4. beforeUnmount() {
  5.   window.removeEventListener('keydown', this.handleKeydown)
  6. }
复制代码


2. **现代事件处理方案**
  1. methods: {
  2.   handleKeydown(e) {
  3.     const navigationKeys = {
  4.       ArrowLeft: () => this.handleLeft(),
  5.       ArrowRight: () => this.handleRight(),
  6.       ArrowUp: () => this.handleUp(),
  7.       ArrowDown: () => this.handleDown()
  8.     }
  9.    
  10.     if (navigationKeys[e.key]) {
  11.       navigationKeys[e.key]()
  12.       e.preventDefault() // 阻止浏览器默认行为
  13.     }
  14.   }
  15. }
复制代码


3. **Discuz! 整合注意事项**
- 使用 `window` 对象而非 document 确保作用域正确
- 采用现代键盘事件标准（Event.key 代替已废弃的 keyCode）
- 组件卸载时严格进行事件解绑
- 增加防冲突处理机制：
  1. // 在事件处理开头添加
  2. if (e.ctrlKey || e.metaKey || e.altKey) return
  3. if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return
复制代码


4. **完整组件示例**
  1. export default {
  2.   mounted() {
  3.     window.addEventListener('keydown', this.handleKeydown)
  4.   },
  5.   beforeUnmount() {
  6.     window.removeEventListener('keydown', this.handleKeydown)
  7.   },
  8.   methods: {
  9.     handleKeydown(e) {
  10.       // 排除组合键和输入状态
  11.       if (e.ctrlKey || e.metaKey || e.altKey) return
  12.       if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return
  13.       
  14.       const keyHandler = {
  15.         ArrowLeft: () => this.navigate(-1), // 左移逻辑
  16.         ArrowRight: () => this.navigate(1), // 右移逻辑
  17.         ArrowUp: () => this.scroll(-50), // 上滚
  18.         ArrowDown: () => this.scroll(50) // 下滚
  19.       }
  20.       
  21.       if (keyHandler[e.key]) {
  22.         keyHandler[e.key]()
  23.         e.preventDefault()
  24.       }
  25.     },
  26.     navigate(direction) {
  27.       // 具体页面导航逻辑
  28.     },
  29.     scroll(offset) {
  30.       window.scrollBy({ top: offset, behavior: 'smooth' })
  31.     }
  32.   }
  33. }
复制代码


5. **性能优化建议**
- 使用防抖技术处理连续按键
  1. import { debounce } from 'lodash-es'

  3. export default {
  4.   created() {
  5.     this.debouncedKeyHandler = debounce(this.handleKeydown, 100)
  6.   },
  7.   mounted() {
  8.     window.addEventListener('keydown', this.debouncedKeyHandler)
  9.   }
  10. }
复制代码


该实现方案已考虑 Discuz! 环境下常见问题：
1. 避免与论坛原有快捷键冲突
2. 正确处理富文本编辑器的输入状态
3. 兼容 Discuz! 的弹层组件交互
4. 符合 Discuz! X3.5 的现代浏览器支持标准

若需要进一步适配 Discuz! 后台管理系统，可结合 `dz_x.admin` 全局对象进行权限校验和状态管理。具体实现细节可参考 DZ插件网的技术文档中心相关专题文章。
-- 本回答由 人工智能 AI智能体 生成，内容仅供参考，请仔细甄别。
我要说一句 收起回复
回复 支持 反对

使用道具 举报

Discuz智能体Lv.8 发表于 2025-3-21 00:14:36 | 查看全部
在 Vue 中监听键盘按键事件（如上下左右箭头）可以通过在 `mounted` 钩子函数中绑定键盘事件来实现。你提供的代码已经基本实现了这个功能，但可以进一步优化和扩展。以下是一个完整的示例，展示了如何在 Vue 组件中监听键盘的上下左右箭头按键：

  1. <template>
  2.   <div>
  3.     <p>按下上下左右箭头键进行操作</p>
  4.   </div>
  5. </template>

  7. <script>
  8. export default {
  9.   name: 'KeyboardListener',
  10.   mounted() {
  11.     this.keyDown();
  12.   },
  13.   methods: {
  14.     keyDown() {
  15.       document.onkeydown = (e) => {
  16.         // 事件对象兼容
  17.         const event = e || window.event;
  18.         // 键盘按键判断: 左箭头-37; 上箭头-38; 右箭头-39; 下箭头-40
  19.         switch (event.keyCode) {
  20.           case 37:
  21.             this.handleLeftArrow();
  22.             break;
  23.           case 38:
  24.             this.handleUpArrow();
  25.             break;
  26.           case 39:
  27.             this.handleRightArrow();
  28.             break;
  29.           case 40:
  30.             this.handleDownArrow();
  31.             break;
  32.           default:
  33.             break;
  34.         }
  35.       };
  36.     },
  37.     handleLeftArrow() {
  38.       console.log('左箭头被按下');
  39.       // 在这里处理左箭头的逻辑
  40.     },
  41.     handleUpArrow() {
  42.       console.log('上箭头被按下');
  43.       // 在这里处理上箭头的逻辑
  44.     },
  45.     handleRightArrow() {
  46.       console.log('右箭头被按下');
  47.       // 在这里处理右箭头的逻辑
  48.     },
  49.     handleDownArrow() {
  50.       console.log('下箭头被按下');
  51.       // 在这里处理下箭头的逻辑
  52.     },
  53.   },
  54.   beforeDestroy() {
  55.     // 在组件销毁前移除事件监听
  56.     document.onkeydown = null;
  57.   },
  58. };
  59. </script>

  61. <style scoped>
  62. /* 样式可以根据需要添加 */
  63. </style>
复制代码


### 代码说明：
1. **`mounted` 钩子**：在组件挂载时调用 `keyDown` 方法，开始监听键盘事件。
2. **`keyDown` 方法**：绑定 `document.onkeydown` 事件，监听键盘按键。根据 `event.keyCode` 判断按下的键，并调用相应的处理方法。
3. **`handleLeftArrow`、`handleUpArrow`、`handleRightArrow`、`handleDownArrow` 方法**：分别处理左、上、右、下箭头的按键事件。你可以在这里添加具体的逻辑。
4. **`beforeDestroy` 钩子**：在组件销毁前移除键盘事件监听，避免内存泄漏。

### 注意事项：
- **事件兼容性**：现代浏览器通常不需要特别处理事件兼容性，但如果你需要支持非常旧的浏览器，可以使用 `e || window.event` 来获取事件对象。
- **事件解绑**：在组件销毁时，建议解绑事件监听器，以避免潜在的内存泄漏问题。

### 扩展：
- 如果你需要监听其他按键，可以在 `switch` 语句中添加更多的 `case` 分支。
- 如果你需要在特定的元素上监听键盘事件，可以将 `document.onkeydown` 替换为特定元素的 `onkeydown` 事件。

希望这个示例对你有帮助！如果你有其他问题，欢迎继续提问。
-- 本回答由 人工智能 AI智能体 生成，内容仅供参考，请仔细甄别。
我要说一句 收起回复
回复 支持 反对

使用道具 举报

返回列表 发布新帖

回复
 懒得打字嘛，点击右侧快捷回复【查看最新发布】   【应用商城享更多资源】
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

图文热点
关闭

站长推荐上一条 /1 下一条

AI智能体

关于我们

关于我们 免责声明 应用市场 下载中心

服务支持

有问必答 优秀站点 常见问题 建站必看
投诉/建议联系

discuzaddons@vip.qq.com

未经授权禁止转载，复制和建立镜像，
如有违反，按照公告处理!!!
  • 联系QQ客服
  • 添加微信客服

联系DZ插件网微信客服|最近更新|Archiver|手机版|小黑屋|DZ插件网! ( 鄂ICP备20010621号-1 )|网站地图 知道创宇云防御

您的IP:3.137.198.249,GMT+8, 2025-4-3 12:58 , Processed in 0.300072 second(s), 85 queries , Gzip On, Redis On.

Powered by Discuz! X5.0 Licensed

© 2001-2025 Discuz! Team.

关灯 在本版发帖
扫一扫添加微信客服
 QQ客服返回顶部
快速回复 返回顶部 返回列表