vue enter回车键实现登录功能

使用回车键登录的逻辑是监听键盘事件的回车键（键盘事件可以使用keyup 或 keydown），当触发回车键时，则判定为登录提交。使用vue enter回车键事件实现登录需要注意，在vue里面使用window.keyup事件是全局事件，因为vue是单页面，所有的路由都会被触发，要解决这个问题需要使用vue的生命周期destroyed来销毁或者验证路由的方式。

生命周期销毁

在vue生命周期里面监听一个键盘事件，当触发键盘事件时则触发onSubmit函数，离开页面时将键盘事件的onSubmit函数传入销毁。

mounted(){
    window.addEventListener('keyup' ,this.onSubmit,false)
},
destroyed(){
    window.removeEventListener('keyup',this.onSubmit,false)
}

methods:{
    onSubmit(e){
        if (e.keyCode == 13 || e.keyCode == 100) {
            //回车
            
        }
    }
}

判断路由

网上也有一些关于vue enter回车键登录的不同写法。在触发键盘事件时，除了判断回车键，还判断当前的路由是否是登录。

mounted(){
    window.onkeyup = (e)=>{
        if (e.keyCode == 13 || e.keyCode == 100) {
            //除了验证是否是回车键，还要验证当前的路由是否为登录，防止全局触发登录提交。
            if(this.$router.path == '/login'){
                //登录提交
                ...
            }
        }
    }
}

实例

使用elementui框架来实现vue enter回车键登录。

<template>
    <div>
        <el-form :model="form" ref="form" @submit.native.prevent label-width="100px" class="demo-ruleForm">
            <el-form-item
                label="年龄"
                prop="age"
                :rules="rules"
            >
                <el-input v-model.number="form.age" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('form')">提交</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>

<script>
export default {
    data(){
        return{
            form:{
                age:''
            },
            rules:[
                { required: true, message: '年龄不能为空'},
                { type: 'number', message: '年龄必须为数字值'}
            ]
        }
    },
    mounted(){
        window.addEventListener('keyup' ,this.onSubmit,false)
    },
    destroyed(){
        window.removeEventListener('keyup',this.onSubmit,false)
    },
    methods:{
        onSubmit(e){
            if (e.keyCode == 13 || e.keyCode == 100) {
                this.submitForm('form');
            }
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                console.log('submit')
                this.$router.push('/')
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        }
    }
}
</script>

普通表单使用回车键提交，阻止表单提交@submit.prevent 。第三方插件阻止表单@submit.native.prevent

<template>
    <form @submit.native.prevent>
         <div><input v-model="form.age"/></div>
        <div><input v-model="form.sex"/></div>
        <div><button @click="onSubmit">提交</button></div>
    </form>
</template>
<script>
export default {
    data(){
        return{
            form:{
                age:'',
                sex:''
            },
        }
    },
    mounted(){
        window.addEventListener('keyup' ,this.onKey,false)
    },
    destroyed(){
        window.removeEventListener('keyup',this.onKey,false)
    },
    methods:{
        onKey(){
            if (e.keyCode == 13 || e.keyCode == 100) {
                this.onSubmit()
            }
        },
        onSubmit(e){
            //提交
            console.log(111)
        }
    }
}
</script>