vue+vant実装の取得検証コードカウントダウンボタン


非常に簡単でよく使われる論理は、ログイン時に携帯電話の認証コードを取得し、カウントダウンするボタン論理です.私はモバイル側のuiプラグインvantを使っています.
詳細はvant公式サイトhttps://vant-contrib.gitee.io...を参照してください
ダイレクトコード

    
         
         

実はロジックは难しくありません私はここで3つのボタンロジックを使ってそれぞれ最初の携帯电话の入力ボックスの长さです6ビット未満ならば検証コードを取得するボタンはdisabledの长さが6ビット以上なら検証コードを取得してクリックしてカウントダウンcountdownボタンを表示することができます
dataで
data(){
    return{
        phone: '',//   
        time: 60 * 1000,//            60  *10000
        showCountdown: false//       
    }
}

methodsで
methods:{
    getSmsCode(){
        this.showCountdown = true//                          
    },
    countDownFinish(){//         
        this.showCountdown = false //     
    }
}