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.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
css值转换成数值请抛弃parseInt
Oct 24 Javascript
js移除事件 js绑定事件实例应用
Nov 28 Javascript
jQuery操作input值的各种方法总结
Nov 21 Javascript
javascript定义变量时带var与不带var的区别分析
Jan 12 Javascript
Vue概念及常见命令介绍(1)
Dec 08 Javascript
用jQuery实现圆点图片轮播效果
Mar 19 Javascript
axios 处理 302 状态码的解决方法
Apr 10 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
Sep 03 Javascript
Vue移动端实现图片上传及超过1M压缩上传
Dec 23 Javascript
详解Vue中的watch和computed
Nov 09 Javascript
vue切换菜单取消未完成接口请求的案例
Nov 13 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 404错误页面实现代码
2009/06/22 PHP
PHP中读取文件的几个方法总结(推荐)
2016/06/03 PHP
Javascript 面向对象 重载
2010/05/13 Javascript
javascript 学习笔记(onchange等)
2010/11/14 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
2013/05/08 Javascript
JS对HTML标签select的获取、添加、删除操作
2013/10/17 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
微信小程序  audio音频播放详解及实例
2016/11/02 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
2017/05/05 Javascript
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
2018/03/06 jQuery
vue实现底部菜单功能
2018/07/24 Javascript
微信小程序实现炫酷的弹出式菜单特效
2019/01/28 Javascript
Javascript读写cookie的实例源码
2019/03/16 Javascript
微信小程序自定义多列选择器使用详解
2019/06/21 Javascript
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
[01:09:23]KG vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python实现从web抓取文档的方法
2014/09/26 Python
Python解析命令行读取参数--argparse模块使用方法
2018/01/23 Python
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
Python之使用adb shell命令启动应用的方法详解
2019/01/07 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
python画环形图的方法
2020/03/25 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
在HTML5中如何使用CSS建立不可选的文字
2014/10/17 HTML / CSS
矫正人员思想汇报
2014/01/08 职场文书
大二法英学生职业生涯规划范文
2014/02/27 职场文书
文艺晚会策划方案
2014/06/11 职场文书
运动会100米加油稿
2015/07/21 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
JS创建或填充任意长度数组的小技巧汇总
2021/10/24 Javascript