Vue写一个简单的倒计时按钮功能

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

完成的效果如下:

 

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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)
  }
}

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

效果如下图:

 

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
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时清除同时器、重新设置按钮里的content、将totalTime重置为60以便下次使用。

倒计10秒的效果:

 

发现bug,多次点击之后,倒讲时速度变快,这是因为每次点击都会启动一个setInterval,这些setInterval都会减少totalTime。解决的方法也很简单:简单节流一下就好了,就是第一次点击按钮之后让countDonw这个函数的代码不可执行,等到倒计时结束之后才可以再次执行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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)
}

在data里添加canClick,默认是true,如果canClick为true,countDown里的代码可以执行,如果是false就不行。每执行一次就将canClick设为false,而只在倒计时结束的时候再改为true。这样刚才的问题就没有了。

 

到这里其实就差不多了,不过还可以调整下样式:

<button class="button" :class="{disabled: !this.canClick}" @click="countDown">
...
.disabled{
 background-color: #ddd;
 border-color: #ddd;
 color:#57a3f3;
 cursor: not-allowed; // 鼠标变化
}

 

效果:

 

来源:https://www.jb51.net/article/138555.htm

 

 

 

 

另一种方式,通过v-show来展示

div  class="login_list">
    <span class="login_title">短信验证码:</span>
    <input class="auth_input" type="text"  placeholder="输入验证码" />
    /*上面两行可忽略*/
    /*
    * 下面两行是本次重点,通过v-show来控制该显示哪一行
    * 首先显示.auth_text_blue 通过点击事件getAuthCode来获取手机验证码。
    * 同时改变sendAuthCode的值,隐藏自身,显示倒计时.auth_text
    * 
    */
    <span v-show="sendAuthCode" class="auth_text auth_text_blue"  @click="getAuthCode">获取验证码</span>
    <span v-show="!sendAuthCode" class="auth_text"> <span class="auth_text_blue">{{auth_time}} </span> 秒之重新发送验证码</span> 
</div>

 

var vm = new Vue({
    el: ".vueBox",
    data: {
        sendAuthCode:true,/*布尔值,通过v-show控制显示‘获取按钮’还是‘倒计时’ */
        auth_time: 0, /*倒计时 计数器*/
    },
    methods: {
        getAuthCode:function () {
            this.sendAuthCode = false;
            this.auth_time = 6;
            var auth_timetimer =  setInterval(()=>{
                this.auth_time--;
                if(this.auth_time<=0){
                    this.sendAuthCode = true;
                    clearInterval(auth_timetimer);
                }
            }, 1000);
        }
    }
});
posted @ 2019-12-24 15:54  阿蒙不萌  阅读(4171)  评论(1编辑  收藏  举报