在项目中需要实现一个模拟app上输入验证码的界面,比较难的地方就是html与css书写,通过折腾,使用多个input框叠加的方式来实现了.将长方形的input定位到多个单独的input框上就好了,同时让上面的大input框opacity为0隐藏就ok.这样用户看起来就是直接输入的一个input,且可以输入一个框到下一个可以连续的跳转.
验证码输入
<template>
<div>
<v-header :title="titleName" :isReturn="true" :isLine="isHaveLine"></v-header>
<!-- 确认文本开始 -->
<div class="confirmTest textC font30 color6666">
<p>本次操作需要短信确认,</p>
<p class="lastP">有效码已经发送至您手机:
<span class="telNum"> 152****1420</span>
</p>
</div>
<!-- 确认文本结束 -->
<!-- input输入框开始 -->
<div class="inputWrap positionR">
<!-- 假的输入框开始 -->
<div class="falseInputWrap positionA clearfix">
<input class="falseInputs fl activeBorder" type="tel" v-model="falseInputs[0].verificationCode_f">
<input class="falseInputs fl" type="tel" v-model="falseInputs[1].verificationCode_f">
<input class="falseInputs fl" type="tel" v-model="falseInputs[2].verificationCode_f">
<input class="falseInputs fl" type="tel" v-model="falseInputs[3].verificationCode_f">
<input class="falseInputs fl" type="tel" v-model="falseInputs[4].verificationCode_f">
<input class="falseInputs fl lastInput" type="tel" v-model="falseInputs[5].verificationCode_f">
</div>
<!-- 假的验证码结合素 -->
<!-- 真的验证码开始 -->
<input type="" class="trueInput positionA" maxlength="6" v-model="verificationCode">
<!-- 真的验证码结束 -->
</div>
<!-- input输入框结束 -->
<!-- 确认按钮开始 -->
<div class="confirmVerification font32" @click="goNext">
确认
</div>
<!-- 确认按钮结束 -->
</div>
</template>
<style lang="less" scoped>
.confirmTest {
margin-top: 100px;
.lastP {
margin-top: 18px;
.telNum {
color: #005ab4;
}
}
}
.inputWrap {
margin-top: 100px;
height: 60px;
width: 100%;
.trueInput {
width: 100%;
height: 60px;
line-height: 60px;
text-align: left;
width: 560px;
top: 0px;
left: 50%;
transform: translate(-50%);
font-size: 28px;
border: none;
letter-spacing: 80px;
z-index: 8888; // display: none;
opacity: 0; // background-color: red;
}
.falseInputWrap {
// display: inline-block;
text-align: center; // margin: 0 auto;
// height: 60px;
// box-sizing: border-box;
width: 560px; // margin-left: 50%;
// transform: translate(-50%);
left: 50%;
top: 0;
transform: translate(-50%);
input {
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
border: none;
border-bottom: 2px solid #979797;
margin-right: 40px;
font-size: 28px;
}
.lastInput {
margin-right: 0;
}
}
.trueInput {}
}
.confirmVerification {
margin: 60px 30px 0 30px;
height: 90px;
line-height: 90px;
background-color: #0c9afc;
color: #ffff;
display: block;
text-align: center;
border-radius: 10px;
letter-spacing: 10px;
}
.color6666 {
color: #666666;
}
.activeBorder {
border-bottom: 2px solid #005ab4 !important;
color: #005ab4;
}
</style>
<script>
import Header from "@/components/base/header/header";
import {
Toast
} from "mint-ui";
import {
fetch,
ERR_OK
} from "@/api/ddxdClientApi.js";
import {
getCookie
} from 'assets/js/merge' //获取cookie
export default {
data() {
return {
titleName: "短信验证码", //v-header的名字.
isHaveLine: true, //v-header是否有线
verificationCode: "", //真实的验证码
falseInputs: [{
verificationCode_f: ""
},
{
verificationCode_f: ""
},
{
verificationCode_f: ""
},
{
verificationCode_f: ""
},
{
verificationCode_f: ""
},
{
verificationCode_f: ""
}
],
// this.$route.params.title,
token: "", //用户的token
noOrder: this.$route.params.noOrder, //上送订单号
dtOrder: this.$route.params.dtOrder, //上送订单时间
cardNo: this.$route.params.cardNo, //银行卡号
tokenId: this.$route.params.tokenId, //第三方返回的token
}
},
methods: {
goNext() {
// alert(222);
if (this.verificationCode == "") {
Toast({
message: "请输入验证码",
position: 'bottom',
});
return false;
}
if (this.verificationCode.length < 4) {
Toast({
message: "输入的验证码有误",
position: 'bottom',
});
return false;
}
let params = {};
params.noOrder = this.noOrder;
params.dtOrder = this.dtOrder;
params.cardNo = this.cardNo;
params.token = this.tokenId;
params.verifyCode = this.verificationCode;
let opt = {
"functionId": "trusteeCardBindAndRegisterVerify",
"data": JSON.stringify(params)
};
fetch(opt, "POST", this.token).then(res => {
if (res.resCode == ERR_OK) {
this.$router.push({
name: "success",
params: {
title: "实名绑卡",
confimTitle: "绑卡"
}
});
} else {
Toast({
message: res.resMsg,
position: 'bottom',
});
}
})
}
},
created() {
this.token = getCookie('userCookie') ? JSON.parse(getCookie('userCookie')).token : ''; // 从cookie中获取 token
console.log(this.noOrder);
console.log(this.dtOrder);
console.log(this.cardNo);
console.log(this.tokenId);
// console.log(this.verificationCode);
},
watch: {
verificationCode(newValue, oldValue) {
if (newValue != oldValue) {
console.log(newValue);
console.log(oldValue);
var that = this;
for (let i = 0; i < 6; i++) {
that.falseInputs[i].verificationCode_f = that.verificationCode.split("")[i];
}
}
// 控制光标.
var inputsNum = document.getElementsByClassName("falseInputs");
for (let index = 0; index < inputsNum.length; index++) {
inputsNum[index].classList.remove("activeBorder");
}
inputsNum[newValue.split("").length - 1].classList.add("activeBorder");
}
},
components: {
"v-header": Header,
},
}
</script>
网友评论