Vue键盘按键别名/事件说明及案例

Vue中的按键别名():

  • 回车 => enter

  • 删除 => delete (退格 、 删除 按键)

  • 退出 => esc

  • 空格 => space

  • 换行 => tab (必须配合keydown去使用)

  • 上 => up

  • 下 => down

  • 左 => left

  • 右 => right

如果没有内置别名可以组合:

  • 组合类 => shift + tab

监听事件:

  • keydown:当用户按下任意键时触发。
  • keyup:当用户释放任意键时触发。
  • keypress:当字符键被按下并松开时触发。注意,此事件对于非字符键(如箭头键、功能键等)可能不会触发。

例如:

html 复制代码
<!-- 在输入框元素上绑定不同键盘事件 -->
<input 
    type="text" 
    @keyup.enter="onEnterKeyPressed" 
    @keydown.delete="onDeleteKeyPressed" 
    @keydown.shift.tab="onShiftTabPressed"
    @keydown.esc="onEscPressed"
    @keydown.space="onSpaceBarPressed" 
    @keydown.arrow-up="onArrowUp" 
    @keydown.arrow-down="onArrowDown" 
    @keydown.arrow-left="onArrowLeft"
    @keydown.arrow-right="onArrowRight"
>

<script>
// 在 Vue 实例的 methods 对象中定义相应的事件处理函数
new Vue({
  el: '#app',
  methods: {
    onEnterKeyPressed(event) {
      console.log('回车键被按下并释放');
      // 可以在此处执行特定逻辑
    },
    onDeleteKeyPressed(event) {
      console.log('退格键被按下');
      // 删除操作或其他逻辑
    },
    onShiftTabPressed(event) {
      if (event.shiftKey && event.key === 'Tab') {
        console.log('Shift+Tab 组合键被按下');
        // 处理换行或焦点切换逻辑
      }
    },
    onEscPressed(event) {
      console.log('ESC 键被按下');
      // 可能用于关闭弹窗等操作
    },
    onSpaceBarPressed(event) {
      console.log('空格键被按下');
      // 执行与空格键相关的功能
    },
    onArrowUp(event) {
      console.log('向上箭头键被按下');
      // 滚动、导航等操作
    },
    onArrowDown(event) {
      console.log('向下箭头键被按下');
      // 同样可用于滚动或导航
    },
    onArrowLeft(event) {
      console.log('向左箭头键被按下');
      // 左侧导航或调整
    },
    onArrowRight(event) {
      console.log('向右箭头键被按下');
      // 向右导航或调整
    },
  },
});
</script>
相关推荐
魔云连洲15 小时前
React中的合成事件
前端·javascript·react.js
人工智能训练师15 小时前
在Ubuntu中如何使用PM2来运行一个编译好的Vue项目
linux·运维·服务器·vue.js·ubuntu·容器
浩星16 小时前
iframe引入界面有el-date-picker日期框,点击出现闪退问题处理
前端·vue.js·elementui
唐•苏凯17 小时前
ArcGIS Pro 遇到严重的应用程序错误而无法启动
开发语言·javascript·ecmascript
萌萌哒草头将军17 小时前
🚀🚀🚀 Oxc 恶意扩展警告;Rolldown 放弃 CJS 支持;Vite 发布两个漏洞补丁版本;Rslib v0.13 支持 ts-go
前端·javascript·vue.js
接着奏乐接着舞。17 小时前
3D地球可视化教程 - 第1篇:基础地球渲染系统
前端·javascript·vue.js·3d·three.js
薄雾晚晴17 小时前
Rspack 实战:用 SWC Loader 搞定 JS 兼容(支持 IE 11 + 现代浏览器,兼顾构建速度)
前端·vue.js
薄雾晚晴17 小时前
Rspack 实战:用 image-minimizer-webpack-plugin 做图片压缩,优化打包体积
javascript·vue.js
niuhuahua17 小时前
大模型流式聊天,实时对话,快捷问题选项
vue.js
JIngJaneIL17 小时前
汽车租赁|基于Java+vue的汽车租赁系统(源码+数据库+文档)
java·vue.js·spring boot·汽车·论文·毕设·汽车租赁系统