欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue實(shí)現(xiàn)發(fā)送短信倒計(jì)時(shí)和重發(fā)短信功能的示例詳解

 更新時(shí)間:2023年12月05日 11:00:45   作者:手?摘星辰  
這篇文章主要給大家介紹了vue實(shí)現(xiàn)發(fā)送短信倒計(jì)時(shí)和重發(fā)短信功能的相關(guān)知識,文中通過代碼示例給大家介紹的非常詳細(xì),需要的朋友可以參考下

js實(shí)現(xiàn)發(fā)送短信倒計(jì)時(shí)功能

HTML代碼部分

        <el-button @click="queryBtn()" type="primary">發(fā)送短信({{countDown}})</el-button>
        <el-button @click="resetBtn()" type="danger" :disabled="resetBtndisab">重發(fā)</el-button>

JS代碼部分

export default {
    data(){
        return {
            countDown:60, // 默認(rèn)時(shí)間60秒
            countDownTimeout:null,  // 倒計(jì)時(shí)計(jì)數(shù)器
            resetBtndisab:true, //重發(fā)按鈕初始值為不可用
        }
    },
    methods:{
            // 查詢按鈕
            queryBtn(){
                 this.doCountDown()
            },
            // 重置按鈕
            resetBtn(){
                 this.$message({
                        message: '短信驗(yàn)證碼已發(fā)送,請注意查收!',
                        type: 'success'
                 });
                 this.resetCountDown();
                 this.resetBtndisab=true
            },
            // 倒計(jì)時(shí)開始
            doCountDown(){
                this.countDownTimeout=setTimeout(()=>{
                    this.countDown--;
                    if(this.countDown<=0){
                            this.resetBtndisab=false
                    }else{
                        this.doCountDown(this.countDown)
                    }
                },1000)
		    },
            // 重置倒計(jì)時(shí)
            resetCountDown(){
                clearTimeout(this.countDownTimeout);
                this.countDown=60;
            }

    }
}

實(shí)際展示效果

以上就是vue實(shí)現(xiàn)發(fā)送短信倒計(jì)時(shí)和重發(fā)短信功能的示例詳解的詳細(xì)內(nèi)容,更多關(guān)于vue發(fā)送短信倒計(jì)時(shí)的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

最新評論