温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么在Vue中实现一个倒计时按钮功能

发布时间:2021-05-22 17:09:43 来源:亿速云 阅读:424 作者:Leah 栏目:web开发

怎么在Vue中实现一个倒计时按钮功能?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

<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了。

效果如下图:

怎么在Vue中实现一个倒计时按钮功能 

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

点击了按钮之后过了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 < 0) {     //当倒计时小于0时清除定时器
    window.clearInterval(clock)
    this.content = '重新发送验证码'
    this.totalTime = 60
    }
 },1000)
},

上面的代码解决了60不见的问题,同时当totalTime小于0时清除同时器、重新设置按钮里的content、将totalTime重置为60以便下次使用。

倒计10秒的效果:

怎么在Vue中实现一个倒计时按钮功能 

发现bug,多次点击之后,倒讲时速度变快,这是因为每次点击都会启动一个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)
}

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

怎么在Vue中实现一个倒计时按钮功能 

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

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

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和dom,可以大大提升访问速度和用户体验。

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注亿速云行业资讯频道,感谢您对亿速云的支持。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue
AI