仿美团验证码

作者: 甘草子XS | 来源:发表于2018-07-12 09:49 被阅读0次

仿美团验证码
ReactNative 仿美团项目
仿美团项目笔记
仿美团1
高仿美团swift5.0<1>
仿美团悬浮效果
ReactNative 仿美团项目
仿美团下拉刷新
flutter 仿美团APP
【美团网项目】1.项目介绍

<!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>
            .box {padding-left: 20px;padding-right: 20px;padding-top: 60px;max-width: 320px;margin-left: auto;margin-right: auto;}
            .content {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;}
            .content input {position: absolute;top: -100%;left: -666666px;opacity: 0;}
            .content .line {position: relative;width: 40px;height: 32px;line-height: 32px;text-align: center;font-size: 28px;}
            .content .line::after {display: block;position: absolute;content: '';left: 0;width: 100%;bottom: 0;height: 1px;background-color: #aaaaaa;}
            .content .line.animated::before {display: block;position: absolute;left: 50%;top: 20%;width: 1px;height: 60%;content: '';background-color: #333333;}
        </style>
    </head>
    <body>
        <div id="app" class="box">
            <h2 >验证码:</h2>
            <div class="content">
                <input ref="vcode" id="vcode" type="tel" maxlength="6" v-model="code" @focus="focused = true" @blur="focused = false" placeholder="ahsdfhadfah">
                <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,
                    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.$refs.vcode.blur();
                        }
                    }
                },
            })
        </script>
    </body>

</html>

这个大概是三四个月前的了，在别人代码上稍作修改的，但由于时间已久，找不到原文章了，在此就不附链接了。