在项目中需要实现一个模拟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>