vue选项卡切换登录方式小案例


Posted in Javascript onSeptember 27, 2019

本文实例为大家分享了vue选项卡切换登录方式的具体代码,供大家参考,具体内容如下

最终效果

vue选项卡切换登录方式小案例

组件代码:

<template>
 <div>
 <div class="login_warp">
 <div class="loginbox fl">
  <!-- 三个选项卡按钮 -->
 <div class="login_header">
 <span @click="cur=0" :class="{active:cur==0}">账号登录</span>
 <span @click="cur=1" :class="{active:cur==1}">快捷登录</span>
 <span @click="cur=2" :class="{active:cur==2}">扫码登录</span>
 </div>
 <div class="login_content">
  <!-- 在cur==0时此板块显示 其他时候此板块不显示 -->
 <div v-show="cur==0" class="Cbody_item">
 <div class="form_item"><input type="text" name="fname" placeholder="用户名"></div>
 <div class="form_item"><input type="password" name="fpassword" placeholder="密码"></div>
 <div class="form_item">
 <div class="fl"><input type="checkbox">记住密码</div>
 <div class="fr"><a href="javascript:;" >找回密码</a></div>
 </div>
 <div class="clear"></div>
 <div class="form_item">
 <input type="submit" name="" value="登录">
 </div>
 </div>
  <!-- 在cur==1时此板块显示 其他时候此板块不显示 -->
 <div v-show="cur==1" class="Cbody_item">
 <div class="form_item"><input type="text" name="fname" placeholder="手机号"></div>
 <div class="form_item"><input type="password" name="fpassword" placeholder="验证码"></div>
 <div class="form_item">
 <!-- <div class="fl"><input type="checkbox">记住密码</div>
 <div class="fr"><a href="javascript:;" >找回密码</a></div> -->
 </div>
 <div class="clear"></div>
 <div class="form_item">
 <input type="submit" name="" value="登录">
 </div>
 
 </div>
  <!-- 在cur==2时此板块显示 其他时候此板块不显示 -->
 <div v-show="cur==2" class="Cbody_item">
 <div class="qcode"><img src="../../assets/img/qcode.png" width="160" height="160" alt="二维码" /></div>
 <div class="beizhu">打开手机客户端扫码注册</div>
 </div>
 </div>
 </div>
 <!-- 右边蓝色板块 -->
 <div class="loginrslider fl"></div>
 </div>
 </div>
</template>
 
<script>
export default {
 data () {
 return {
 cur:0 //默认选中第一个tab
 }
 },
 mounted () {
 
 }
}
 
</script>
 
