前端Vue自定義驗(yàn)證碼密碼登錄切換tabs選項(xiàng)卡標(biāo)簽欄標(biāo)題欄驗(yàn)證碼登錄模版密碼登錄模版

這篇具有很好參考價(jià)值的文章主要介紹了前端Vue自定義驗(yàn)證碼密碼登錄切換tabs選項(xiàng)卡標(biāo)簽欄標(biāo)題欄驗(yàn)證碼登錄模版密碼登錄模版。希望對大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

前端Vue自定義驗(yàn)證碼密碼登錄切換tabs選項(xiàng)卡標(biāo)簽欄標(biāo)題欄驗(yàn)證碼登錄模版密碼登錄模版，請?jiān)L問uni-app插件市場地址：https://ext.dcloud.net.cn/plugin?id=13221

效果圖如下：

前端Vue自定義驗(yàn)證碼密碼登錄切換tabs選項(xiàng)卡標(biāo)簽欄標(biāo)題欄驗(yàn)證碼登錄模版密碼登錄模版

前端Vue自定義驗(yàn)證碼密碼登錄切換tabs選項(xiàng)卡標(biāo)簽欄標(biāo)題欄驗(yàn)證碼登錄模版密碼登錄模版文章來源地址http://www.zghlxwxcb.cn/news/detail-501905.html

實(shí)現(xiàn)代碼如下：

cc-selectBox

使用方法


<!-- select-arr：選擇數(shù)組 nowindex：當(dāng)前選擇序列 @change：切換選擇事件? -->

<cc-selectBox :select-arr="select" :nowindex="nowindex" @change="turntap"></cc-selectBox>

HTML代碼實(shí)現(xiàn)部分


<template>

? ? <view>

? ? ? ? <view class="page">

<!-- select-arr：選擇數(shù)組 nowindex：當(dāng)前選擇序列 @change：切換選擇事件? -->

<cc-selectBox :select-arr="select" :nowindex="nowindex" @change="turntap"></cc-selectBox>

  


? ? ? ? ? ? <view class="tip-box">

? ? ? ? ? ? ? ? <view class="left">

? ? ? ? ? ? ? ? ? ? <view class="title">Hello, 尊敬的用戶 </view>

? ? ? ? ? ? ? ? ? ? <view class="subtext">登錄注冊解鎖更多精彩內(nèi)容</view>

? ? ? ? ? ? ? ? </view>

? ? ? ? ? ? ? ? <image lazyLoad class="tip-img" src="https://cdn.pixabay.com/photo/2014/02/17/10/20/statue-of-liberty-267948_1280.jpg"></image>

? ? ? ? ? ? </view>

? ? ? ? ? ? <view class="form-mes" v-if="nowindex != 1">

? ? ? ? ? ? ? ? <view class="input-item">

? ? ? ? ? ? ? ? ? ? <view class="num">+86</view>

? ? ? ? ? ? ? ? ? ? <input

? ? ? ? ? ? ? ? ? ? ? ? @blur="lossstyle"

? ? ? ? ? ? ? ? ? ? ? ? @focus="changestyle"

? ? ? ? ? ? ? ? ? ? ? ? @input="bindpancode"

? ? ? ? ? ? ? ? ? ? ? ? class="item"

? ? ? ? ? ? ? ? ? ? ? ? data-inputNum="0"

? ? ? ? ? ? ? ? ? ? ? ? maxlength="11"

? ? ? ? ? ? ? ? ? ? ? ? placeholder="手機(jī)號（新號碼將自動(dòng)注冊）"

? ? ? ? ? ? ? ? ? ? ? ? placeholderClass="placeholder"

? ? ? ? ? ? ? ? ? ? ? ? type="number"

? ? ? ? ? ? ? ? ? ? />

? ? ? ? ? ? ? ? </view>

? ? ? ? ? ? ? ? <view class="input-item">

? ? ? ? ? ? ? ? ? ? <input

? ? ? ? ? ? ? ? ? ? ? ? @blur="lossstyle"

? ? ? ? ? ? ? ? ? ? ? ? @focus="changestyle"

? ? ? ? ? ? ? ? ? ? ? ? @input="pushcode"

? ? ? ? ? ? ? ? ? ? ? ? class="item"

? ? ? ? ? ? ? ? ? ? ? ? data-inputNum="1"

? ? ? ? ? ? ? ? ? ? ? ? maxlength="6"

? ? ? ? ? ? ? ? ? ? ? ? placeholder="請輸入驗(yàn)證碼"

? ? ? ? ? ? ? ? ? ? ? ? placeholderClass="placeholder"

? ? ? ? ? ? ? ? ? ? ? ? type="number"

? ? ? ? ? ? ? ? ? ? />

? ? ? ? ? ? ? ? ? ? <view @tap.stop.prevent="getshortmes" :class="'code-btn ' + (getcode ? 'active' : '') + ' ptp_exposure'" data-ptpid="0a55-1480-8c29-d6e1">

