:::: 개발 ::::/::: Vue:::

vue 본인인증 sms 3분 유효체크 (타이머,인터벌)

nayha 2019. 6. 7. 17:56

export default {

	data() {
		return{
			timeCounter : 180, //3분
			resTimeData : ''
		}
	}
	create(){
		//3분 유효 타이머 시작 
		this.start()
	}
	methods: {
		start(){
			// 1초에 한번씩 start 호출
			this.polling = setInterval( () =>{
				timeCounter-- //1찍 감소
				resTimeData = this.preTime()
				if (this.timeCounter <= 0) this.timeStop()
			},1000)
		},
		// 시간 형식으로 변환 리턴
		prettyTime() {
		  let time = this.timeCounter / 60
		  let minutes = parseInt(time)
		  let secondes = Math.round((time - minutes) * 60)
		  return this.pad(minutes, 2) + ":" + this.pad(secondes, 2)
		},	
		// 2자리수로 만들어줌 09,08...
		pad(n, width) {
		  n = n + '';
		  return n.length >= width ? n : new Array(width - n.length + 1).join('0') + n
		},		
		timeStop() {
		  clearInterval(this.polling)
		},		
		// 재발행
		smsReset() {
		  clearInterval(this.polling)
		  this.tcounter = 180
		  this.startTime()
		},		
	},
	beforeDestroy() {
		clearInterval(this.polling)
	}
    
}
반응형