<template>
  <div class="verification-code">
    <div v-if="codeStatus" class="time">{{ codeTime }}S</div>
    <el-button v-else style="color: #5AC4FC; height: 55px;" @click="getCode">获取验证码 </el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      codeTime: 60,
      codeStatus: false
    }
  },
  methods: {
    getCode() {
      this.codeStatus = true
      const interval = setInterval(() => {
        this.codeTime -= 1
        if (this.codeTime === 0) {
          this.codeStatus = false
          clearInterval(interval)
        }
      }, 1000)
    }
  }
}

</script>

<style lang="scss" scoped>
.verification-code {
  .time {
    min-width: 57px;
    text-align: center;
    height: 35px;
    line-height: 35px;
  }
}
</style>
