vue绑定快捷键

比如我们要在某个页面绑定一个ctrl+s的快捷键
因为防止按下快捷键触发多次的情况,所以需要将keydown和keyup都绑定

1.在js全局设定一个变量

var flag = true

2.在methods里面写入两个新函数

handleKeyDown(e) {
    var key = window.event.keyCode ? window.event.keyCode : window.event.which
    if( key === 13 ){
        if(flag)
        {
            this.submitForm()
            flag = false
        }
        e.preventDefault() //取消浏览器原有的ctrl+s操作
    }
},
handleKeyUp(e) {
     // enter
     var key = window.event.keyCode ? window.event.keyCode : window.event.which
     if( key === 13 ){
         flag = true
         e.preventDefault()
     }
 }

3.在created周期中绑定EventListener

created() {
    document.addEventListener('keydown', this.handleKeyDown)
    document.addEventListener('keyup', this.handleKeyUp)
}

4.一定要记得在离开页面时销毁EventListener,否则快捷键会一直绑定

destroyed() {
   document.removeEventListener('keydown', this.handleKeyDown)
   document.removeEventListener('keyup', this.handleKeyUp)
},
  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值