vue监听键盘事件中的按键

在Vue中,已经为常用的按键设置了别名,这样我们就无需再去匹配keyCode,直接使用别名就能监听按键的事件。

<input @keyup.enter="function">
别名实际键值
.deletedelete(删除)/BackSpace(退格)
.tabTab
.enterEnter(回车)
.escEsc(退出)
.spaceSpace(空格键)
.leftLeft(左箭头)
.upUp(上箭头)
.rightRight(右箭头)
.downDown(下箭头)
.ctrlCtrl
.altAlt
.shiftShift
.meta(window系统下是window键,mac下是command键)

另外,Vue中还支持组合写法:

组合写法按键组合
@keyup.alt.67=”function”Alt + C
@click.ctrl=”function”Ctrl + Click

但是,如果是在自己封装的组件或者是使用一些第三方的UI库时,会发现并不起效果,这时就需要用到.native修饰符了,如:

<el-input
  v-model="inputName"
  placeholder="搜索你的文件"
  @keyup.enter.native="searchFile(params)"
  >
</el-input>

如果遇到.native修饰符也无效的情况,可能就需要用到$listeners了,具体用法请参考Vue官方文档:将原生事件绑定到组件.

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值