vue實(shí)現(xiàn)發(fā)送短信倒計(jì)時(shí)和重發(fā)短信功能的示例詳解
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)文章
vue3快速實(shí)現(xiàn)主題切換功能的步驟詳解
本文介紹一種基于css變量的主題切換實(shí)現(xiàn)方式,這種是最簡單,最直接,最容易理解的方式,實(shí)現(xiàn)的原理就是定義不同的HTML根標(biāo)簽元素的樣式,通過data屬性來區(qū)分不同主題css變量樣式,感興趣的朋友可以參考下2024-06-06vue3+vite:src使用require動(dòng)態(tài)導(dǎo)入圖片報(bào)錯(cuò)的最新解決方法
這篇文章主要介紹了vue3+vite:src使用require動(dòng)態(tài)導(dǎo)入圖片報(bào)錯(cuò)和解決方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04vue項(xiàng)目配置同一局域網(wǎng)可使用ip訪問的操作
這篇文章主要介紹了vue項(xiàng)目配置同一局域網(wǎng)可使用ip訪問的操作,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10淺談將three項(xiàng)目遷移至vue項(xiàng)目遇到的問題
本文主要介紹了將three項(xiàng)目遷移至vue項(xiàng)目遇到的問題,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01項(xiàng)目中Axios二次封裝實(shí)例Demo
vue項(xiàng)目經(jīng)常會(huì)用到axios來請求數(shù)據(jù),那么首先肯定需要對這個(gè)請求方法進(jìn)行一個(gè)二次封裝,這篇文章主要給大家介紹了關(guān)于項(xiàng)目中Axios二次封裝的相關(guān)資料,需要的朋友可以參考下2021-06-06vue+iview的菜單與頁簽的聯(lián)動(dòng)方式
這篇文章主要介紹了vue+iview的菜單與頁簽的聯(lián)動(dòng)方式,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2021-07-07Vue?element-ui中表格過長內(nèi)容隱藏顯示的實(shí)現(xiàn)方式
在Vue項(xiàng)目中,使用ElementUI渲染表格數(shù)據(jù)時(shí),如果某一個(gè)列數(shù)值長度超過列寬,會(huì)默認(rèn)換行,造成顯示不友好,下面這篇文章主要給大家介紹了關(guān)于Vue?element-ui中表格過長內(nèi)容隱藏顯示的實(shí)現(xiàn)方式,需要的朋友可以參考下2022-09-09VUE v-for循環(huán)中每個(gè)item節(jié)點(diǎn)動(dòng)態(tài)綁定不同函數(shù)的實(shí)例
今天小編就為大家分享一篇VUE v-for循環(huán)中每個(gè)item節(jié)點(diǎn)動(dòng)態(tài)綁定不同函數(shù)的實(shí)例,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09