1. 程式人生 > >vue 驗證碼倒計時60s

vue 驗證碼倒計時60s

//html
 <div class="input-div" v-show="formData.phone">
     <input type="text" class="input code" name="code" v-model.trim="formData.code" placeholder="驗證碼">
     <button @click="getCode(formData)" class="code-btn" :disabled="!show">
         <span v-show="show">獲取驗證碼</span>
<span v-show="!show" class="count">
{{count}} s</span> </button> </div>
//js
const TIME_COUNT = 60;
 data(){
      return {
        formData: {
          phone:'',
          code:'',
        },
        show: true,
        count: '',
        timer: null,
      }
    },

    methods:{
        getCode(formData){
            if
(!this.timer) { this.count = TIME_COUNT; this.show = false; this.timer = setInterval(() => { if (this.count > 0 && this.count <= TIME_COUNT) { this.count--; } else { this
.show = true; clearInterval(this.timer); this.timer = null; } }, 1000) } } }