vue中键盘事件的处理

一、常见的键盘事件

• 1、keydown键盘按下
• 2、keyup键盘抬起

补充说明:如果要确定用户按下是哪个键盘需要使用keyCode===?来确认键盘

二、在vue中键盘事件一般的使用

• 1、在模板中定义事件名称,并传递$event作为参数

  <input type="text" placeholder="请输入书名" ref="inputBook" @keydown="submit($event)"/>

  • 1

• 2、在js中确认键盘按键进行相对于的操作

  methods:{
      submit(e){
          // key.Code === 13表示回车键 
          if(e.keyCode === 13){
              //逻辑处理
          }
      }
  }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

三、使用vue的语法糖进行键盘事件操作

• 1、在模板

  <input type="text" placeholder="请输入书名" ref="inputBook" @keydown.13="submit"/>

  • 1

• 2、在js中直接使用函数

  methods:{
      submit(){
          // 业务逻辑处理
      }
  }

  • 1
  • 2
  • 3
  • 4
  • 5

四、阻止事件冒泡

只需要@click改成@click.stop="?" 即可

五、阻止默认事件

只需要@click改成@click.prevent="?"即可