基于elementUI的封装的登录框

最新推荐文章于 2024-05-04 23:25:32 发布

Pinia_0819

最新推荐文章于 2024-05-04 23:25:32 发布

阅读量694

点赞数

分类专栏：前端文章标签： elementui javascript 前端

本文链接：https://blog.csdn.net/weixin_50466102/article/details/123041610

版权

前端专栏收录该内容

22 篇文章 1 订阅

订阅专栏

//账号密码输入框前面带图标 密码框自带小眼睛
<template>
  <div class="login_bg">
    <div class="login_box">
      <div class="login_title">庐陵湿地安全预警评价系统</div>
      <div class="login_item">
        <el-input
          placeholder="账号"
          oninput="value=value.replace(/[\u4e00-\u9fa5]/g, '')"
          v-model="userName"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>
      <div class="login_item">
        <el-input
          placeholder="密码"
          type="password"
          oninput="value=value.replace(/[\u4e00-\u9fa5]/g, '')"
          v-model="passWord"
          :show-password="true"
        >
          <i slot="prefix" class="el-input__icon el-icon-set-up"></i>
        </el-input>
      </div>
      <div class="login_item">
        <el-button type="primary" style="width: 100%" @click="submit"
          >登录</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userName: "",
      passWord: "",
    }
  },
  mounted() {
    window.addEventListener("keydown", this.keyLogin)
  },
  destroyed() {
    window.removeEventListener("keydown", this.keyLogin, false)
  },
  methods: {
    keyLogin(event) {
      if (event.keyCode == 13)
        //回车键的键值为13
        this.submit() //调用登录按钮的登录事件
    },
    submit() {
      if (this.userName && this.passWord) {
        this.$api
          .login({
            menuType: 0,
            suLoginname: this.userName,
            suPwd: this.passWord,
          })
          .then((res) => {
            console.log(res)
            // this.$setData("token", "")
            this.$setData(
              "permissionList",
              JSON.stringify(res.data.data.permissionList)
            )
            this.$setData("token", res.headers.token)
            this.$setData("userInfo", JSON.stringify(res.data.data.userInfo))
            this.$message.success("登录成功!")
            setTimeout(() => {
              this.$router.push("/")
            }, 1000)
          })
      } else {
        this.$message.error("账号密码不能为空。")
      }
    },
  },
}
</script>
<style lang="less" scoped>
.login_bg {
  width: 100%;
  height: 100%;
  display: flex;
  //   background: #000;
  justify-content: center;
  align-items: center;
  background: url(../../assets/login_bg.jpg) center no-repeat;
  background-size: cover;
  .login_title {
    font-size: 40px;
    color: #fff;
    margin-bottom: 30px;
    font-weight: bold;
  }
  .login_box {
    width: 500px;
    height: 300px;
    // background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .login_item {
    width: 250px;
    padding: 20px 20px 0px 20px;
  }
}
</style>