Vue는 카운트다운 버튼을 구현합니다.

这次给大家带来Vue实现倒计时按钮，Vue实现倒计时按钮的注意事项有哪些，下面就是实战案例，一起来看一下。

在项目开发里，我们经常会遇到发送验证码、点击了之后有60秒倒计时的按钮，很常见却也很简单，但是在写这个按钮的时候有个别地方还要注意下，今天写出来，如有问题欢迎指正！

完成的效果如下：

 

为了更快显示出效果，我把时间设成了5秒。按钮在点击之后会出现倒计时，同时按钮变为不可点击状态，样式也发生变化，鼠标悬浮上的样子也会发生变化。

接下来我们用代码来实现：

<button>
 {{content}}
</button>
...
data () {
  return {
   content: '发送验证码',  // 按钮里显示的内容
   totalTime: 60      //记录具体倒计时时间
  }
},
methods: {
  countDown() {
    let clock = window.setInterval(() => {
      this.total--
      this.content = this.total + 's后重新发送'
    },1000)
  }
}

在data里加了两条数据，一条用来记录时间，一条用来盛放倒计时按钮的具体内容。在countDown函数里我们用了setInterval定时器，每隔一秒totalTime减1，同时更改按钮里显示的内容。 在window.setInterval里用了箭头函数，因为它会自动绑定外面的this，所以就不用先存下this了。

效果如下图：

 

但是这个按钮还有一些问题：

点击了按钮之后过了1秒就直接从59秒开始倒计时了，中间的60不见了
倒计时的时候还可以点击
还没有清除倒计时

接下来需要继续完善countDown函数来解决这些问题。

countDown () {
 this.content = this.totalTime + 's后重新发送' //这里解决60秒不见了的问题
 let clock = window.setInterval(() => {
  this.totalTime--
  this.content = this.totalTime + 's后重新发送'
  if (this.totalTime <p style="text-align: left;">上面的代码解决了60不见的问题，同时当totalTime小于0时清除同时器、重新设置按钮里的content、将totalTime重置为60以便下次使用。</p><p style="text-align: left;">倒计10秒的效果：</p><p style="text-align: left;"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/736f2194941381ade91bf29ce90d3696-2.gif?x-oss-process=image/resize,p_40" class="lazy" alt=""> </p><p   style="max-width:90%">发现bug，多次点击之后，倒讲时速度变快，这是因为每次点击都会启动一个setInterval，这些setInterval都会减少totalTime。解决的方法也很简单：简单节流一下就好了，就是第一次点击按钮之后让countDonw这个函数的代码不可执行，等到倒计时结束之后才可以再次执行。</p><pre class="brush:php;toolbar:false">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 <p style="text-align: left;">在data里添加canClick，默认是true，如果canClick为true，countDown里的代码可以执行，如果是false就不行。每执行一次就将canClick设为false，而只在倒计时结束的时候再改为true。这样刚才的问题就没有了。</p><p style="text-align: left;"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/736f2194941381ade91bf29ce90d3696-3.gif?x-oss-process=image/resize,p_40" class="lazy" alt=""> </p><p   style="max-width:90%">到这里其实就差不多了，不过还可以调整下样式：</p><pre class="brush:php;toolbar:false"><button>
...
.disabled{
 background-color: #ddd;
 border-color: #ddd;
 color:#57a3f3;
 cursor: not-allowed; // 鼠标变化
}</button>

效果：

 

这个倒计时按钮十分简单，但是我第一次写的时候还是写的很乱，而且那个时候还不知道函数节流的概念。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue之.sync修饰符使用详解

jQuery$. 和 $().使用详解

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