倒计时 - 格式处理(分 - 秒) - 60秒倒计时(Vue3、H5)

最新推荐文章于 2024-08-19 16:42:47 发布

Yolo416

最新推荐文章于 2024-08-19 16:42:47 发布

阅读量1.1k

点赞数

分类专栏： vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/m0_50125215/article/details/119989570

版权

本文介绍了如何在Vue3中创建带有格式处理的倒计时效果，具体涉及到分-秒的格式化。同时，展示了Vue3发送验证码功能中的60秒倒计时实现。此外，还探讨了H5中的60秒倒计时逻辑封装，以及通过div标签和Vue传递参数来完成倒计时的具体代码示例。

摘要由CSDN通过智能技术生成

Vue3 倒计时效果 - 格式处理(分 - 秒)

下载dayjs

yarn add dayjs
or
npm i dayjs

import {
    useIntersectionObserver } from '@vueuse/core'
import {
    ref } from 'vue'
import dayjs from 'dayjs'
// 🔔 作业：倒计时效果
export const usePayTime = () => {
   
  const time = ref(0)
  const timeText = ref('')
  const {
    resume, pause } = useIntervalFn(() => {
   
    time.value--
    // 格式化后中文时间
    timeText.value = dayjs.unix(time.value).format('mm分ss秒')
    if (time.value <= 0) {
   
      pause()
    }
  }, 1000, {
    immediate: false })
  const start = (number) => {
   
    time.value = number
    // 格式化后中文时间
    timeText.value = dayjs.unix(time.value).format('mm分ss秒')
    resume()