Vue登录界面设计开发

前言

  市面上大多的软件，在登录的时候给用户提供了超过一种的登录方式，常见的有手机短信登录、账号密码登录、app扫码登录，要想将这些功能组合在一起，就需要实现表单的切换功能，下面我将为你展示功能具体实现过程。

图示

详细代码

template部分

<template>
    <div>
        <!-- 手机扫码登录和账号密码登录 -->
        <div class="loginBox" v-if="changeType==0">
            <el-button class="btn" icon="el-icon-full-screen" @click="changeType=1"></el-button>
            <div class="tabs">
                <ul>
                    <li @click = "displayType = i" :class = "displayType == i ? 'selected' : '' "
                    v-for = "(v,i) in items" :key = "i">{{v.title}}</li>
                </ul>
                
            </div>
            <div class="form">
                <ul>
                    <!-- 账号登录 -->
                    <li v-show = " displayType == 0 ">
                        <el-form ref="loginFormRef" :model="loginForm" label-width="0px">
                            <el-form-item >
                                <el-input v-model="loginForm.account" placeholder="请输入账号" prefix-icon="el-icon-user"></el-input>
                            </el-form-item>
                            <el-form-item >
                                <el-input v-model="loginForm.password" placeholder="请输入密码" show-password  prefix-icon="el-icon-lock" ></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary">登录</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-checkbox v-model="loginForm.approving">勾选及表示协议条款</el-checkbox>
                            </el-form-item>
                        </el-form>
                    </li>
                    <!-- 手机登录 -->
                    <li v-show = " displayType == 1 ">
                        <el-form ref="loginFormRef" :model="loginForm" label-width="0px">
                            <el-form-item >
                                <el-input v-model="loginForm.phone" placeholder="请输入手机号" prefix-icon="el-icon-mobile-phone"></el-input>
                            </el-form-item>
                            <el-form-item >
                                    <el-input v-model="loginForm.password" placeholder="请输入验证码" prefix-icon="el-icon-chat-line-round" ></el-input>
                                    <a href = "">获取验证码</a>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary">登录</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-checkbox v-model="loginForm.approving">勾选及表示协议条款</el-checkbox>
                            </el-form-item>
                        </el-form>
                    </li>
                </ul>
            </div> 
        </div>
        <!-- 二维码登录 -->
        <div class="loginBox" style="text-align: center;"  v-if="changeType==1">
            <el-button class="btn" icon="el-icon-monitor" @click="changeType=0"></el-button>
            <p style="padding-top:25px">请使用手机app扫码登录</p>
            <!-- 二维码 -->
            <img src="../assets/二维码.png" alt="图片加载失败">
        </div>
    </div>
</template>

script部分

<script>
export default {
    name: 'Login',
    data() {
      return{
          displayType:1 ,
          changeType:0,
          loginForm:{
              account:'',
              password:'',
              phone:'',
              approving:false
          },
          items:[
              {title:'账号登录'},
              {title:'手机登录'},
          ]
      }
    },
    method:{}
}
</script>

style部分

<style scoped>
ul{
    list-style: none;
}
.tabs ul{
    display: flex;
    /* display: none; */
    height: 50px;
    padding: 0;
    align-items: center;
    border-bottom: 1px solid #dedede; /* 底部灰色的线 */
    font-size: 18px;
    cursor: pointer;
}
.tabs ul li{
    width: 50%;
    text-align: center;
    border-right: 1px solid #dedede; /* 靠右灰色的线 */
}
.tabs ul li:last-child{ /* 控制最右边的没有线 */
    border-right: 0px solid #dedede; /* 靠右灰色的线 */
}
/* tabs标签选中后样式 */
.selected{
    color: #409eff;
    font-weight: 550;
    position: relative;
}
.selected::before{
    content: '';
    position: absolute;
    bottom: -15px;
    width: 100%;
    left: 0;
    border-bottom: 3px solid #409eff;
}
.loginBox{
    width: 400px;
    height: 350px;
    padding: 25px;
    margin: 100px auto;
    border-radius: 15px;
    background-color: white;
    position: relative;
}
.btn{ /*二维码切换按钮*/
    position: absolute;
    right: 0;
    top: 0;
    max-width: 50px;
    border: none;
}
.form{
    margin-top:30px; 
}
.form ul{
    margin: 0;
    padding: 0;
}
.form ul li{
    display: flex;
    flex-direction: column; /*垂直布局*/
}
.el-button{
    width: 100%;
    /* height: 100%; */
}
.el-input{
    position: relative;
}
.form a{
    position: absolute;
    text-decoration: none;
    right: 10px;
    color: #a9a9a9;
    border-left: 1px solid #ccc;
    align-items: center;
    padding-left: 10px;
}
.image{
    height: 60%;
    width: 60%;
}
</style>