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)文章
這篇文章主要為大家詳細(xì)介紹了如何使用Vue編寫一個(gè)簡單的日期選擇器,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
Vue?warn:Property?"state"?was?accessed?during
這篇文章主要為大家介紹了Vue?warn:Property?"state"?was?accessed?during?render的報(bào)錯(cuò)解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
vue項(xiàng)目中路由跳轉(zhuǎn)頁面不變問題及解決
這篇文章主要介紹了vue項(xiàng)目中路由跳轉(zhuǎn)頁面不變問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue項(xiàng)目在public index.html文件中添加變量方式
這篇文章主要介紹了vue項(xiàng)目在public index.html文件中添加變量方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-08-08
Vue3+Vite項(xiàng)目中引入pinia和pinia-plugin-persistedstate的方法代碼
這篇文章主要給大家介紹了關(guān)于Vue3+Vite項(xiàng)目中引入pinia和pinia-plugin-persistedstate的相關(guān)資料,Pinia是Vue.js的官方狀態(tài)管理庫,輕量且功能強(qiáng)大,支持模塊化和TypeScript,PiniaPluginPersistedState是一個(gè)插件,需要的朋友可以參考下2024-11-11
vue運(yùn)行報(bào)錯(cuò)cache-loader的解決步驟
最近運(yùn)行vue項(xiàng)目的時(shí)候報(bào)錯(cuò)了,通過查找相關(guān)資料最終解決,下面這篇文章主要給大家介紹了關(guān)于vue運(yùn)行報(bào)錯(cuò)cache-loader的解決步驟,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
這篇文章主要介紹了vue debug 二種方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
vue常用指令實(shí)現(xiàn)學(xué)生錄入系統(tǒng)的實(shí)戰(zhàn)
本文主要介紹了vue常用指令實(shí)現(xiàn)學(xué)生錄入系統(tǒng)的實(shí)戰(zhàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
Vue Element前端應(yīng)用開發(fā)之圖標(biāo)的維護(hù)和使用
在Vue Element前端應(yīng)用中，圖標(biāo)是必不可少點(diǎn)綴界面的元素，Element界面組件里面提供了很多常見的圖標(biāo)，因此考慮擴(kuò)展更多圖標(biāo)，引入了vue-awesome組件，它利用了Font Awesome的內(nèi)置圖標(biāo)，實(shí)現(xiàn)了更多圖標(biāo)的整合，可以在項(xiàng)目中使用更多的圖標(biāo)元素了2021-05-05
這篇文章主要介紹了vue全局使用axios的方法實(shí)例詳解，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11