vue發(fā)送驗證碼計時器防止刷新實現(xiàn)詳解
更新時間：2023年03月09日 10:59:28 作者：藍色海島
這篇文章主要為大家介紹了vue發(fā)送驗證碼計時器防止刷新實現(xiàn)詳解，<BR>有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
基本實現(xiàn)效果
按鈕：
<t-button @click="handleSend" :disabled="disable">{{text}}</t-button>
data：
text: '發(fā)送驗證碼',
time: 10,
timer: null,
disable: false
點擊發(fā)送：
handleSend() {
this.disable = true
this.text = this.time + 's后重新發(fā)送'
this.timer = setInterval(() => {
if (this.time > 0) {
this.time--
this.text = this.time + 's后重新發(fā)送'
} else {
clearInterval(this.timer)
this.time = 10
this.disable = false
this.text = '重新發(fā)送'
}
}, 1000)
}
防止刷新
handleSend() {
this.disable = true
this.text = this.time + 's后重新發(fā)送'
this.timer = setInterval(() => {
if (this.time > 0) {
this.time--
this.text = this.time + 's后重新發(fā)送'
localStorage.setItem('time', this.time) // 注意這行
} else {
clearInterval(this.timer)
this.time = 10
this.disable = false
this.text = '重新發(fā)送'
}
}, 1000)
}
created() {
const time = localStorage.getItem('time')
if (time && time > 0) {
this.text = time + 's后重新發(fā)送'
this.time = time
this.handleSend()
}
}以上就是vue發(fā)送驗證碼計時器防止刷新實現(xiàn)詳解的詳細內(nèi)容，更多關于vue發(fā)送驗證碼計時器防止刷新的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了使用electron打包Vue前端項目的詳細流程,文中通過圖文結合的方式給大家介紹的非常詳細,對大家學習electron打包Vue有一定的幫助,需要的朋友可以參考下2024-04-04
這篇文章主要為大家詳細介紹了vue文件樹組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-03-03
vue 關閉瀏覽器窗口的時候,清空localStorage的數(shù)據(jù)示例
今天小編就為大家分享一篇vue 關閉瀏覽器窗口的時候,清空localStorage的數(shù)據(jù)示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
el-select 數(shù)據(jù)回顯,只顯示value不顯示lable問題
這篇文章主要介紹了el-select 數(shù)據(jù)回顯,只顯示value不顯示lable問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue的表單數(shù)據(jù)收集案例之基本指令和自定義指令詳解
收集表單數(shù)據(jù)可以使用這個v-model實現(xiàn)這個數(shù)據(jù)的綁定，但是在有些輸入框中，還需要一些其他的指令搭配這個v-model指令結合使用，這篇文章主要介紹了vue的表單數(shù)據(jù)收集，基本指令和自定義指令,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了基于ant design日期控件使用_僅月份的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
淺談Vue3 Composition API如何替換Vue Mixins
這篇文章主要介紹了淺談Vue3 Composition API如何替換Vue Mixins，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
這篇文章主要為大家介紹了Vue vxe-table使用問題收錄小結,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
vue-cli項目中img如何使用require動態(tài)獲取圖片
這篇文章主要介紹了vue-cli項目中img如何使用require動態(tài)獲取圖片，具有很好的參考價值，希望對大家有所幫助。2022-09-09
這篇文章主要介紹了vue中computed和watch的綜合運用實例,主要需求是點擊按鈕實現(xiàn)天氣的切換效果結合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-04-04