vue.js 添加键盘回车事件

 

方法一： 

现在需要给登录按钮添加一个键盘回车事件，只要一按回车键就会触发登录的方法。

//登录html 部分

    

        
登录 
          
    

//登录js

created() {//创建后挂载
    
      var _this = this;

            document.onkeydown = function(e){

                var key = window.event.keyCode;

                if(key == 13){

                    _this.submitForm('FormData');//登录的方法

                }

            }
  },

//登录的方法
  submitForm(formName) { 
    
      this.$refs[formName].validate(valid => {
        if (valid) {
       
       //调用登录接口，提交登录数据
        //这里执行登录成功的回调
        

      }else{
       console.log("error submit!!");
          return false;
      }
   
    },

方法二：

给登录的input框回车事件，触发登录的方法。

如果是原生的input，使用 @keyup.enter就可以，若是使用了element-ui，则要加上native限制符，因为element-ui把input进行了封装，原事件就不起作用了，代码如下：

最后附上一下常用键：

@keyup.13 回车

@keyup.enter 回车

@keyup.left 左键

@keyup.right 右键

@keyup.up 上键

@keyup.down 下键

@keyup.delete 删除键(捕获 “删除” 和 “退格” 键)

还有一些组合键：

@keyup.ctrl

@keyup.alt

@keyup.shift

@keyup.meta(window系统下是window键，mac下是command键)

Alt + C :

Ctrl + Click :

点我