vue 短信验证码UI

1.html

<template>
    <div class="forgrtCode">
        <mt-header title="忘记密码" class="headerBox">
            <mt-button
                    icon="back"
                    slot="left"
                    class="backBox"
                    @click="backAction">返回</mt-button>
        </mt-header>

        <div class="codeInputBox">
            <!--手机号-->
            <el-input
                    class="phoneNum"
                    type="tel"
                    v-model="phoneNum"
                    placeholder="手机号"
            >
            </el-input>

            <!--验证码-->
            <div class="codeBox">
                <el-input
                        class="codeNum"
                        type="tel"
                        v-model="codeNum"
                        placeholder="验证码"
                >
                </el-input>
                <!--/倒计时触发按钮-->
                <mt-button
                        class="codeBtn"
                        :class="{hwDisables:captchaDisable}"
                        type="default"
                        @click="codeBtnAction"
                        v-bind:disabled="captchaDisable"
                >{{captchaLabel}}</mt-button>
            </div>
        </div>

        <!--注册-->
        <mt-button
                class="nextBottomBtn"
                type="default"
                @click.native="registerBottomBtnAction"
                v-bind:disabled="isClickAble">
        下一步</mt-button>

    </div>
</template>

2.js

<script>
    import kTimer from '../../../../src/components/Lib/Timer/timer'
    import {Toast} from 'mint-ui'
    export default {

        data:function () {
          return {
              phoneNum:'',
              codeNum:'',
              captchaLabel:"获取验证码",
              seconds:15,
              captchaDisable:false,
          }
        },
        methods:{
            //导航返回
            backAction:function () {
                this.$router.back()
            },
            //获取验证码点击
            codeBtnAction:function () {
                if(this.phoneNum==""){
                    Toast('请填写手机号!');
                    return;
                }
                //发送网络请求
//                this.codeBtnActionAPI();

                this.captchaDisable = true;
                //立即显示重发提示不必等待倒计时启动
                this.captchaLabel =this.seconds+'秒后重新发送';

                //启动1s步长倒计时
                var interval = setInterval(()=>{
                    kTimer.countdown(this)
                    console.log(this.seconds)

                    if(this.seconds == 15){
                        //停止倒计时
                        clearTimeout(interval)
                    }

                },1000);
            }
        },

        computed:{
            isClickAble:function () {
                if(this.phoneNum!==''&&this.codeNum!==''){
                    return false
                }
                return true;
            }
        }
    }
</script>

3.css

<style>
    .forgrtCode{
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: white;
    }
    .forgrtCode .headerBox{
        background: #da9c5f !important;
    }
    /*输入框*/
    .codeInputBox{
        margin-top: 60px;
    }
    .registerBox .inputBox{
        padding: 0 20px;
        margin-top: 20px;
    }
    /*普通状态*/
    .forgrtCode .phoneNum input{
        border-color: white;
        border-radius: 0 ;
        border-bottom: 1px solid #eeeeee ;
        width: 80%;
        margin-left: 10%;
        margin-top: 10px;
    }
    /*高亮状态下面添加直线*/
    .forgrtCode .phoneNum :focus{
        border-bottom: 1px solid #da9c5f ;
        padding-right: 100px;

    }

    /*验证码容器*/
    .forgrtCode .codeBox{
        margin-top: 20px;
        width:80%;
        margin-left: 10%;
        position: relative;
    }
    /*输入框普通状态*/
    .forgrtCode .codeNum input{
        border-color: white;
        border-radius: 0 ;
        border-bottom: 1px solid #eeeeee ;
    }
    /*高亮状态下面添加直线*/
    .forgrtCode .codeNum :focus{
        border-bottom: 1px solid #da9c5f ;

    }
    .forgrtCode .codeBox .codeNum{
        margin-right: 10px !important;

    }
    .forgrtCode .codeBox .codeBtn{
        position: absolute;
        right: 0;
        top: 0;
        font-size: 13px;
        height: 32px;
        color: white;
        background: #da9c5f;
    }

    /*按钮*/
    .nextBottomBtn{
        margin-top: 40px;
        width: 80%;
        margin-left: 10%;
        background: #da9c5f !important;
        color: white;
    }

</style>

4.timer.js

/**
 * Created by lvkk on 17/11/14.
 */

var length = 15;

function countdown(that) {
    //console.log('count down'+that.seconds);
    var seconds = that.seconds;
    //console.log(seconds);
    var captchaLabel = that.captchaLabel;
    if (seconds < 1) {
        captchaLabel = '获取验证码';
        seconds = length;
        that.captchaDisable = false;

    } else {
        captchaLabel = --seconds + '秒后重新发送'
    }
    that.seconds = seconds;
    that.captchaLabel = captchaLabel;

}

module.exports = {
    countdown: countdown,
    length: length
}