vue倒计时

最新推荐文章于 2023-05-26 12:03:11 发布

原创最新推荐文章于 2023-05-26 12:03:11 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

23 篇文章

订阅专栏

该博客转自网络并做简单修改，主要涉及前端的template、script和css相关内容，方便后续取用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

声明：此篇文章转自https://www.jb51.net/article/138555.htm，有过简单修改，便于以后自己需要时直接拿

template

<p :class="['getcode',!canClick?'getcodeing':'']" @click="getCode()">{{content}}</p>

script

data() {
    return {
		// 获取验证码相关
		content: '发送验证码',	//按钮显示内容
		totalTime: 10,		    //记录具体倒计时时间
		canClick: true,		    //是否可以点击(在倒计时过程中不可点击)
    };
},

methods:{
    // 点击获取验证码
    getCode() {
		this.content = this.totalTime + 's后重新发送' //这里解决60秒不见了的问题
		if(!this.canClick) return;					//默认true,若为false,不可点击,跳出循环
		this.canClick = false						//使其不可点击
		let clock = window.setInterval(() => {
			this.totalTime--
			this.content = this.totalTime + 's后重新发送'
			if (this.totalTime < 0) {     			//当倒计时小于0时清除定时器
				window.clearInterval(clock)
				this.content = '重新发送验证码'
				this.totalTime = 10
				this.canClick = true				//倒计时结束,使其可点击
			}
		},1000)
    },
}

css


.getcode{
	font-size: 0.24rem;
	color: #55ABEB;
	background: #DFEEFA;
	padding: 0.12rem 0.15rem;
	margin-top: -0.2rem;
	border-radius: 2rem;
	float: right;
}
.getcodeing{
	color: #9B9B9B;;
	background: #F2F2F2;
}