前端Vue自定义验证码密码登录切换tabs选项卡标签栏标题栏 验证码登录模版 密码登录模版
前端Vue自定义验证码密码登录切换tabs选项卡标签栏标题栏 验证码登录模版 密码登录模版， 请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=13221
效果图如下：
实现代码如下：
cc-selectBox
使用方法
<!-- select-arr：选择数组 nowindex：当前选择序列 @change：切换选择事件 -->
<cc-selectBox :select-arr="select" :nowindex="nowindex" @change="turntap"></cc-selectBox>
HTML代码实现部分
<template>
<view>
<view class="page">
<!-- select-arr：选择数组 nowindex：当前选择序列 @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">登录注册解锁更多精彩内容</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="手机号（新号码将自动注册）"
placeholderClass="placeholder"
type="number"
/>
</view>
<view class="input-item">
<input
@blur="lossstyle"
@focus="changestyle"
@input="pushcode"
class="item"
data-inputNum="1"
maxlength="6"
placeholder="请输入验证码"
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">
收不到验证码？试试
<text class="green">语音验证</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="请输入手机号"
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用户协议</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="请输入图片验证码" 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: ['验证码登录', '密码登录'],
getcode: false,
getcodemes: '获取验证码',
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>
组件实现代码
<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: []
},
// 当前选中
nowindex: {
type: Number,
default: 0
},
},
methods: {
turntap(e) {
this.$emit("change", e);
},
}
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
热门相关：有个人爱你很久 回眸医笑，冷王的神秘嫡妃 花月颂 道君 回眸医笑，冷王的神秘嫡妃