vue選項(xiàng)卡切換登錄方式小案例
更新時(shí)間:2021年04月22日 10:33:10 作者:小羽向前跑
這篇文章主要為大家詳細(xì)介紹了vue選項(xiàng)卡切換登錄方式小案例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue選項(xiàng)卡切換登錄方式的具體代碼,供大家參考,具體內(nèi)容如下
最終效果
組件代碼:
<template> <div> <div class="login_warp"> <div class="loginbox fl"> <!-- 三個(gè)選項(xiàng)卡按鈕 --> <div class="login_header"> <span @click="cur=0" :class="{active:cur==0}">賬號(hào)登錄</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時(shí)此板塊顯示 其他時(shí)候此板塊不顯示 --> <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時(shí)此板塊顯示 其他時(shí)候此板塊不顯示 --> <div v-show="cur==1" class="Cbody_item"> <div class="form_item"><input type="text" name="fname" placeholder="手機(jī)號(hào)"></div> <div class="form_item"><input type="password" name="fpassword" placeholder="驗(yàn)證碼"></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時(shí)此板塊顯示 其他時(shí)候此板塊不顯示 --> <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">打開(kāi)手機(jī)客戶端掃碼注冊(cè)</div> </div> </div> </div> <!-- 右邊藍(lán)色板塊 --> <div class="loginrslider fl"></div> </div> </div> </template> <script> export default { data () { return { cur:0 //默認(rèn)選中第一個(gè)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>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue.js實(shí)現(xiàn)選項(xiàng)卡切換
- Vue實(shí)現(xiàn)Tab選項(xiàng)卡切換
- Vue.js組件實(shí)現(xiàn)選項(xiàng)卡以及切換特效
- vue實(shí)現(xiàn)選項(xiàng)卡及選項(xiàng)卡切換效果
- Vue.js tab實(shí)現(xiàn)選項(xiàng)卡切換
- vue中用動(dòng)態(tài)組件實(shí)現(xiàn)選項(xiàng)卡切換效果
- vue動(dòng)態(tài)組件實(shí)現(xiàn)選項(xiàng)卡切換效果
- Vue.js組件tab實(shí)現(xiàn)選項(xiàng)卡切換
- Vue.js組件tabs實(shí)現(xiàn)選項(xiàng)卡切換效果
- Vue實(shí)現(xiàn)選項(xiàng)卡tab切換制作
相關(guān)文章
vue實(shí)現(xiàn)登錄、注冊(cè)、退出、跳轉(zhuǎn)等功能
這篇文章主要介紹了vue實(shí)現(xiàn)登錄、注冊(cè)、退出、跳轉(zhuǎn)等功能,需要的朋友可以參考下2020-12-12vue組件實(shí)現(xiàn)文字居中對(duì)齊的方法
這篇文章主要為大家詳細(xì)介紹了vue組件實(shí)現(xiàn)文字居中對(duì)齊的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08ElementUI?組件之Layout布局(el-row、el-col)
這篇文章主要介紹了ElementUI?組件之Layout布局(el-row、el-col),本文通過(guò)實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-07-07如何使用HBuilderX把vue項(xiàng)目打包成apk
這篇文章主要介紹了如何使用HBuilderX把vue項(xiàng)目打包成apk,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07vue使用Element-UI部分組件適配移動(dòng)端問(wèn)題
這篇文章主要介紹了vue使用Element-UI部分組件適配移動(dòng)端問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03