前端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 >
<!-- select-arr：選擇陣列 nowindex：當前選擇序列 @change：切換選擇事件 -->
<cc-selectBox :select-arr="select" :nowindex="nowindex" @change="turntap"></cc-selectBox>
<view >
<view >
<view >Hello, 尊敬的用戶 </view>
<view >登錄注冊解鎖更多精彩內容</view>
</view>
<image lazyLoad src="https://img.uj5u.com/2023/06/27/356138270938021.jpg"></image>
</view>
<view v-if="nowindex != 1">
<view >
<view >+86</view>
<input
@blur="lossstyle"
@focus="changestyle"
@input="bindpancode"
data-inputNum="0"
maxlength="11"
placeholder="手機號（新號碼將自動注冊）"
placeholder
type="number"
/>
</view>
<view >
<input
@blur="lossstyle"
@focus="changestyle"
@input="pushcode"
data-inputNum="1"
maxlength="6"
placeholder="請輸入驗證碼"
placeholder
type="number"
/>
<view @tap.stop.prevent="getshortmes" : data-ptpid="0a55-1480-8c29-d6e1">
{{ getcodemes }}
</view>
</view>
<view @tap="bid" data-ptpid="50c4-1348-ad62-db8f">登錄</view>
<view @tap="voiceCode" data-ptpid="eaac-1adf-a790-feac" v-if="sendcall">
收不到驗證碼？試試
<text >語音驗證</text>
</view>
</view>
<view v-if="nowindex != 0">
<view >
<view >+86</view>
<input
@blur="lossstyle"
@focus="changestyle"
@input="regloginaccount"
data-inputNum="0"
maxlength="11"
placeholder="請輸入手機號"
placeholder
type="number"
/>
</view>
<view >
<input
@blur="lossstyle"
@focus="changestyle"
@input="regloginpass"
data-inputNum="2"
:password="isPassword"
placeholder="請輸入密碼"
placeholder
type="text"
/>
<view @tap="changePassType" : data-ptpid="8d48-14e8-85ae-6a5f"></view>
</view>
<view @tap="reglogin" data-ptpid="2572-1abd-b620-ade5">登錄</view>
<view @tap="forgetpass" data-ptpid="a54d-1179-8be7-3e5e">
<text>忘記密碼？</text>
</view>
</view>
<view >
登錄注冊代表您已同意《
<text @tap="skipAgreePage" data-ptpid="934b-1839-b547-2d42">App用戶協議</text>
》
</view>
</view>
<view @tap="closeImgCode" data-ptpid="dad4-159d-ad73-a360" v-if="showimgcode"></view>
<view v-if="showimgcode">
<view >
<input @input="getImgCode" maxlength="4" placeholder="請輸入圖片驗證碼" placeholder />
<image lazyLoad @tap="changeImgCode" data-ptpid="75db-11fd-a7c2-3fdb" :src="https://www.cnblogs.com/ccVue/archive/2023/06/27/imageCode" style="width: 160rpx; height: 64rpx"></image>
</view>
<view @tap="confirmCode" : 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/[email protected]',
icon: 'https://qiniu-image.qtshe.com/[email protected]',
selected: false
},
{
iconactive: 'https://qiniu-image.qtshe.com/[email protected]',
icon: 'https://qiniu-image.qtshe.com/[email protected]',
selected: false
},
{
iconactive: 'https://qiniu-image.qtshe.com/[email protected]',
icon: 'https://qiniu-image.qtshe.com/[email protected]',
selected: false
}
],
nowOnFocus: 0,
isPassword: true
};
},
onl oad: 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 >
<view : v-for="(item, index) in selectArr" :key="index">
<view @tap="turntap" :data-index="index" :data-num="index"
data-ptpid="6f22-1fc6-9182-d53d">
{{ item }}
</view>
<view ></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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/556096.html
標籤：其他
上一篇：前端Vue自定義發送短信驗證碼彈框popup 實作剩余秒數計數 重發短信驗證碼
下一篇：返回列表