<style scoped>
.fl{
 float: left;
}
.fr{
 float: right;
}
.clear{
 clear: both;
}
a{
 text-decoration: none;
 color: #333;
 transition: ease all 0.5s;
}
a{
 color: #1c65ff
}
.login_header{
 margin-bottom: 40px;
}
.login_header span{
 margin-right: 20px;
 cursor: pointer;
}
.loginbox{
 width: 300px;
 overflow: hidden;
 padding: 20px;
 padding-top: 15px;
}
.Cbody_item{
 border: 0px solid #999;
 overflow: hidden;
}
.form_item{
 font-size: 13px;
}
.form_item input[type="text"],.form_item input[type="password"]{
 display: block;
 width: calc(100% - 18px);
 height: 36px;
 margin:0 auto; 
 padding-left: 16px;
 outline: none;
 border: 1px solid #999;
 transition: ease all 0.5s;
 margin-bottom: 20px;
}
.form_item input[type="text"]:focus,.form_item input[type="password"]:focus{
 border: 1px solid #1c65ff
}
.form_item input[type="submit"]{
 display: block;
 width: calc(100% - 0px);
 height: 40px;
 margin:0 auto; 
 padding-left: 16px;
 outline: none;
 border: 1px solid #1c65ff;
 transition: ease all 0.5s;
 margin-top: 20px;
 margin-bottom: 20px;
 background-color: #1c65ff;
 color: #fff;
 cursor: pointer;
}
.form_item input[type="submit"]:hover{
 background-color: #3f7dff;
 border: 1px solid #3f7dff;
}
.active{
 color: #3f7dff;
 padding-bottom: 10px;
 border-bottom: 3px solid #3f7dff;
}
.loginrslider{
 width: 160px;
 height: 322px;
 background-color: #1c65ff;
}
.login_warp{
 width: 500px;
 margin: 50px auto;
 border-radius: 10px;
 box-shadow: 0 0px 0px #ccc;
 overflow: hidden;
 border:1px solid #3f7dff;
 margin-top: 10%;
 transition: ease all 0.5s;
 position: relative;
 top: 0px;
 cursor: pointer;
}
.login_warp:hover{
 top: -30px;
 box-shadow: 0 15px 21px #ccc;
}
.loginrslider{
 color: #fff;
 
}
.qcode{
 width: 160px;
 height: 160px;
 background-color: #ccc;
 margin: 0 auto;
 margin-top: 2px;
}
.beizhu{
 text-align: center;
 font-size: 13px;
 margin-top: 10px;
 color: #999
}
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 插件 将this下的div轮番显示
Apr 09 Javascript
js tab 选项卡
Apr 26 Javascript
JavaScript中的console.dir()函数介绍
Dec 29 Javascript
js实现页面跳转的几种方法小结
May 16 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
Oct 17 Javascript
AngularJS实现根据变量改变动态加载模板的方法
Nov 04 Javascript
AngularJS实现表单验证功能
Jan 09 Javascript
Angular企业级开发——MVC之控制器详解
Feb 20 Javascript
在Vue中使用Compass的方法
Mar 02 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 Javascript
es6函数之尾递归用法实例分析
Apr 25 Javascript
Vue.js原理分析之nextTick实现详解
Sep 07 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
Sep 27 #Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
Sep 27 #Javascript
使用layer弹窗,制作编辑User信息页面的方法
Sep 27 #Javascript
vue实现倒计时获取验证码效果
Apr 17 #Javascript
通过layer实现可输入的模态框的例子
Sep 27 #Javascript
vue调用语音播放的方法
Sep 27 #Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 #Javascript
You might like
说说PHP的autoLoad自动加载机制
2012/09/27 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
区分JS中的undefined,null,&quot;&quot;,0和false
2007/03/08 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
2014/05/04 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
2015/03/12 Javascript
基于jQuery实现动态数字展示效果
2015/08/12 Javascript
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
带有定位当前位置的百度地图前端web api实例代码
2016/06/21 Javascript
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
vue+webpack中配置ESLint
2018/11/07 Javascript
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
Vue+tracking.js 实现前端人脸检测功能
2020/04/16 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
Python实用日期时间处理方法汇总
2015/05/09 Python
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
深入解答关于Python的11道基本面试题
2017/04/01 Python
PyQt5实现让QScrollArea支持鼠标拖动的操作方法
2019/06/19 Python
对Django 中request.get和request.post的区别详解
2019/08/12 Python
python使用PIL和matplotlib获取图片像素点并合并解析
2019/09/10 Python
Pure Collection美国官网:来自英国羊绒专家的奢华羊绒
2017/11/19 全球购物
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
北京一家公司的.net开发工程师笔试题
2012/04/17 面试题
纠纷协议书
2014/04/16 职场文书
学校宣传标语
2014/06/18 职场文书
高中学校对照检查材料
2014/08/31 职场文书
公安局副政委班子个人对照检查材料
2014/10/04 职场文书
财务经理岗位职责
2015/01/31 职场文书
社区植树节活动总结
2015/02/06 职场文书
整改通知书格式
2015/04/22 职场文书
pandas中关于apply+lambda的应用
2022/02/28 Python
阿里云服务器部署RabbitMQ集群的详细教程
2022/06/01 Servers
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技