uniapp 微信小程序点击开始倒计时

一、示例

当点击按钮时就开始倒计时

代码

<template>
  <view class="sq_box">
    <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>
  </view>
</template>

<script>
  export default {
    name: 'GeneratePoster',
    data() {
      return {
        //弹框
        				modalShow: false,
        				modalContent: '您确定进行操作吗?',
        				countdown: 0, // 初始倒计时时间
        				timer: null, // 计时器
      };
    },
    onLoad(option) {
    },

    methods: {
      // 倒计时
      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() {
         //点击确认之后触发
      }
    }
  };
</script>

<style lang="scss">
.confirmBtn{
  height: 52px;
  line-height: 52px;
  background-color: #fff;
  border: none !important;
  color: #2979ff;
}
  	
  .confirmBtn{
      border: none !important;
    }
</style>