仿DIDI短信密码输入框验证

<!DOCTYPE html>
<html lang="zh-cn">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no,viewport-fit=cover">
        <title>cursor-vcode</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            body {
                background-color: #ffffff;
                font-family: -apple-system, PingFang SC, Hiragino Sans GB, Helvetica Neue, Arial;
                -webkit-tap-highlight-color: transparent;
            }

            .app {
                padding-left: 20px;
                padding-right: 20px;
                padding-top: 60px;
                max-width: 320px;
                margin-left: auto;
                margin-right: auto;
            }

            .heading-2 {
                color: #333333;
            }

            .v-code {
                margin-top: 20px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                position: relative;
                width: 280px;
                margin-left: auto;
                margin-right: auto;
            }

            .v-code input {
                position: absolute;
                top: -100%;
                left: -666666px;
                width: 0;
                height: 0;
                opacity: 0;
            }

            .v-code .line {
                position: relative;
                width: 40px;
                height: 32px;
                line-height: 32px;
                text-align: center;
                font-size: 28px;
            }

            .v-code .line::after {
                display: block;
                position: absolute;
                content: '';
                left: 0;
                width: 100%;
                bottom: 0;
                height: 1px;
                background-color: blue;
                transform: scaleY(.5);
                transform-origin: 0 100%;
            }

            .v-code .line.animated::before {
                display: block;
                position: absolute;
                left: 50%;
                top: 20%;
                width: 1px;
                height: 60%;
                content: '';
                background-color: red;
                animation-name: coruscate;
                animation-duration: 1s;
                animation-iteration-count: infinite;
                animation-fill-mode: both;
            }

            @keyframes coruscate {
                0% {
                    opacity: 0
                }
                25% {
                    opacity: 0
                }
                50% {
                    opacity: 1
                }
                75% {
                    opacity: 1
                }
                to {
                    opacity: 0
                }
            }
        </style>
    </head>

    <body>
        <div id="app" class="app">
            <h2 class="heading-2">验证码:</h2>
            <div class="v-code">
                <input ref="vcode" id="vcode" type="tel" maxlength="6" v-model="code" @focus="focused = true" @blur="focused = false" :disabled="telDisabled">

                <label for="vcode" class="line" v-for="item,index in codeLength" :class="{'animated': focused && cursorIndex === index}" v-text="codeArr[index]">
      </label>
            </div>
        </div>

        <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    code: '',
                    codeLength: 6,
                    telDisabled: false,
                    focused: false
                },
                computed: {
                    codeArr() {
                        return this.code.split('')
                    },
                    cursorIndex() {
                        return this.code.length
                    }
                },
                watch: {
                    code(newVal) {
                        if(newVal.length > 5) {
                            this.telDisabled = true
                            this.$refs.vcode.blur()
                            setTimeout(() => {
                                alert(`vcode: ${this.code}`)
                            }, 500)
                        }
                    }
                },
                mounted() {}
            })
        </script>
    </body>

</html>
libin1991 / libin_Blog

仿DIDI短信密码输入框验证 #518
