<template>
  <!-- 倒计时按钮 -->
  <el-button type="primary" :disabled="disable" :class="{ codeGeting:isGeting }" @click="getVerifyCode">{{getCode}}</el-button>
</template>

<script>
export default {
  name: 'demo',
  data () {
    return {
      getCode: '获取验证码',
      isGeting: false,
      count: 60,
      disable: false
    }
  },
  methods: {
    getVerifyCode () {
      var countDown = setInterval(() => {
        if (this.count < 1) {
          this.isGeting = false
          this.disable = false
          this.getCode = '获取验证码'
          this.count = 6
          clearInterval(countDown)
        } else {
          this.isGeting = true
          this.disable = true
          this.getCode = this.count-- + 's后重发'
        }
      }, 1000)
    }
  }
}
</script>

<style>
.codeGeting{
    background: #cdcdcd;
    border-color: #cdcdcd;
}
</style>