怎么把网站设置为主页面装潢设计培训中心

vue2 elementUI 登录页面实现回车提交登录的方法

方法一

局部回车事件

在el-form 上增加 @keyup.enter.native=“login”，当焦点在form中任意控件上时，按回车事件生效。

方法二

全局回车事件

增加生命周期函数mounted()注册监听事件（addEventListener）和beforeDestroy()销毁监听事件（removeEventListener），在method中自定义函数globalKeyupHandler(event) ，在其中响应事件即可。

实现方法请参照如下源码

<template><div class="login"><div class="box"><div class="chunk"><span>欢迎登录</span><p>{{ store.sys.company }}</p></div><div class="form"><div class="title"><span>{{ store.sys.name }}</span><small>{{ store.sys.slogan }}</small></div><el-form :model="form" :rules="rules" ref="form"  @keyup.enter.native="login"><el-form-item prop="user"><el-input size="medium" type="text" v-model="form.user" prefix-icon="el-icon-user" placeholder="请输入用户账号|手机号"autofocus clearable></el-input></el-form-item><el-form-item prop="pwd"><el-input size="medium" type="password" v-model="form.pwd" prefix-icon="el-icon-lock" placeholder="请输入用户密码"show-password clearable></el-input></el-form-item><el-form-item class="captchaGroup" pro="captcha"><el-row :gutter="10"><el-col :span="13"><el-input size="medium" type="text" v-model="form.captcha" prefix-icon="el-icon-key"placeholder="请输入验证码" clearable></el-input></el-col><el-col :span="10"><img title="点击可刷新验证码" ref="captcha" @click="getCaptcha"></img></el-col></el-row></el-form-item><el-button size="medium" type="primary" class="btn" @click="login">安全登录</el-button><p class="tip">{{ store.sys.notice_login }}</p></el-form></div></div><div class="footer">ERP {{ store.base.ver }} | Copyright ©<a :href="store.base.webSite" target="_blank">{{store.base.copyright}}</a><a href="https://beian.miit.gov.cn/" target="_blank" style="margin-left:10px;">{{store.sys.icp}}</a><!-- <a  style="height: 24px; margin-left: 10px;"  href='https://gitee.com/ntlhqk' target="_blank"><img src='https://gitee.com/star.svg?theme=dark' alt='star'></img></a> --></div></div>
</template>
<script>
export default {name: "Login",data() {return {form: {user: "",pwd: "",uuid: "",},rules: {user: {required: true,message: "请输入用户账号|手机号",trigger: "blur",},pwd: {required: true,message: "请输入用户密码",trigger: "blur",},},};},created() {//获取运行数据this.getCaptcha();this.getRunData();},computed: {store() {return this.$store.state;},},mounted() {window.addEventListener('keyup', this.globalKeyupHandler);},beforeDestroy() {window.removeEventListener('keyup', this.globalKeyupHandler);},methods: {globalKeyupHandler(event) {if (event.key === 'Enter') {// 触发登录// this.login();}},getCaptcha() {this.$axios.post("api/captcha", this.form).then((result) => {if (result.state == "success") {this.form.code = "";this.form.uuid = result.info.uuid;this.$refs.captcha.src = result.info.data;} else if (result.state == "error") {this.$message({type: "warning",message: result.info,});} else {this.$message({type: "error",message: "[ ERROR ] 服务器响应超时!",});}});},//登录login() {this.$refs["form"].validate((valid) => {if (valid) {this.$axios.post("api/login", this.form).then((result) => {if (result.state == "success") {this.$store.commit("upState", {key: "user",val: result.info,});this.$store.commit("upState", {key: "token",val: result.token,});this.$router.push("/home");} else if (result.state == "error") {this.$message({type: "warning",message: result.info,});} else {this.$message({type: "error",message: "[ ERROR ] 服务器响应超时!",});}});}});},//获取运行数据getRunData() {this.$axios.post("api/runData").then((result) => {if (result.state == "success") {this.$store.commit("upState", {key: "sys",val: result.info.sys,});this.$store.commit("upState", {key: "base.ver",val: result.info.ver,});if (result.info.login == true) {this.$router.push("/home");}} else if (result.state == "error") {this.$message({type: "warning",message: result.info,});} else {this.$message({type: "error",message: "[ ERROR ] 服务器响应超时!",});}});},},
};
</script>
<style scoped>
.login {position: absolute;background: #2d3135;width: 100vw;height: 100vh;background: url(/static/images/login/bg.png);background-repeat: no-repeat;background-size: cover;
}.box {display: flex;width: 860px;height: 460px;margin: 0 auto;margin-top: 16vh;position: relative;z-index: 2;box-shadow: 0 0 16px 8px #1261c1;
}.form {flex: 1;background: #fff;padding: 62px 0;border-top-right-radius: 4px;border-bottom-right-radius: 4px;
}.title>span {font-size: 20px;display: block;text-align: center;color: #5c5f68;line-height: 36px;font-weight: bold;letter-spacing: 2px;
}.title>small {display: block;text-align: center;color: #888;line-height: 24px;letter-spacing: 1px;
}.form .el-form {width: 320px;margin: 0 auto;margin-top: 24px;
}.el-form-item {margin-bottom: 24px;
}.el-form>>>.el-form-item__error {padding: 4px 0;
}.captchaGroup {display: flex;display: none;
}.captchaGroup .el-input {margin-right: 12px;
}.captchaGroup img {width: auto;height: 36px;border: 1px solid #DDD;box-sizing: border-box;border-radius: 4px;cursor: pointer;
}.btn {width: 100%;
}.chunk {width: 320px;text-align: center;background: url("/static/images/login/chunk.png");background-repeat: no-repeat;background-size: cover;border-top-left-radius: 4px;border-bottom-left-radius: 4px;
}.chunk span {color: #fff;display: block;margin-top: 45%;font-size: 24px;line-height: 36px;
}.chunk p {color: #d1d1d1;line-height: 32px;font-size: 14px;
}.footer {position: absolute;left: 0;bottom: 0;width: 100%;color: #99afff;line-height: 36px;text-align: center;z-index: 2;display: flex;align-items: center;justify-content: center;
}.footer a {color: #99afff;
}.tip {margin-top: 18px;color: #5c5f68;font-size: 12px;
}@media screen and (max-width: 860px) {.box {margin: 0;width: 100vw;height: 100vh;}.chunk {display: none;}.form {padding: 0;border-radius: 0;}.title {background: url("/static/images/login/mobile.png");background-repeat: no-repeat;background-size: cover;height: 200px;padding: 60px 0;box-sizing: border-box;}.title>span {color: #fff;}.footer {font-size: 12px;color: #ccc;}.footer a {color: #ccc;}}
</style>