实现效果
1.前端添加一个div，装载弹窗
<!-- 点击登录，注册时跳出页面 -->
<div id="notClickDiv"></div>notClickDiv的css布局
#notClickDiv{
background:rgba(255,255,255,1); /*设置白色的透明背景色*/
opacity:0.9;
position:absolute;
display:none; /*隐藏div框*/
z-index:9;
top:0px; /*弹出框背景填满*/
left:0px;
margin: 0px;
width:100%;
height:100%;
}2.编写登录框
前端
<div id="login">
<form name="form2" method="post" action="" id="form2">
<div class="title">登录</div>
<div @click="myClose(login)" class="close">X</div>
<div id="loginContent">
<div class="input_area">
<!--v-model 双向绑定变量tele-->
<input type="text" class="uu" placeholder="输入手机号" v-model="tele" οnkeydοwn="if(event.keyCode==13){this.form.code.focus();}">
<div class="code_area">
<input type="text" class="cc horizon" placeholder="输入图片验证码" v-model="code" οnkeydοwn="if(event.keyCode==13){this.form.pwd.focus();}"></input>
<img type="text" v-bind:src="imgCode" @click="createCode()" readonly="readonly" id="checkCode" class="code horizon"/></img>
</div>
<div class="code_area">
<input type="text" class="pp horizon" placeholder="请输入验证码" v-model="pcode" οnkeydοwn="if(event.keyCode==13){loginSubmit(this.form)}"> </input>
<input type="button" readonly="readonly" type="text" class="horizon sendCode" value="发送验证码" @click="sendCode()"/></input>
</div>
</div>
<!--click绑定函数loginSubmit 与 myClose 实现登录与关闭登录框-->
<input name="Submit" class="login_button" type="button" @click="loginSubmit();myClose(login)" v-focus @keyup.27="myClose(login)" value="登录">
</div>
</form>
</div>对应的css
#login{
position:absolute;
width:580px;
height:704px;
padding:4px;
display:none; /*隐藏登录的div*/
z-index:10;
background:rgba(255,255,255,1);
box-shadow:0px 0px 20px 0px rgba(0,0,0,0.2);
border-radius:14px;
}
#login input{
height:60px;
border-radius:28px;
background:rgba(247,247,247,1);
border:0px;
outline:none;
}
#login .title{
font-size:40px;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(51,51,51,1);
line-height:44px;
margin-left:250px;
margin-top:120px;
position:absolute;
}
#login .close{
position:absolute;
width:26px;
height:26px;
font-size:35px;
margin-top:34px;
margin-left:520px;
}
#login .input_area{
position:absolute;
margin-top:194px;
margin-left:60px;
}
#login .input_area input{
font-size:18px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(153,153,153,1);
line-height:25px;
background-repeat:no-repeat;
background-position:center;
background-position-x:20px;
}
#login .input_area .uu{
margin-top:30px;
width:460px;
padding-left:55px;
background-image:url(../img/tele.png);
}
#login .input_area .cc{
background-image:url(../img/check.png);
padding-left:55px;
width:360px;
}
#login .input_area .pp{
padding-left:55px;
width:340px;
background-image:url(../img/lock.png);
}
#login .input_area .code_area{
margin-top:30px;
width:460px;
height:60px;
border-radius:28px;
background:rgba(247,247,247,1);
border:0px;
}
#login .input_area .code_area .code{
border:0px;
margin:0px;
width:97px;
height:46px;
font-size:18px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(52,52,52,1);
line-height:25px;
text-align:center;
margin-top:7px;
margin-right:3px;
}
#login .input_area .code_area .sendCode{
width:120px;
height:44px;
background:rgba(52,52,52,1);
border-radius:22px;
margin-top:8px;
margin-right:0px;
font-size:18px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(255,255,255,1);
line-height:25px;
text-align:center;
}
#login .login_button{
width:460px;
margin-top:30px;
margin-top:524px;
margin-left:60px;
background:rgba(52,52,52,1);
border-radius:28px;
opacity:0.5;
font-size:20px;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(255,255,255,1);
line-height:28px;
}3.点击登录，弹出登录框
<!--v-show 通过showLogin变量控制是否显示登录按钮-->
<li v-show="showLogin">
<!--click绑定Myopen函数，点击打开登陆界面-->
<button class="bar_button" @click="Myopen('login')">登录</button>
</li>
<!--v-show 通过isLogin变量控制是否显示用户电话号{{tele}}-->
<li v-show="isLogin">
<a @click="logout()" class="bar_text" >{{tele}}</a>
</li>4.声明变量
data:{
'tele':'',//登录电话
'code':'',//图形验证码
'pcode':'',//手机验证码
'showLogin':false,
'isLogin':false
}5.打开登录框函数
Myopen(divID){ //根据传递的参数确定显示的层
this.openDiv = divID;
var notClickDiv=document.getElementById("notClickDiv"); //获取id为notClickDiv的层
notClickDiv.style.display='block'; //设置层显示
document.getElementById(divID).style.display='block';
notClickDiv.style.width=document.body.scrollWidth;
notClickDiv.style.height=document.body.scrollHeight; //设置由divID所指定的层显示
//登陆框的位置设置 左右居中
document.getElementById(divID).style.left=document.body.scrollLeft+(document.body.clientWidth-document.getElementById(divID).offsetWidth)/2;
//登陆框的位置设置 如果小于屏幕可见高度 居中显示，否则，离上30px
if(document.body.clientHeight-document.getElementById(divID).offsetHeight >0){
document.getElementById(divID).style.top=document.body.scrollTop+(document.body.clientHeight-document.getElementById(divID).offsetHeight)/2;
}else{
document.getElementById(divID).style.top=document.body.scrollTop+30;
}
}6.登录函数
loginSubmit(){
var self = this;
axios.get('登陆请求接口',{
params: {
phone: self.tele,
code: self.pcode,
},
headers:{
platForm:4,
deviceId:1
}
})
.then(function (response) {
console.log(response);
if(response.data.code != 0){
alert(response.data.message)
self.tele=''
}else{ //登陆成功
alert('登录成功！')
//设置登陆成功，修改标记变量，隐藏登陆框，显示用户电话
self.showLogin=false;
self.isLogin=true;
//使用session 存储用户的登陆信息
sessionStorage.setItem('tele',self.tele);
sessionStorage.setItem('isLogin',true);
sessionStorage.setItem('token',response.data.data.token);
}
})
.catch(function (error) {//请求失败
console.log(error);
});
}7.页面刷新时，使用sessionStorage判断用户是否登陆，如果登陆，隐藏登陆框，显示用户电话号，并且获得用户信息
ifLogin(){
//已经登录
if(sessionStorage.getItem('isLogin')){
this.showLogin=false;
this.isLogin=true;
this.tele = sessionStorage.getItem('tele')
}else{
this.showLogin=true;
this.isLogin=false;
}
}8.登出，清空用户session，显示登陆框
logout(){
alert('已登出！');
sessionStorage.removeItem('isLogin');
sessionStorage.removeItem('tele')
this.showLogin=true;
this.isLogin=false;
}
版权声明：本文为melon__原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。