1.Vue验证码-----倒计时

1.首先上大图 1574748326536[1].gif

2. 视图代码

<template>

    <view class="content2">
        <cu-custom bgColor="bg-gradual-white" :isBack="true">
            <block slot="backText">返回</block>
            <block slot="content">忘记密码</block>
        </cu-custom>

        <view class="forget-group" style="margin-left: 10%; margin-top: 5px;">
            <text style="color: #262628; font-size: 30px; font-weight: bold;">忘记密码</text>
            <view class="input-row border" style="margin-top: 30px;">
                <m-input class="m-input" type="text" clearable focus v-model="account" placeholder="请输入账号"></m-input>
            </view>

            <view class="input-row3">
                <input id="verCodeId" type="text" v-model="verCode" placeholder="请输入验证码" selection-start="-1" selection-end="-1"
                 cursor="-1"></input>
                <!-- <button class='cu-btn bg-green shadow' @tap="sendCode(this)">发送验证码</button> -->
                <button class='cu-btn bg-blue shadow' @click="getCode" :disabled="disabled" >
                    {{countdown}} <text v-show="timestatus">秒重获</text>
                </button>
            </view>

            <view class="input-row2">
                <m-input type="password" displayable v-model="password" placeholder="请输入新密码"></m-input>
            </view>

            <view class="btn-row">
                <button class="primary" type="button" @tap="updatePwd">确定</button>
            </view>
            
        </view>
    </view>

</template>

3. JS代码走起

<script>
    
    import {
        mapState,
        mapMutations
    } from 'vuex'
    import mInput from '../../components/m-input.vue'
    export default {
        components: {
            mInput
        },
        data() {
            return {
                account: '',
                password: '',
                verCode: '',
                countdown: '获取验证码',
                disabled: false,
                timestatus: false,
                clear: ''
            }
        },
        methods: {
            updatePwd() {
                /* 提交修改密码的请求 */
            },
            // 获取验证码
            getCode() {
                var that = this;
                    that.disabled = true; //禁用点击
                    var isSuccess = true;//假设校验手机号  和 请求验证码成功
                    
                    if(isSuccess){
                        that.countdown = 60;
                        that.timestatus = true;
                        that.clear = setInterval(that.countDown, 1000);
                    }else{
                        that.disabled = false; //获取失败开启点击
                    }
                    
            },
            // 倒计时
            countDown() {
                var that = this;
                if (!that.countdown) {
                    that.disabled = false;
                    that.timestatus = false;
                    that.countdown = '获取验证码';
                    clearInterval(that.clear);
                } else {
                    --that.countdown;
                }
            }

        }
    }
</script>

4. 样式

<style>
    .content2 {
        width: 100%;
        height: 70%;
        background-image: url(../../static/img/bg_card.png);
        background-size: 100% 100%;
        position: absolute;
        margin-top: 160upx;
    }

    .forget-group {
        margin-left: 10%;
        margin-right: 10%;
    }

    .primary {
        margin-top: 30upx;
        background: #4C7DFD;
        border: #4C7DFD;
        border-radius: 60upx;
        color: #FFFFFF;
        font-size: 30upx;
        font-weight: bold;
        padding: 2%;
    }

    .input-row2 {
        margin-top: 30upx;
    }

    .input-row3 {
        margin-top: 30upx;
        align-items: center;
        display: flex;
        border: #F7F8FA;
        border-radius: 60upx;
        background-color: #F7F8FA;
    }

    #verCodeId {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        color: #555;
        padding-right: 20rpx;
        font-size: 16px;
        width: 90%;
        height: 46px;
        padding: 0 30upx;
    }
</style>

5. m-input.vue

<template>
    <view class="m-input-view">
        <input :focus="focus_" :type="inputType" :value="value" @input="onInput" class="m-input-input" :placeholder="placeholder"
         :password="type==='password'&&!showPassword" @focus="onFocus" @blur="onBlur" />
        <!-- 优先显示密码可见按钮 -->
        <view v-if="clearable_&&!displayable_&&value.length" class="m-input-icon">
            <m-icon color="#666666" type="clear" size="20" @click="clear"></m-icon>
        </view>
        <view v-if="displayable_" class="m-input-icon">
            <m-icon :color="showPassword?'#666666':'#cccccc'" type="eye" size="20" @click="display"></m-icon>
        </view>
        
    </view>
</template>

<script>
    import mIcon from './m-icon/m-icon.vue'
    
    export default {
        components: {
            mIcon
        },
        props: {
            /**
             * 输入类型
             */
            type: String,
            /**
             * 值
             */
            value: String,
            /**
             * 占位符
             */
            placeholder: String,
            /**
             * 是否显示清除按钮
             */
            clearable: {
                type: [Boolean, String],
                default: false
            },
            /**
             * 是否显示密码可见按钮
             */
            displayable: {
                type: [Boolean, String],
                default: false
            },
            /**
             * 自动获取焦点
             */
            focus: {
                type: [Boolean, String],
                default: false
            }
        },
        model: {
            prop: 'value',
            event: 'input'
        },
        data() {
            return {
                /**
                 * 显示密码明文
                 */
                showPassword: false,
                /**
                 * 是否获取焦点
                 */
                isFocus: false
            }
        },
        computed: {
            inputType() {
                const type = this.type
                return type === 'password' ? 'text' : type
            },
            clearable_() {
                return String(this.clearable) !== 'false'
            },
            displayable_() {
                return String(this.displayable) !== 'false'
            },
            focus_() {
                return String(this.focus) !== 'false'
            }
        },
        methods: {
            clear() {
                this.$emit('input', '')
            },
            display() {
                this.showPassword = !this.showPassword
            },
            onFocus() {
                this.isFocus = true
            },
            onBlur() {
                this.$nextTick(() => {
                    this.isFocus = false
                })
            },
            onInput(e) {
                this.$emit('input', e.target.value)
            }
        }
    }
</script>

<style>
    .m-input-view {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        height: 46px;
        flex: 1;
        padding: 0rpx 30rpx;
        border-radius: 60px;
        border: #F7F8FA;
        background-color: #F7F8FA;
        font-size: 16px;
        margin-top: 10px;
    }

    .m-input-input {
        flex: 1;
        width: 100%;
    }

    .m-input-icon {
        width: 20px;
    }
</style>