uniapp vue中的短信验证码


<template>
    <view class="content">
        <view class="input-item yzs">
            <text class="tit">验证码</text>
            <button class="tit" @tap="sendCode" :disabled="disabled">{{send}}</button>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                disabled:false,
                send:'发送验证码'
            }
        },
        methods: {
            sendCode(){
                let self = this
                //验证码
                self.disabled = true;
                var time = 10;                //时间为10s,可以按情况更改 
                var timer = setInterval(fun, 1000);  //设置定时器 
                function fun() { 
                    time--; 
                    if(time>=0) { 
                        self.send = time + "s后重新发送"; 
                    }else if(time<0){ 
                        self.send = "重新发送验证码"; 
                        self.disabled = false;  //倒计时结束能够重新点击发送的按钮 
                        clearInterval(timer);  //清除定时器 
                        time = 10;  //设置循环重新开始条件 
                    } 
                } 
            },
        }
    }
</script>                        

 

 

有错误请告诉我,我会及时改正,谢谢


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM