2022-07-03 vue项目-通用后台管理系统(二) Login页面的样式和校验,使用element-ui表单方法实现表单的提交和重置

前端OnTheRun

已于 2023-03-03 17:26:45 修改

阅读量767

点赞数

分类专栏： vue项目-通用后台管理系统文章标签： javascript elementui form login

于 2022-07-03 22:03:36 首次发布

本文链接：https://blog.csdn.net/rowlet/article/details/125590384

版权

本文详细介绍了使用Vue和Element-UI构建登录页面的过程，包括登录页面的样式设计，如天蓝色背景和白色登录框，以及Element-UI表单组件的使用来实现用户密码输入框。此外，还探讨了前端校验规则，如username和password的绑定，以及登录按钮和重置按钮的逻辑实现，包括成功登录后跳转到home页的操作。最后，文章列举了一些关键知识点，如子盒子的居中方法，box-shadow属性详解，iconfont在Vue项目的引入，以及Element-UI表单样式快速引入等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

一.登录页面Login.vue的样式

1.实现登录页面天蓝色背景色和中间白色登录框

<template>
  <div  class="login">
     <div class="loginBox"></div>
  </div>
</template>
<style scoped>
.login {
   
    background-color: darkcyan;
    height: 100vh;
}
.loginBox {
   
    width: 450px;
    height: 350px;
    background-color: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
     border-radius: 5px;
}
</style>

在这里插入图片描述

2.实现登录框中logo引入并放置在登录框左上角

<template>
  <div  class="login">
     <div class="loginBox">
      <div class="avtor">
        <img src = 'https://s3.bmp.ovh/imgs/2023/01/27/d44acfed1a1f8b1b.jpg' />
      </div> 
     </div>
  </div>
</template>
<style scoped>
.login {
   
    background-color: darkcyan;
    height: 100vh;
}
.loginBox {
   
    width: 450px;
    height: 350px;
    background-color: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
     border-radius: 5px;
}
.avtor{
   
  width: 60px;
  height: 60px;
  background: #ffffff;
  border-radius: 50%;
  border:1px solid #eee;
  padding:5px;
  box-shadow:0 0 10px #dddddd;
  position: absolute;
  transform: translate(-15%,-15%);
}
.avtor img{
   
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #eee;
}
</style>

在这里插入图片描述

3.使用Element-UI表单功能实现用户密码的输入框样式

template:

<el-form class="loginForm" label-width="60px">
	  <el-form-item label="用户名">
	     	 <el-input prefix-icon="iconfont icon-username" placeholder="请输入用户名"></el-input>
	  </el-form-item>
	  <el-form-item label="密码">
	  	    <el-input prefix-icon="iconfont icon-password" placeholder="请输入密码"></el-input>
	  </el-form-item>
	  <el-form-item class=