vue编写一个登录页面，使用Tab栏实现“账号登录”和“二维码登录”这两种方式的切换

编写一个登录页面，使用Tab栏实现“账号登录”和“二维码登录”这两种方式的切换，并通过transition组件结合animate.css实现切换时的动画效果

1.CSS样式
编写自己想要的大小，颜色等

#content{width: 400px;;margin: 60px auto;}.title{height: 50px;border-bottom: 1px solid #e1e7ec;text-align: center;}#content a{text-decoration: none;color: black;font-size: 16px;background: #f1f1f1;padding: 5px 10px;margin: 0 10px;border-radius: 5px;}.form-input{height: 46px;line-height: 46px;margin-top: 10px;;}input{box-sizing: border-box;padding: 0 25px;background: #eef3f5;border-radius: 8px;width: 100%;height: 100%;border: 0;outline: 0;font-size: 14px;}#content .active{background-color: #09f;color: #fff;}.primary-button{background: linear-gradient(325deg,#4aa4ff,#1058fa);width: 100%;height: 42px;border-radius: 23px;border: 0;outline: none;color: #fff;letter-spacing: 10px;font-weight: 500;font-size: 16px;cursor: pointer;margin-top: 30px;}.pic{width: 200px;height: 200px;margin: 0 auto;}.pic img{width: 100%;height: 100%;}

2.页面结构

<!-- 定义登录组件 --><template id="example1"><div> <!-- 唯一的根容器 --><div class="form-input"><input type="text" name="user" placeholder="请输入手机号/邮箱" class="form-input"></div><div class="form-input"><input type="password" name="psd" placeholder="请输入密码" class="form-input"></div><button type="button" class="primary-button"><span>登录</span></button></div></template><!-- 二维码登录 --><template id="example2"><div class="pic"><img src="./erweima.png"></div></template><div id="content"><div class="title"><a href="javascript:;" @click="compontentName = 'example1',cur=0" :class="{active:cur == 0}">账号登录</a><a href="javascript:;" @click="compontentName = 'example2',cur=1" :class="{active:cur == 1}">二维码登录</a></div><transition enter-active-class="animated bounceInDown"><component :is="compontentName"></component></transition></div>

3.Javascript

    Vue.component('example1',{template:'#example1'})Vue.component('example2',{template:'#example2'})var vm = new Vue({el: '#content',data: { compontentName :'example1',cur:0}});

全代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登录</title><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<style>#content{width: 400px;;margin: 60px auto;}.title{height: 50px;border-bottom: 1px solid #e1e7ec;text-align: center;}#content a{text-decoration: none;color: black;font-size: 16px;background: #f1f1f1;padding: 5px 10px;margin: 0 10px;border-radius: 5px;}.form-input{height: 46px;line-height: 46px;margin-top: 10px;;}input{box-sizing: border-box;padding: 0 25px;background: #eef3f5;border-radius: 8px;width: 100%;height: 100%;border: 0;outline: 0;font-size: 14px;}#content .active{background-color: #09f;color: #fff;}.primary-button{background: linear-gradient(325deg,#4aa4ff,#1058fa);width: 100%;height: 42px;border-radius: 23px;border: 0;outline: none;color: #fff;letter-spacing: 10px;font-weight: 500;font-size: 16px;cursor: pointer;margin-top: 30px;}.pic{width: 200px;height: 200px;margin: 0 auto;}.pic img{width: 100%;height: 100%;}
</style>
</head>
<body><!-- 定义登录组件 --><template id="example1"><div> <!-- 唯一的根容器 --><div class="form-input"><input type="text" name="user" placeholder="请输入手机号/邮箱" class="form-input"></div><div class="form-input"><input type="password" name="psd" placeholder="请输入密码" class="form-input"></div><button type="button" class="primary-button"><span>登录</span></button></div></template><!-- 二维码登录 --><template id="example2"><div class="pic"><img src="./erweima.png"></div></template><div id="content"><div class="title"><a href="javascript:;" @click="compontentName = 'example1',cur=0" :class="{active:cur == 0}">账号登录</a><a href="javascript:;" @click="compontentName = 'example2',cur=1" :class="{active:cur == 1}">二维码登录</a></div><transition enter-active-class="animated bounceInDown"><component :is="compontentName"></component></transition></div><script>Vue.component('example1',{template:'#example1'})Vue.component('example2',{template:'#example2'})var vm = new Vue({el: '#content',data: { compontentName :'example1',cur:0}});</script>
</body>
</html>

vue编写一个登录页面，使用Tab栏实现“账号登录”和“二维码登录”这两种方式的切换相关推荐

Android实现二维码登录的简单实现
在Android app的开发中,完成一个二维码登录的功能可以帮助我们的了解前后端与Android的简单交互过程,在此做一个简单的登录测试.涉及到简单的PHP的使用以及XAMPP的使用. 1.实现二维 ...
网页扫描二维码登录页面的原理（通俗、易懂）
我的理解是: 二维码登录网页的基本原理是,用户进入登陆网页后,服务器生成一个uid来唯一标识一个用户,每一次刷新uid都会变换,保证一个uid绑定一个账号和密码,同时游览器与服务器创建一个长链接,用 ...
java微信二维码登录
1.注册微信开放平台:https://open.weixin.qq.com 2.邮箱激活 3.完善开发者资料 4.开发者资质认证准备营业执照,1-2个工作日审批.300元 5.创建网站应用提交审 ...
java二维码登录实现
二维码登录原理让服务端知道是那个用户要登录,验证通过后服务端通过webscoket 告知前端登录成功即可前端二维码登录实现链接: 仿知乎pc登录注册二维码登录页面. 下载下来修改一下即可使 ...
微信扫描二维码登录第三方平台
嗯...... 最近做了一个微信扫码登陆第三方平台功能,说下步骤就行,反正原理你们网上直接百度,我这里写了,估计也没几个人有耐心看第一步生成一个链接 https://open.weixin.qq. ...
二维码登录原理+Web端即时通讯技术
前言上周在写项目过程中遇到需要实现二维码的登录功能,将这个过程细节记录下来二维码的登录过程,主要难点在于用户扫码了浏览器展示的二维码,但是浏览器本身是无法知道的,需要服务端告知信息. 涉及到 we ...
调用网易云二维码登录API，实现微信小程序登录
调用网易云二维码登录API,实现微信小程序登录首先前往网易云音乐API官网 binaryify.github.io/NeteaseClou- 首先根据文档的链接下载好配置文件,再根据官方文档启动好本 ...
Python模拟二维码登录百度
模拟二维码登录百度写在前面准备工作二维码地址登录状态获取gid 登录参数代码部分二维码展示获取cookie 完整代码写在后面写在前面前段时间写了利用BDUSS到达百度首页,这一次 ...
让你的网站支持手机二维码登录
如果你的网站能支持二维码登录, 用户打开手机扫描一下, 网页上就立即变为已登录状态了, 是不是很酷? 像腾讯的微信, 手机淘宝等, 都支持用手机扫描二维码登录 Web 版, 极大的方便了用户. 这项技 ...

vue编写一个登录页面，使用Tab栏实现“账号登录”和“二维码登录”这两种方式的切换

编写一个登录页面，使用Tab栏实现“账号登录”和“二维码登录”这两种方式的切换，并通过transition组件结合animate.css实现切换时的动画效果

vue编写一个登录页面，使用Tab栏实现“账号登录”和“二维码登录”这两种方式的切换相关推荐

最新文章

热门文章