封装60秒倒计时vue组件

1、父组件 home.vue

<template><div><SendTime:type="type":maxCount="count":disabled="disabled"@successChange="sendChange"ref="SendTime"/></div>
</template>
<script>
import SendTime from "../components/sendTime/index.vue";
export default {components: { SendTime },data() {return {type:'phone',count:60,disabled:false};},methods:{sendChange(){console.log('发送验证码成功返回的状态')}}
};
</script>

2、子组件 sendTime.vue

<template><divclass="send_time":class="{send_disabled: disabled }"@click="sendTime"><span class="send_count" v-if="timeCount">{{ timeCount }}s </span>{{ msgTitle }}</div>
</template>
<script>
export default {props: {// 类型type: {type: String,required: true,}, //倒计时数maxCount: {type: Number,default: 60,}, //是否禁用disabled: {type: Boolean,default: false,},},data() {return {isLoading: false,isStart: false,timeCount: 0,};},computed: {msgTitle() {if (this.timeCount) {return "后重新发送";}if (this.isStart) {return "重新发送";}return "获取验证码";},},methods: {sendTime() {if (this.disabled) {return;}if (this.timeCount) {return;}// setTimeout代替调用接口，将后端返回的数据通过$emit传给父组件setTimeout(() => {this.startLoop();this.$emit("successChange");this.verbifyType();}, 1000);},verbifyType() { //给出提示是什么验证码if (this.type === "email") {console.log("邮箱验证码已发送，注意查收");} else {console.log("手机验证码已发送，注意查收");}},// 清除倒计时clearTimer() {if (this.$options.__tmp_timer) {clearTimeout(this.$options.__tmp_timer);this.$options.__tmp_timer = null;}},// 倒计时startLoop() {this.clearTimer();this.timeCount = this.maxCount;if (!this.isStart) {this.isStart = true;}const loopTime = (num) => {if (num === 0) {this.clearTimer();return;}this.$options.__tmp_timer = setTimeout(() => {let _num = num - 1;this.timeCount = _num;loopTime(_num);}, 1000);};loopTime(this.timeCount);},},destroyed() {this.clearTimer();},
};
</script>
<style scoped>
.send_time {font-size: 14px;font-weight: 400;color: #3300be;text-decoration: underline;position: relative;text-align: center;cursor: pointer;
}
.send_count{color: red;
}
.send_disabled {opacity: 0.6;cursor: not-allowed;
}
</style>```

封装60秒倒计时vue组件相关推荐

Vue实现发送短息60秒倒计时
Vue实现发送短息60秒倒计时 Vue实现注册账号时,发送短信60秒倒计时功能,并进行手机号校验的Demo案例,如果能帮到您,我感到非常荣幸,废话不多说,直接上干货, 首先来一个测试页面,引入Vue. ...
简单实现vue验证码60秒倒计时功能
简单实现vue验证码60秒倒计时功能 <span v-if="codeShow" @click="getPhoneCode">点击获取验证码< ...
vue获取手机验证码60秒倒计时，不能点击按钮
vue获取手机验证码60秒倒计时,不能点击按钮 export const resend = element => {console.log(element)var num = 60var tim ...
vue 微信录音倒计时_Vue实现发送短息60秒倒计时
原文:https://blog.csdn.net/weixin_43201015/article/details/84405352 Vue实现注册账号时,发送短信60秒倒计时功能,并进行手机号校验的D ...
vue中实现60秒倒计时
vue中实现60秒倒计时 <span>{{count}} s</span> data中: data(){return{show: true,count: '',timer: n ...
vue+elementui 实现点击验证码出现60秒倒计时
vue+elementui 实现点击验证码出现60秒倒计时 div部分 <div class="verCode@click="getVerCode":disable ...
vue页面实现短信验证码60秒倒计时
废话不多说,直接上代码. template <div class='single-wrapper fs14'><div class='single-mb'>短信验证</d ...
免费获取验证码60秒倒计时
免费获取验证码60秒倒计时 <!DOCTYPE html> <html> <head> <script src="http://libs.baidu ...
榛子云短信-微信小程序60秒倒计时插件
为了帮助开发者更便捷的使用微信小程序的短信验证码功能,特别是初学者更好的使用,榛子云短信特地开发了60秒倒计时插件,效果: 使用方法 1.引入插件countdown.js var CountDown ...
微信小程序60秒倒计时
大家可以直接使用插件: https://blog.csdn.net/zuoliangzhu/article/details/90140067 微信小程序发送短信验证码后60秒倒计时功能,效果图: 完整 ...

封装60秒倒计时vue组件

封装60秒倒计时vue组件相关推荐

最新文章

热门文章