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>
 

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