开发验证码倒计时功能的必要性
主要是为了防止用户频繁的点击，获取短信验证码是有时间限制的，这样就可以让用户在规定的时间内只能点击一次，在客户端就只是告知用户这个什么时候可以点击，在服务端就可以更少的调用这个接口，不去影响服务器的性能
每点击一次都会发送一条短信，也是会收费用的，限制用户点击次数也可以节省费用
设置短信验证码可以定位到目标用户，提高安全性
 

 <el-button v-bind:class="{grey:isGrey,blue:!isGrey}" v-bind:disabled="dis" type="primary" @click="getCode"><span v-if="show">发送验证码</span><span v-else>重新发送({{count}}s)</span></el-button>

js代码

<script>
export default {data() {return {dis: false,show: true,isGrey: false, //按钮样式timer: null, //设置计时器,count: ""};},methods: {getCode() {let TIME_COUNT = 60;if (!this.timer) {this.count = TIME_COUNT;this.isGrey = true;this.show = false;this.dis = true;this.timer = setInterval(() => {if (this.count > 0 && this.count <= TIME_COUNT) { this.count--;} else {this.dis = false;this.isGrey = false;this.show = true;clearInterval(this.timer);this.timer = null;}}, 1000);}}}
};
</script>

css代码

 .grey{background-color: #EDEEF1;border-color: #EDEEF1;color:#666;width: 30%;}.blue{background-color: #64A0DD;border-color: #64A0DD;}