이번에는 Vue를 사용하여 카운트다운 버튼을 구현하는 방법과 Vue를 사용하여 카운트다운 버튼을 구현할 때 어떤 노트가 있는지 보여드리겠습니다. 다음은 실제 사례입니다.
프로젝트 개발을 하다보면 인증코드를 보내고 클릭하면 60초 카운트다운이 되는 버튼을 자주 접하게 되는데, 매우 흔하면서도 매우 간단하지만 이 글을 작성할 때 주의해야 할 사항이 있습니다. 버튼을 눌러주세요. 궁금한 점이 있으면 나와서 바로잡아주세요!
완성된 효과는 다음과 같습니다.
효과를 더 빨리 보여주기 위해 시간을 5초로 설정했습니다. 버튼을 클릭하면 카운트다운이 표시되고 동시에 버튼을 클릭할 수 없게 되며 스타일도 변경되고 마우스를 가리키는 모양도 변경됩니다.
다음으로 코드를 사용하여 구현합니다.
<button class="button" @click="countDown"> {{content}} </button> ... data () { return { content: '发送验证码', // 按钮里显示的内容 totalTime: 60 //记录具体倒计时时间 } }, methods: { countDown() { let clock = window.setInterval(() => { this.total-- this.content = this.total + 's后重新发送' },1000) } }
두 개의 데이터를 데이터에 추가합니다. 하나는 시간을 기록하는 데 사용되고 다른 하나는 카운트다운 버튼의 특정 콘텐츠를 유지하는 데 사용됩니다. countDown 함수에서는 setInterval 타이머를 사용하여 매초마다 totalTime을 1씩 감소시키고 버튼에 표시되는 내용을 변경합니다. 화살표 함수는 window.setInterval에서 사용됩니다. 외부 this를 자동으로 바인딩하므로 먼저 저장할 필요가 없습니다.
효과는 아래와 같습니다:
하지만 이 버튼에는 여전히 몇 가지 문제가 있습니다.
버튼을 클릭하면 1초 후 59초부터 바로 카운트다운이 시작되고 가운데 60이 누락됩니다.
카운트다운 중에도 클릭할 수 있습니다.
카운트다운이 아직 지워지지 않았습니다
다음으로 이러한 문제를 해결하려면 카운트다운 기능을 계속해서 개선해야 합니다.
countDown () { this.content = this.totalTime + 's后重新发送' //这里解决60秒不见了的问题 let clock = window.setInterval(() => { this.totalTime-- this.content = this.totalTime + 's后重新发送' if (this.totalTime < 0) { //当倒计时小于0时清除定时器 window.clearInterval(clock) this.content = '重新发送验证码' this.totalTime = 60 } },1000) },
위 코드는 60 누락 문제를 해결하는 동시에 totalTime이 0보다 작을 때 동기화 장치를 지우고 버튼의 내용을 재설정하며 다음 번 사용을 위해 totalTime을 60으로 재설정합니다.
10초 카운트다운 효과:
버그를 발견했습니다. 여러 번 클릭하면 되감기 속도가 빨라집니다. 이는 클릭할 때마다 setInterval이 시작되고 이러한 setInterval이 totalTime을 줄이기 때문입니다. 해결 방법도 매우 간단합니다. 즉, 버튼을 처음 클릭한 후 countDonw 함수의 코드를 실행할 수 없게 만들고 카운트다운이 끝날 때까지 기다렸다가 다시 실행하면 됩니다.
data () { return { content: '发送验证码', totalTime: 10, canClick: true //添加canClick } } ... countDown () { if (!this.canClick) return //改动的是这两行代码 this.canClick = false this.content = this.totalTime + 's后重新发送' let clock = window.setInterval(() => { this.totalTime-- this.content = this.totalTime + 's后重新发送' if (this.totalTime < 0) { window.clearInterval(clock) this.content = '重新发送验证码' this.totalTime = 10 this.canClick = true //这里重新开启 } },1000) }
데이터에 canClick을 추가하세요. 기본값은 true입니다. canClick이 true이면 countDown의 코드가 실행될 수 있습니다. canClick을 실행할 때마다 false로 설정하고, 카운트다운이 끝날 때만 true로 변경합니다. 이렇게 하면 이제 문제가 사라집니다.
실제로는 거의 그렇지만 스타일을 조정할 수도 있습니다.
<button class="button" :class="{disabled: !this.canClick}" @click="countDown"> ... .disabled{ background-color: #ddd; border-color: #ddd; color:#57a3f3; cursor: not-allowed; // 鼠标变化 }
효과:
이 카운트다운 버튼은 매우 간단하지만 처음 썼을 때는 여전히 멈췄습니다. 매우 지저분했고, 그 당시에는 기능 조절이라는 개념도 몰랐습니다.
이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
Vue를 사용하여 양방향 데이터 바인딩을 작성하는 방법
위 내용은 Vue를 사용하여 카운트다운 버튼을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!