在你的button登录按钮写上@keyup.enter="login"
下面有两个
<input type="search" v-model="value_name" placeholder="请输入用户名"/>
<input type="password" v-model="value_pwd" placeholder="请输入密码"/>
<el-button @click="login" @keyup.enter="login">安全登录</el-button>
我们给他绑定了两个监听事件
methods: {
login() {
this.ip=localStorage.getItem('IP') //缓存
this.$router.push({path: "/main"});
if (this.value_name === "" || this.value_pwd === "") {
this.$message({
message: '用户名或者密码不允许为空',
type: 'warning'
});
} else {
this.axios({
method: 'post',
url: this.ip + '/Api/System/User/Login',
params: {
username: this.value_name,
password: this.value_pwd,
},
})
.then((res) => {
console.log(res.data.result.id)
localStorage.setItem('USERID', res.data.result.id)
if (res.data.message === null) {
this.$router.push({path: "/main"}); //成功跳转到main页面
this.$message({ //弹出登陆成功
showClose: true,
message: '登陆成功',
type: 'success'
});
this.value_name = "" //清空input
this.value_pwd = "" //清空input
localStorage.setItem('NAME', res.data.result.name) //把名字缓存传递到别的页面
} else {
this.$message.error("用户名密码错误")
}
})
.catch((err) => {
console.log(err)
this.$message.error("接口调用出错")
})
}
},
// 点击回车键登录
keyDown(e) {
// 回车则执行登录方法 enter键的ASCII是13
if (e.keyCode === 13) {
this.login(); // 定义的登录方法
}
},
},
mounted() {
// 绑定监听事件
window.addEventListener("keydown", this.keyDown);
},
destroyed() {
// 销毁事件
window.removeEventListener("keydown", this.keyDown, false);
},