一個實現 手機端「輸入驗證碼 」效果Demo

　　以前在「掘金」上看到這樣一個demo 我以爲頗有意思，因而今天把它搬下來，記在本身的「小本本」裏
也許會對之後的項目有點用，若要本身去實現這樣一個案例也能實現，可是可能沒有那麼「妙」。

想法：

一、使用label標籤作顯示驗證碼的框，

二、而後每一個label for屬性指向同一個 id 爲vcode 的input，

三、爲了可以觸發input焦點， 將input 改透明度樣式隱藏，

四、這樣就實現了 點擊label觸發 input焦點，調用鍵盤。

運行效果：

 

 

 示例代碼：

結構部分html：

<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>

 css部分：

<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: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            position: relative;
            width: 280px;
            margin-left: auto;
            margin-right: auto;
        }
        .v-code input {
            position: absolute;
            top: 200%;
            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: #aaaaaa;
            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: #333333;
            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>

View Code

 

Javascript部分

一、經過CDN引入vue.js

<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></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) {
                this.code = newVal.replace(/[^\d]/g,'')
                if (newVal.length > 5) {
                    // this.telDisabled = true
                    this.$refs.vcode.blur()
                    setTimeout(() => {
                        alert(`vcode: ${this.code}`)
                    }, 500)
                }
            }
        },
    })

此文章並不是原創。。。。。