vue 实现最漂亮浮出登录页（浮出登录页，session存储登录信息）

蜗牛专注学习

于 2020-04-17 14:31:02 发布

阅读量5.3k

点赞数 2

分类专栏： vue

本文链接：https://blog.csdn.net/melon__/article/details/105553459

版权

本文介绍如何在Vue应用中创建一个吸引人的浮出登录页面，并利用SessionStorage来存储和管理用户登录状态。内容包括前端div布局、登录框的编写、登录功能的实现、登录状态的持久化以及登出功能的处理。

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

实现效果

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="tex

最低0.47元/天解锁文章