집 > 기사 > 웹 프론트엔드 > Vue는 카운트다운 버튼 효과를 만듭니다.

Vue는 카운트다운 버튼 효과를 만듭니다.

php中世界最好的语言원래의: 2018-06-07 10:38:213755검색

이번에는 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: &#39;发送验证码&#39;,
   totalTime: 10,
   canClick: true //添加canClick
  }
}
...
countDown () {
 if (!this.canClick) return  //改动的是这两行代码
 this.canClick = false
 this.content = this.totalTime + &#39;s后重新发送&#39;
 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!