在Vue中实现回车事件

为登录绑定回车事件

在Vue2中为登录事件绑定回车事件实现登录的功能

只需要给登录按钮点击两个方法，一个原生的点击登录方法，一个自定义的方法

示例代码如下：

<template>
	<a-button type="primary" size="large" @click="login" @keyup.enter="enterSearch" style="margin-top: 5px;margin-left: 40%;">登录</a-button>
</template>

<script>
export default {
    methods: {
        login() {
            if (this.msg.mobile != '' && this.msg.password != '') {
                reqGetLogin(this.msg).then((res) => {
                    this.msg.mobile = ''
                    this.msg.password = ''
                    this.code = res.code
                    if (res.code == 0) {
                        localStorage.setItem('token', res.data.auth_token)
                        localStorage.setItem('name', res.data.name)
                        this.$message.success('登录成功');
                        this.$router.push('/home/robotManage')
                    } else {
                        this.$message.error('账号或密码不正确');
                    }
                })
            }
            if (this.msg.mobile == '' || this.msg.password == '') {
                this.$message.error('账号或密码不能为空');
            }
        },
        enterSearch() {
            document.onkeydown = e => {
                console.log(e);
                //13表示回车键，baseURI是当前页面的地址，为了更严谨，也可以加别的，可以打印e看一下
                // match(此处应填写文件在浏览器中的地址，如 '/login')，不写的话，其他页面也会有调用回车按下的方法
                if (e.keyCode === 13 && e.target.baseURI.match(/login/)) {
                    //回车后执行搜索方法
                    this.login()
                }
            }
        }
    },
    created() {
        //    一定要在create里面执行一下写的回车事件enterSearch(),否则会执行不了
        this.enterSearch()
    },
};
</script>

这样就可以实现点击按钮和按下回车登录了