? ? ? ? ? ? ? ? ? ? ? ? {{ getcodemes }}

? ? ? ? ? ? ? ? ? ? </view>

? ? ? ? ? ? ? ? </view>

? ? ? ? ? ? ? ? <view @tap="bid" class="logoin submit ptp_exposure" data-ptpid="50c4-1348-ad62-db8f">登錄</view>

? ? ? ? ? ? ? ? <view @tap="voiceCode" class="send_call ptp_exposure" data-ptpid="eaac-1adf-a790-feac" v-if="sendcall">

? ? ? ? ? ? ? ? ? ? 收不到驗(yàn)證碼？試試

? ? ? ? ? ? ? ? ? ? <text class="green">語音驗(yàn)證</text>

? ? ? ? ? ? ? ? </view>

? ? ? ? ? ? </view>

? ? ? ? ? ? <view class="form-mes" v-if="nowindex != 0">

? ? ? ? ? ? ? ? <view class="input-item">

? ? ? ? ? ? ? ? ? ? <view class="num">+86</view>

? ? ? ? ? ? ? ? ? ? <input

? ? ? ? ? ? ? ? ? ? ? ? @blur="lossstyle"

? ? ? ? ? ? ? ? ? ? ? ? @focus="changestyle"

? ? ? ? ? ? ? ? ? ? ? ? @input="regloginaccount"

? ? ? ? ? ? ? ? ? ? ? ? class="item"

? ? ? ? ? ? ? ? ? ? ? ? data-inputNum="0"

? ? ? ? ? ? ? ? ? ? ? ? maxlength="11"

? ? ? ? ? ? ? ? ? ? ? ? placeholder="請輸入手機(jī)號"

? ? ? ? ? ? ? ? ? ? ? ? placeholderClass="placeholder"

? ? ? ? ? ? ? ? ? ? ? ? type="number"

? ? ? ? ? ? ? ? ? ? />

? ? ? ? ? ? ? ? </view>

? ? ? ? ? ? ? ? <view class="input-item">

? ? ? ? ? ? ? ? ? ? <input

? ? ? ? ? ? ? ? ? ? ? ? @blur="lossstyle"

? ? ? ? ? ? ? ? ? ? ? ? @focus="changestyle"

? ? ? ? ? ? ? ? ? ? ? ? @input="regloginpass"

? ? ? ? ? ? ? ? ? ? ? ? class="item"

? ? ? ? ? ? ? ? ? ? ? ? data-inputNum="2"

? ? ? ? ? ? ? ? ? ? ? ? :password="isPassword"

? ? ? ? ? ? ? ? ? ? ? ? placeholder="請輸入密碼"

? ? ? ? ? ? ? ? ? ? ? ? placeholderClass="placeholder"

? ? ? ? ? ? ? ? ? ? ? ? type="text"

? ? ? ? ? ? ? ? ? ? />

? ? ? ? ? ? ? ? ? ? <view @tap="changePassType" :class="'iconfont ' + (isPassword ? 'iconeye_off' : 'iconeye')" data-ptpid="8d48-14e8-85ae-6a5f"></view>

? ? ? ? ? ? ? ? </view>

? ? ? ? ? ? ? ? <view @tap="reglogin" class="logoin submit ptp_exposure" data-ptpid="2572-1abd-b620-ade5">登錄</view>

? ? ? ? ? ? ? ? <view @tap="forgetpass" class="forget green ptp_exposure" data-ptpid="a54d-1179-8be7-3e5e">

? ? ? ? ? ? ? ? ? ? <text>忘記密碼？</text>

? ? ? ? ? ? ? ? </view>

? ? ? ? ? ? </view>

? ? ? ? ? ? <view class="iagree">

? ? ? ? ? ? ? ? 登錄注冊代表您已同意《

? ? ? ? ? ? ? ? <text @tap="skipAgreePage" class="green ptp_exposure" data-ptpid="934b-1839-b547-2d42">App用戶協(xié)議</text>

? ? ? ? ? ? ? ? 》

? ? ? ? ? ? </view>

? ? ? ? </view>

? ? ? ? <view @tap="closeImgCode" class="toastbg ptp_exposure" data-ptpid="dad4-159d-ad73-a360" v-if="showimgcode"></view>

? ? ? ? <view class="imagecont" v-if="showimgcode">

? ? ? ? ? ? <view class="imagetitle">

? ? ? ? ? ? ? ? <input @input="getImgCode" class="imagevalue" maxlength="4" placeholder="請輸入圖片驗(yàn)證碼" placeholderClass="placeholder" />

? ? ? ? ? ? ? ? <image lazyLoad @tap="changeImgCode" class="ptp_exposure" data-ptpid="75db-11fd-a7c2-3fdb" :src="imageCode" style="width: 160rpx; height: 64rpx"></image>

? ? ? ? ? ? </view>

? ? ? ? ? ? <view @tap="confirmCode" :class="'choosesure ' + (confirmactive ? 'active' : '') + ' ptp_exposure'" data-ptpid="35bd-1312-a0c2-9664">確定</view>

