【VUE倒计时功能】例：发送验证码

倒计时组件 template

<template>
  <el-button class="captcha-img captcha-tel" :disabled="canClick">
    {{this.getAgain ? this.count + 's后获取': '发送验证码'}}
  </el-button>
</template>

由父组件传来 初始倒计时数据countNum

    props: {
      countNum: {
        type: Number
      }
    },
    data () {
      return {
        // 默认倒计时时间
        getAgain: false,
        canClick: false,
        timer: null,
        count: 60
      }
    },

倒计时方法

    methods: {
      // 倒计时功能
      countDown (countTime) {
        let vm = this;
        vm.count = vm.countNum;
        if (!vm.timer) {
          vm.timer = setInterval(() => {
            if (vm.count > 1 && vm.count <= countTime) {
              vm.getAgain = true;
              vm.canClick = true;
              vm.count--;
            } else {
              clearInterval(vm.timer);
              vm.timer = null;
              vm.getAgain = false;
              vm.canClick = false;
              vm.count = vm.countNum;
　　　　　　　　　　// 倒计时结束，可以向父组件emit重置图片验证码方法
              vm.$emit('countCallBack')
            }
　　　　　　　　　　// 该方法用于实时向外传递倒计时的状态，以控制父组件中是否可以点击触发发送验证码方法
            vm.$emit('clickState', vm.getAgain)
          }, 1000)
        }
      }
    }

父组件引用

          <div @click="getTelCode" class="captchaBox">
            <countDown
              ref="countDown"
              @clickState="clickState"
              @countCallBack="createImgCode('modifyPwd')"
              :countNum="count"
            ></countDown>
          </div>

1.点击的时候getTelCode事件，发送验证码时

      // 获取手机验证码
      getTelCode () {
        let vm = this;
        // 如果获取过验证码，倒计时过程中，不允许点击发请求
        if (vm.countState) {
          return false;
        }
        if (!vm.countState) {
          telphoneAccount({
            functionId: 'modifyPwd',
            checkCode: vm.pwdForm.imgCaptcha
          }).then(res => {
            if (res.data.code === 'SUC_0001') {
              // 发送成功 触发子组件内的countDown倒计时事件
              vm.phoneSendScs = true;
              vm.$refs.countDown.countDown(60);
            }  else {
              // 发送失败，执行规定的事件
            }
          })
        }