短信验证，冷却时间

短信验证，倒计时60秒

由于是使用vue进行编写，vant的框架，里面会有vant的组件，但是核心代码是js

//html
// 我这里是做了样式判断 如果是不可点击则用前一种css否则用后者
<div :class="canClick==true?'getVerificationCode':'getVerificationCode-on'" @click="getVerificationCode">
	<div>{{content}}</div>
</div>

// data
content:'提交', // 按钮初始的文字
time:60,  //倒计时时间
canClick: true, // 可点击获取验证码条件
toSubmit: 0 , // 是否提交过

// js
getVerificationCode(){
	 //判断是否可点击
	 if (!this.canClick) return
	 // 做了一个vant的加载动画，可不要
	 Toast.loading({
	   message: '加载中...',
	   forbidClick: true,
	   duration: 0, 
	   loadingType: 'spinner'
	 });
	 //你的接口
	 .then(res => {
	   if(res.errcode === 1) {
	   	 // 接口成功（发出消息）
	     Toast.clear();
	     Toast.success(res.errmsg)
	     console.log('成功')
	     this.canClick = false
	     this.content = this.time + 's后可发送'
	     // 时间自减
	     let clock = window.setInterval(() => {
	       this.time--
	       this.content1 = this.time + 'sTente'
	       // 时间小于0的时候恢复
	       if (this.time < 0) {
	         window.clearInterval(clock)
	         this.content = '提交'
	         this.time = 60
	         this.canClick = true
	       }
	     },1000)
	   }
	 })
	 .catch(err => {
	   console.log(err)
	 })
},

.getVerificationCode{
  text-align: center;
  background-color: rgb(5,155,251);
  color: white;
  width: 100px;
  height: 28px;
  font-size: 12px;
  line-height: 13px;;
  display: -webkit-box;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 10px;
}
.getVerificationCode-on{
  text-align: center;
  background-color: #cccccc;
  color: white;
  width: 100px;
  height: 28px;
  font-size: 12px;
  line-height: 13px;;
  display: -webkit-box;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 10px;
}