零基础开发倒计时组件！轻松实现无样式倒计时！

2023-07-13 19:11:02

构建一个无缝的 Vue3 倒计时组件

在电子商务网站的限时促销活动或活动页面，倒计时组件几乎是无处不在。构建一个基本的倒计时组件并不复杂，但如果你希望它无样式，就需要深入考虑一些方面。

在这篇综合指南中，我们将探讨如何使用 Vue3 构建一个简约的无样式倒计时组件。尽管倒计时的视觉风格可能因场景而异，但其背后的逻辑却始终如一。你可以根据自己的需求，采用不同的方法实现倒计时组件。

步骤一：启动 Vue 项目

首先，创建一个新的 Vue 项目。如果你尚未安装 Vue CLI，请先进行安装：

npm install -g @vue/cli

接下来，创建一个新的 Vue 项目：

vue create countdown-timer

步骤二：安装必需依赖项

为了实现倒计时组件，需要安装几个依赖项：

npm install --save moment

步骤三：构建组件

在 src 目录下，创建一个名为 CountdownTimer.vue 的新文件，并粘贴以下代码：

<template>
  <div>
    <span>{{ hours }}</span>:<span>{{ minutes }}</span>:<span>{{ seconds }}</span>
  </div>
</template>

<script>
import moment from 'moment';

export default {
  name: 'CountdownTimer',
  props: {
    targetDate: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      hours: '00',
      minutes: '00',
      seconds: '00'
    };
  },
  mounted() {
    this.interval = setInterval(() => {
      const now = moment();
      const target = moment(this.targetDate);
      const diff = target.diff(now);

      this.hours = Math.floor(diff / (1000 * 60 * 60)).toString().padStart(2, '0');
      this.minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)).toString().padStart(2, '0');
      this.seconds = Math.floor((diff % (1000 * 60)) / 1000).toString().padStart(2, '0');
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.interval);
  }
};
</script>

步骤四：使用组件

在 App.vue 文件中，添加以下代码：

<template>
  <div id="app">
    <countdown-timer target-date="2023-01-01 00:00:00"></countdown-timer>
  </div>
</template>

<script>
import CountdownTimer from './components/CountdownTimer.vue';

export default {
  name: 'App',
  components: {
    CountdownTimer
  }
};
</script>