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

一、示例

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

代码

bash 复制代码
<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>
相关推荐
weixin_lynhgworld26 分钟前
剧本杀小程序系统开发:构建数字化剧本杀生态圈
大数据·小程序·剧本杀
icebreaker34 分钟前
weapp-tailwindcss 已支持 uni-app x 多端构建
前端·javascript·uni-app
落雪小轩韩12 小时前
微信小程序性能优化与内存管理
微信小程序
徐礼昭|商派软件市场负责人1 天前
从“多、老、旧”到“4i焕新”:品牌官方商城(小程序/官网/APP···)的范式跃迁与增长再想象
小程序·商城系统·零售
胡西风_foxww2 天前
微信小程序转Vue2组件智能提示词
微信小程序·小程序·提示词·智能体·vue2组件
七七软件开发2 天前
一对一交友小程序 / APP 系统架构分析
java·python·小程序·系统架构·php
2501_916007472 天前
iPhone查看App日志和系统崩溃日志的完整实用指南
android·ios·小程序·https·uni-app·iphone·webview
说私域2 天前
基于开源链动2+1模式AI智能名片S2B2C商城小程序的私域流量拉新策略研究
人工智能·小程序·开源
2501_915918412 天前
iOS 抓不到包怎么办?全流程排查思路与替代引导
android·ios·小程序·https·uni-app·iphone·webview
HebyH_2 天前
uniapp如何封装uni.request 全局使用
uni-app