? ? ? ? </view>

? ? </view>

</template>

<script>

var app = getApp();

export default {

? ? components: {

  


? ? },

? ? data() {

? ? ? ? return {

? ? ? ? ? ? logs: [],

? ? ? ? ? ? nowindex: 0,

? ? ? ? ? ? regularLogin: false,

? ? ? ? ? ? select: ['驗(yàn)證碼登錄', '密碼登錄'],

? ? ? ? ? ? getcode: false,

? ? ? ? ? ? getcodemes: '獲取驗(yàn)證碼',

? ? ? ? ? ? sendcall: false,

? ? ? ? ? ? hidepass: false,

? ? ? ? ? ? callimg: false,

? ? ? ? ? ? phone: '',

? ? ? ? ? ? code: '',

? ? ? ? ? ? submit: {

? ? ? ? ? ? ? ? submit: false,

? ? ? ? ? ? ? ? text: '登錄'

? ? ? ? ? ? },

? ? ? ? ? ? miniOpenId: '',

? ? ? ? ? ? redirect: '',

? ? ? ? ? ? showimgcode: false,

? ? ? ? ? ? imageCode: '',

? ? ? ? ? ? localcode: '',

? ? ? ? ? ? confirmactive: false,

? ? ? ? ? ? regmobile: '',

? ? ? ? ? ? regpassword: '',

? ? ? ? ? ? nowUrl: '/accountCenter/account/fast/login/verifyCode',

? ? ? ? ? ? frontPage: '',

? ? ? ? ? ? deviceIdCode: Math.random(),

? ? ? ? ? ? inputStyle: [

? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? ? iconactive: 'https://qiniu-image.qtshe.com/2017041020px-mobilegreen@3x.png',

? ? ? ? ? ? ? ? ? ? icon: 'https://qiniu-image.qtshe.com/2017041020px-mobilegray@3x.png',

? ? ? ? ? ? ? ? ? ? selected: false

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? ? iconactive: 'https://qiniu-image.qtshe.com/2017041020px-volidegreen@3x.png',

? ? ? ? ? ? ? ? ? ? icon: 'https://qiniu-image.qtshe.com/2017041020px-volidegray@3x.png',

? ? ? ? ? ? ? ? ? ? selected: false

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? ? iconactive: 'https://qiniu-image.qtshe.com/2017041020px-passgreen@3x.png',

? ? ? ? ? ? ? ? ? ? icon: 'https://qiniu-image.qtshe.com/2017041020px-passgray@3x.png',

? ? ? ? ? ? ? ? ? ? selected: false

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ],

? ? ? ? ? ? nowOnFocus: 0,

? ? ? ? ? ? isPassword: true

? ? ? ? };

? ? },

? ? onLoad: function (e) {

this.redirect = e.redirect || '';

? ? },

? ? methods: {

? ? ? ? getImgCode: function (e) {},

? ? ? ? closeImgCode: function () {

this.showimgcode = false;

? ? ? ? },

? ? ? ? voiceCode: function () {},

? ? ? ? changestyle: function (e) {},

? ? ? ? lossstyle: function (e) {},

? ? ? ? confirmCode: function () {},

? ? ? ? getshortmes: function () {},

? ? ? ? bid: function () {},

// 切換登錄方式

? ? ? ? turntap: function (e) {

this.nowindex = e.target.dataset.num;

},

? ? ? ? pushcode: function (e) {},

? ? ? ? bindpancode: function (e) {},

? ? ? ? forgetpass: function () {},

? ? ? ? hideorshow: function () {},

? ? ? ? regloginaccount: function (e) {},

? ? ? ? regloginpass: function (e) {},

? ? ? ? changeImgCode: function () {},

? ? ? ? skipAgreePage: function () {},

? ? ? ? reglogin: function () {},

? ? ? ? inviteFriend: function () {},

? ? ? ? changePassType: function () {}

? ? }

};

</script>

<style lang="scss" scoped>

@import "./login.scss";

</style>

組件實(shí)現(xiàn)代碼


<template>

<view class="logway">

<view :class="'act ' + (nowindex == index ? 'active' : '')" v-for="(item, index) in selectArr" :key="index">

<view @tap="turntap" class="item ptp_exposure" :data-index="index" :data-num="index"

data-ptpid="6f22-1fc6-9182-d53d">

{{ item }}

</view>

<view class="dot"></view>

</view>

</view>

</template>

<script>

export default {

data() {

return {

};

},

props: {

selectArr: {

type: Array,

default: []

},

// 當(dāng)前選中

nowindex: {

type: Number,

default: 0

},

},

methods: {

turntap(e) {

this.$emit("change", e);

},

}

};

</script>

<style lang="scss" scoped>

@import "./index.scss";

</style>

到了這里，關(guān)于前端Vue自定義驗(yàn)證碼密碼登錄切換tabs選項(xiàng)卡標(biāo)簽欄標(biāo)題欄驗(yàn)證碼登錄模版密碼登錄模版的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！