Vue實現獲取驗證碼倒計時
HTML部分:<span v-show=“show” @click=“getCode”>獲取驗證碼 話不多說直接上干貨 ...
HTML部分:<span v-show=“show” @click=“getCode”>獲取驗證碼 話不多說直接上干貨 ...
1、功能描述 當用戶想要獲取驗證碼時,就點擊 免費獲取驗證碼 ,然后開始倒計時,倒計時期間按鈕文字為剩余時間x秒,且不可按狀態,倒計時結束后,按鈕更改為點擊重新發送。 2、分析 必須用到定時器。按鈕點擊后,在定時器內做出判斷。倒計時60秒,到0結束。 3、代碼實現: 重點介紹 ...
按鈕: <button class="yzm" @click="countDown">{{content}}</button> 定義return: content:'發送驗證碼', totalTime: 60 , canClick: true //添加canClick ...
子組件 父組件調用示例 ...
...
vue3驗證碼倒計時60s ...
html部分 <div class="form-code"> <input type="number" v-model="codeVer" placeholder="請輸入驗證碼" /> <button type="button" @click ...
template部分 script部分 參考於此篇文章 ...