Vue按键修饰符

1.常用按键别名

  • .enter
  • .tab
  • .delete (捕获"Delete"和"Backspace"两个按键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

2.使用方法

javascript 复制代码
<!-- 仅在 `key` 为 `Enter` 时调用 `submit` -->
<input @keyup.enter="submit" />

其他按键同理,如果想要添加的按键不在常用按键里面,还可以直接使用 KeyboardEvent.key 暴露的按键名称作为修饰符,但需要转为 kebab-case 形式。

javascript 复制代码
<input @keyup.page-down="onPageDown" />

3.系统按键修饰符

  • .ctrl
  • .alt
  • .shift
  • .meta(windows为win键,mac为command键)

4.组合键

javascript 复制代码
<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + 点击 -->
<div @click.ctrl="doSomething">Do something</div>

5.exact修饰符

.exact 修饰符允许精确控制触发事件所需的系统修饰符的组合

javascript 复制代码
<!-- 当按下 Ctrl 时,即使同时按下 Alt 或 Shift 也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 仅当按下 Ctrl 且未按任何其他键盘键时才会触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 仅当没有按下任何系统按键时触发 -->
<button @click.exact="onClick">A</button>

//tips:这里应该还是要click的

6.鼠标按键修饰符

  • .left
  • .right
  • .middle
相关推荐
文心快码BaiduComate10 分钟前
WAVE SUMMIT深度学习开发者大会2025举行 文心大模型X1.1发布
前端·后端·程序员
babytiger10 分钟前
python 通过selenium调用chrome浏览器
前端·chrome
passer98117 分钟前
基于webpack的场景解决
前端·webpack
华科云商xiao徐24 分钟前
Java并发编程常见“坑”与填坑指南
javascript·数据库·爬虫
奶昔不会射手30 分钟前
css3之grid布局
前端·css·css3
举个栗子dhy34 分钟前
解决在父元素上同时使用 onMouseEnter和 onMouseLeave时导致下拉菜单无法正常展开或者提前收起问题
前端·javascript·react.js
Coding_Doggy40 分钟前
苍穹外卖前端Day1 | vue基础、Axios、路由vue-router、状态管理vuex、TypeScript
前端
前端与小赵40 分钟前
vue3和vue2生命周期的区别
前端·javascript·vue.js