vue實現(xiàn)發(fā)送短信倒計時和重發(fā)短信功能的示例詳解
更新時間:2023年12月05日 11:00:45 作者:手?摘星辰
這篇文章主要給大家介紹了vue實現(xiàn)發(fā)送短信倒計時和重發(fā)短信功能的相關知識,文中通過代碼示例給大家介紹的非常詳細,需要的朋友可以參考下
js實現(xiàn)發(fā)送短信倒計時功能
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, // 默認時間60秒 countDownTimeout:null, // 倒計時計數(shù)器 resetBtndisab:true, //重發(fā)按鈕初始值為不可用 } }, methods:{ // 查詢按鈕 queryBtn(){ this.doCountDown() }, // 重置按鈕 resetBtn(){ this.$message({ message: '短信驗證碼已發(fā)送,請注意查收!', type: 'success' }); this.resetCountDown(); this.resetBtndisab=true }, // 倒計時開始 doCountDown(){ this.countDownTimeout=setTimeout(()=>{ this.countDown--; if(this.countDown<=0){ this.resetBtndisab=false }else{ this.doCountDown(this.countDown) } },1000) }, // 重置倒計時 resetCountDown(){ clearTimeout(this.countDownTimeout); this.countDown=60; } } }
實際展示效果
以上就是vue實現(xiàn)發(fā)送短信倒計時和重發(fā)短信功能的示例詳解的詳細內(nèi)容,更多關于vue發(fā)送短信倒計時的資料請關注腳本之家其它相關文章!
相關文章
vue3+vite:src使用require動態(tài)導入圖片報錯的最新解決方法
這篇文章主要介紹了vue3+vite:src使用require動態(tài)導入圖片報錯和解決方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04Vue?element-ui中表格過長內(nèi)容隱藏顯示的實現(xiàn)方式
在Vue項目中,使用ElementUI渲染表格數(shù)據(jù)時,如果某一個列數(shù)值長度超過列寬,會默認換行,造成顯示不友好,下面這篇文章主要給大家介紹了關于Vue?element-ui中表格過長內(nèi)容隱藏顯示的實現(xiàn)方式,需要的朋友可以參考下2022-09-09VUE v-for循環(huán)中每個item節(jié)點動態(tài)綁定不同函數(shù)的實例
今天小編就為大家分享一篇VUE v-for循環(huán)中每個item節(jié)點動態(tài)綁定不同函數(shù)的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09