uniapp实现弹框确认倒计时功能

效果图：

这里为了更好实现功能，以及保证样式自然的情况下，借助了uview里的modal模态框 

代码如下： 

一个按钮点击事件触发弹框，通过插槽传入自定义确认按钮 

<button class="button" @click="topay">按钮</button>
<u-modal v-model="modalShow" :show-cancel-button="true" :content="modalContent">
	<!-- 自定义确认按钮 -->
	<template v-slot:confirm-button>
		<button class="confirmBtn" :disabled="countdown > 0" @click="confirmAction">{
   
   {countdown > 0 ? `${countdown}秒` : '确认'}}</button>
	</template>

</u-modal>

data声明：

data() {
			return {
				//弹框
				modalShow: false,
				modalContent: '您确定进行操作吗?',
				countdown: 0, // 初始倒计时时间
				timer: null, // 计时器
			}
		},

倒计时代码： 

// 倒计时
time() {
	this.countdown = 3;
	this.timer = setInterval(() => {
	    if (this.countdown > 0) {
			this.countdown -= 1;
	    } else {
			clearInterval(this.timer);
			this.timer = null;
	    }
    }, 1000);
},

触发弹框以及点击确认之后的代码： 

topay() {
	this.modalShow = true
    //在这边也可以给modalContent赋值传值，修改为动态的文本都可以
	this.time()
},

confirmAction() {
   //点击确认之后触发
}

自定义确认按钮css样式

/deep/.confirmBtn {
	height: 52px;
	line-height: 52px;
	background-color: #fff;
	border: none !important;
	color: #2979ff;
}
	
/deep/.confirmBtn::after {
	border: none !important;
}