Vue를 사용하여 카운트다운 버튼을 구현하는 방법

이번에는 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 = &#39;重新发送验证码&#39;
    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 = &#39;重新发送验证码&#39;
   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를 사용하여 프록시 프록시를 구현하는 방법

위 내용은 Vue를 사용하여 카운트다운 버튼을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!