vue--手机号获取验证码组件

组件：

/*
 * @Author: 
 * @Date: 2020-06-08 17:13:55
 * @LastEditors: 
 * @LastEditTime: 2020-06-08 17:13:56
 * @Description: 
 */ 
<template>
  <div class="sem_verifyTimer">
    <div
      :class="isHasPhone ? 'propDisabled' : verifyDisabled ? 'verifyDisabled' : 'verifyBtn'"
      @click="isHasPhone?null:verifyDisabled?null:$emit('getVerifyCode')"
      :disabled="verifyDisabled"
    >{{verifyText}}</div>
  </div>
</template>

<script>
export default {
  name: "VerifyTimer",
  props: ["isHasPhone", "isSendFlag", "changeSendFlag"],
  data() {
    return {
      verifyDisabled: false,
      verifyText: "获取验证码",
      timer: null
    };
  },

  watch: {
    isSendFlag(newV, oldV) {
      //isSendFlag为true值，调用定时器
      newV && this.codeCountDown();
    }
  },
  destroyed() {
    //销毁定时器
    clearInterval(this.timer);
    this.timer = null;
  },
  methods: {
     //60分钟倒计时
    codeCountDown() {
      this.$emit("changeSendFlag");
      if (this.verifyText == "获取验证码") {
        let times = 60;
        this.timer = setInterval(() => {
          times--;
          if (times <= 0) {
            this.verifyDisabled = false;
            this.verifyText = "获取验证码";
            clearInterval(this.timer);
            this.timer = null;
          } else {
            this.verifyDisabled = true;
            this.verifyText = `(${times}s)后重发验证码`;
          }
        }, 1000);
      }
    },
    handleClick() {
      if (this.isHasPhone) {
        return null;
      } else if (this.verifyDisabled) {
        return null;
      } else {
        this.$emit("getVerifyCode");
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.sem_verifyTimer {
  flex: none;
  margin-left: 8px;
  width: 122px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  background: $bg_color2;
  border-radius: 4px;
  color: $main_color_1;
  @include fontSize(14);
}

.sem_verifyTimer .propDisabled {
  cursor: no-drop;
  color: rgba(87, 169, 255, 0.4);
}

.sem_verifyTimer .verifyDisabled {
  cursor: no-drop;
  color: #b9bcc5;
}
</style>
 

引用：

 <VerifyTimer
    :isHasPhone="!formData.phone"
    :isSendFlag="sendFlag"
    @changeSendFlag="changeSendFlag"
    @getVerifyCode="getVerifyCode"
 />
 
  data(){
     return{
        formData:{
           phone:"",
           verifiyCode:''
        },
        sendFlag:false,//监听定时器状态
     }
  },
   methods: {
     changeSendFlag(){
        this.sendFlag = false
     },
     getVerifyCode(){
        console.log('getVerifyCode');
        this.sendFlag = true
        
     }
  }