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>
相关推荐
nhc0883 小时前
实体门店怎么利用小程序做好分销
小程序·软件开发
腾马科技6 小时前
微信小程序餐饮扫码点餐小程序堂食外卖桌台自助下单源码
微信小程序·小程序
用户6990304848759 小时前
uniapp 构建本地txt跨平台小程序、h5、app通用
微信小程序·uni-app
weixin_lynhgworld10 小时前
打造绿色生活新方式——旧物二手回收小程序系统开发之路
java·小程序·生活
胡八一10 小时前
使用qianjkun uniapp 主应用 集成 vue微应用
前端·vue.js·uni-app
游戏开发爱好者811 小时前
基于uni-app的iOS应用上架,从打包到分发的全流程
android·ios·小程序·https·uni-app·iphone·webview
ᥬ 小月亮12 小时前
Uniapp中自定义导航栏
javascript·css·uni-app
苹果电脑的鑫鑫17 小时前
微信开发者工具中模拟调试现场扫描小程序二维码功能
小程序
vayy1 天前
uniapp中 ios端 scroll-view 组件内部子元素z-index失效问题
前端·ios·微信小程序·uni-app
阿彬学java1 天前
Charles抓包微信小程序请求响应数据
微信小程序·小程序