如何使用dayjs库轻松创建倒计时功能

遇到的问题和知识点：

1、找不到dayjs.duration()方法。原因是没有引入dayjs.extend(require('dayjs/plugin/duration'));若dayjs库中没有duration文件，重新执行npm install dayjs --save更新dayjs库；duration参考https://day.js.org/docs/en/plugin/duration，里面有dayjs的相关文档。

2、setInterval(功能语句或函数, 3000)定时器方法;与clearInterval(setInterval生成的定时器)停止定时器方法。

3、vue语法 `${ }` （模版字符串）

复制下面的vue代码放到工程里面打开即可看到效果。

<template>

    <div class="CountDown">

        {{ countObj.showTime }}

    </div>

</template>

<script>

import dayjs from 'dayjs';

dayjs.extend(require('dayjs/plugin/duration'));

export default {

    name: 'CountDown',

    data() {

        return {

            countObj: {

                endTime: dayjs().add(10, 'm').toISOString(),

                showTime: "00:10:00",

            },

            payTimer: null,

        }

    },

    mounted() {

        this.payTimer = setInterval(() => {

            this.countDown();

        }, 1000);

    },

    methods: {

        countDown() {

            let duration = dayjs.duration(dayjs(this.countObj.endTime) - dayjs());

            let hours = duration.hours();

            let minutes = duration.minutes() % 60 < 10 ? '0' + (duration.minutes() % 60) : duration.minutes() % 60;

            let seconds = duration.seconds() % 60 < 10 ? '0' + (duration.seconds() % 60) : duration.seconds() % 60;

            if (hours <= 0 && minutes <= 0 && seconds <= 0) {

                this.countObj.showTime = '倒计时结束';

                clearInterval(this.payTimer);

            } else {

                this.countObj.showTime = `${hours}:${minutes}:${seconds}`;

            }

        }

    }

}

</script>