반응형
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)
}
}
반응형
':::: 개발 :::: > ::: Vue:::' 카테고리의 다른 글
회사에서 npm install 안될때 (0) | 2023.01.26 |
---|---|
nuxt 에서 prettier -fix error (0) | 2019.08.06 |
vue router link 종류 정리 (0) | 2019.06.18 |
vue el-checkbox @click 안먹음 @change 로 이벤트.. (0) | 2019.06.10 |
VUE el-table colspan , rowspan (0) | 2019.05.09 |
vue local / dev /production (0) | 2019.04.30 |
VUE 시작일 이전으로 종료일 설정 할 수 없도록 (0) | 2019.04.23 |
VUE 셀렉트박스(자식(component 제어) 폼 검색 영역 초기화 (0) | 2019.04.19 |