uniapp 验证码按钮实现倒计时

明日之后

[JavaScript] 纯文本查看 复制代码

//html
<view class="btn" @click="getCaptcha">
        <text>{{time==0? captchaText: time}}</text>
</view>

[JavaScript] 纯文本查看 复制代码

//script
export default {
        data(): {
                time: 0,
                captchaText: '获取验证码'
        },
        methods: {
                // 获取验证码
                        getCaptcha() {
                                if (this.time != 0) {
                        //这个提示框是uniapp自带的提示框，如果使用的是vue，按照你们项目的ui组件库提供的提示框即可
                                        uni.showToast({
                                                title: '请'+this.time+'s后再重新获取',
                                                icon: 'none'
                                        })
                                        return false
                                }

                                
                                //在此处可以发起后台提供的验证码请求接口  自己补充
                                


                                const that = this
                                that.captchaText = '重新获取'
                                //这块可以修改倒计时时间 我写的是60秒
                                that.time = 60
                                const fn = setInterval(function() {
                                        that.time--
                                        if (that.time==0) {
                                                clearInterval(fn)
                                        }
                                }, 1000);
                        },
        }
}

[JavaScript] 纯文本查看 复制代码

//css
.btn {                
        // 样式可以自己写  rpx是uniapp自带的单位   vue单位要改为px
                        width: 200rpx;
                        height: 100rpx;
                        border: 0;
                        background-color: #F2F2FC;
                        margin-left: 20rpx;
                        border-radius: 10rpx;
                        line-height: 100rpx;
                        text-align: center;
                        color: #808080;
                }