vue短信验证码倒计时函数

倒计时函数

const downTime = (e, Style) => {
  // 倒计时
  let btnStyle = Style
  let _this = e.target
  let time = 60
  let type = parseInt(_this.getAttribute('data-type'))
  if (type === 1) {
    let interval = setInterval(() => {
      _this.innerHTML = `${time}s重发`
      _this.style.color = btnStyle.startColor
      _this.style.border = btnStyle.startBorder
      _this.style.background = btnStyle.startBg
      _this.setAttribute('disabled', 'disabled')
      time--
      if (time === -1) {
        _this.innerHTML = '重新获取'
        _this.style.color = btnStyle.endColor
        _this.style.border = btnStyle.endBorder
        _this.style.background = btnStyle.endBg
        clearInterval(interval)
        _this.setAttribute('data-type', 1)
        _this.removeAttribute('disabled', 'disabled')
      }
    }, 1000)
    _this.setAttribute('data-type', 0)
    return true
  } else {
    return false
  }
}

import引入函数

import { throttle, downTime } from 'common/js/util'

模板

<button  data-type="1" @click="getMessage($event)">获取验证码</button>

自定义样式

data () {
    return {
		downtimeStyle: {
		  endColor: '#2e8cea',
		  endBorder: '',
		  endBg: '',
		  startColor: '#ccc',
		  startBorder: '',
		  startBg: ''
		}
	}
}

函数调用

if (downTime(e, this.downtimeStyle)){
}