vue3 之倒计时函数封装

jiojio冲冲冲

已于 2024-02-15 23:02:33 修改

阅读量791

点赞数 11

分类专栏： vue3 文章标签： vue3 element javascript

于 2024-02-15 22:54:31 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42268006/article/details/136124420

版权

vue3 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了如何在Vue中使用dayjs库实现倒计时功能，包括封装倒计时逻辑、使用ref管理时间、格式化时间以及在组件卸载时清除定时器。示例展示了如何在成功提交订单后显示剩余支付时间并进行倒计时。

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

理解需求

编写一个函数useCountDown可以把秒数格式化为倒计时的显示xx分钟xx秒
1️⃣formatTime为显示的倒计时时间
2️⃣start是倒计时启动函数，调用时可以设置初始值并且开始倒计时

实现思路分析

在这里插入图片描述

安装插件 dayjs

npm i dayjs

倒计时逻辑函数封装

// 封装倒计时逻辑函数
import { computed, onUnmounted, ref } from 'vue'
import dayjs from 'dayjs'
export const useCountDown = () => {
  // 1. 响应式的数据
  let timer = null
  const time = ref(0)
  // 格式化时间 为 xx分xx秒
  const formatTime = computed(() => dayjs.unix(time.value).format('mm分ss秒'))
  // 2. 开启倒计时的函数
  const start = (currentTime) => {
    // 开始倒计时的逻辑
    // 核心逻辑的编写：每隔1s就减一
    time.value = currentTime
    timer = setInterval(() => {
      time.value--
    }, 1000)
  }
  // 组件销毁时清除定时器
  onUnmounted(() => {
    timer && clearInterval(timer)
  })
  return {
    formatTime,
    start
  }
}

页面使用

import { useCountDown } from '@/composables/useCountDown'
const { formatTime, start } = useCountDown()
// 获取数据
const payInfo = ref({})
const getPayInfo = async () => {
  const res = await getOrderAPI(route.query.id)
  payInfo.value = res.result
  // 初始化倒计时秒数
  start(res.result.countdown)
}
onMounted(() => getPayInfo())


<template>
        <div class="tip">
          <p>订单提交成功！请尽快完成支付。</p>
          <p>支付还剩 <span>{{ formatTime }}</span>, 超时后将取消订单</p>
        </div>
</template>