vue验证码倒计时

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

完成的效果如下：

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

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

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

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

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

接下