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

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>