注册/找回密码等功能中发送手机验证码后倒计时效果的实现，基于vue、element-ui

<template>
  <el-button size="small" type="primary" :disabled="disabled" @click="getVerifyCode">{{ btnText }}</el-button>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {
      disabled: false,
      btnText: '获取验证码'
    }
  },
  methods: {
    getVerifyCode() {
      // 调用你项目获取手机验证码的API,假设返回Promise对象
      API.getSmsCode()
        .then((res) => {
          // 将按钮设置为不可点击状态
          this.disabled = true
          // 60秒倒计时
          let time = 60
          let timer = setInterval(() => {
            if (time <= 0) {
              this.disabled = false
              this.btnText = '获取验证码'
              clearInterval(timer)
            } else {
              this.btnText = time + 's'
              time--
            }
          }, 1000)
        })
        .catch((err) => {
          console.log(err.message)
          this.disabled = false
        })
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">

</style>

 注：代码中的API.getSmsCode为自己项目中调取后端发送手机验证码API的方法，返回Promise对象，实际应用需要根据各自项目API设置修改。