vue中倒计时组件的实例代码

下面是“vue中倒计时组件的实例代码”的完整攻略。

1. 安装并引入插件

我们可以使用Vue插件vue-countdown来实现倒计时组件。首先需要安装该插件并引入：

npm install vue-countdown --save

import { CountDown } from 'vue-countdown';

2. 创建组件

我们可以使用CountDown组件来创建一个简单的倒计时：

<template>
  <div>
    <h1>倒计时剩余时间：{{ time }}</h1>
    <CountDown :time="countDown" @get-time="getTime"></CountDown>
  </div>
</template>

<script>
import { CountDown } from 'vue-countdown';

export default {
  name: 'CountDownDemo',
  components: { CountDown },
  data() {
    return {
      countDown: 10,
      time: '',
    };
  },
  methods: {
    getTime(time) {
      this.time = time;
    },
  },
};
</script>

在CountDown组件中有两个重要的属性：

• time: 倒计时时间，单位为秒
• @get-time: 发送当前倒计时剩余时间的事件

其中@get-time事件是在倒计时时运行的，我们可以通过该事件来获取当前倒计时的剩余时间。

3. 高级用法

除了基本的倒计时功能外，vue-countdown插件还提供了许多高级用法，例如可以自定义倒计时时间单位、倒计时过程中得到每一秒的回调函数等等。

下面是一个带有自定义单位和回调函数的倒计时组件：

<template>
  <div>
    <p>当前剩余时间：{{ time }}</p>
    <p>剩余时间（用时转换）：{{ formatTime }}</p>
    <CountDown
      :time="10000"
      :unit="unit"
      :countdown-interval="1000"
      :auto-start="false"
      @counting="onCounting"
      @get-time="onGetTime"
      ref="countdown"
    ></CountDown>
    <button @click="start">开始</button>
    <button @click="pause">暂停</button>
    <button @click="resume">继续</button>
  </div>
</template>

<script>
import { CountDown } from 'vue-countdown';

export default {
  name: 'CountDownDemo',
  components: { CountDown },
  data() {
    return {
      unit: ['天', '小时', '分', '秒'],
      time: 0,
      formatTime: '',
    };
  },
  methods: {
    onCounting(time) {
      console.log(`倒计时：${time[this.unit[0]]}${this.unit[0]}${time[this.unit[1]]}${this.unit[1]}${time[this.unit[2]]}${this.unit[2]}${time[this.unit[3]]}${this.unit[3]}`);
    },
    onGetTime(time) {
      this.time = time;
      this.formatTime = `${time.days}天${time.hours}小时${time.minutes}分${time.seconds}秒`;
    },
    start() {
      this.$refs.countdown.startCountDown();
    },
    pause() {
      this.$refs.countdown.pauseCountDown();
    },
    resume() {
      this.$refs.countdown.resumeCountDown();
    },
  },
};
</script>

在该组件中，我们通过以下属性来实现特定的功能：

• unit: 自定义单位
• countdown-interval: 倒计时的时间间隔，默认为1000ms
• auto-start: 是否自动开始，默认为true
• @counting: 每记一秒执行的回调函数
• ref: ref属性用于获取组件实例，从而调用组件暴露出的方法。在上方的示例中我们使用$refs.countdown获取组件实例，并调用组件实例中的方法进行倒计时。

示例说明

下面，我们通过两个示例说明实现一个倒计时组件的过程：

示例1

我们想要实现一个简单的倒计时组件，时间为20秒，每秒钟更新一次剩余时间，当倒计时结束时，弹出一个提示框。

首先，需要安装vue-countdown插件并在组件中引入：

npm install vue-countdown --save

import { CountDown } from 'vue-countdown';

然后创建组件：

<template>
  <div>
    <CountDown :time="20" @expired="showMsg"></CountDown>
  </div>
</template>

<script>
import { CountDown } from 'vue-countdown';
import { Message } from 'element-ui';

export default {
  name: 'CountDownDemo',
  components: { CountDown },
  methods: {
    showMsg() {
      Message({
        message: '倒计时结束！',
        type: 'success',
      });
    },
  },
};
</script>

在此示例中，我们使用了插件组件中提供的expired事件来判断倒计时是否结束，如果倒计时结束则调用showMsg方法弹出提示框。

示例2

我们想要实现一个带有暂停和开始功能的倒计时组件。该组件初始时间为60S，时间单位为秒。当倒计时剩余时间为20秒时，自动暂停倒计时，当用户点击“继续”按钮时，倒计时应该会从20秒处重新开始。

首先，需要在模板中添加按钮并引用组件：

<template>
  <div>
    <p>当前剩余时间：{{ time }}</p>
    <CountDown :time="60" :auto-start="false" @get-time="onGetTime" @counting="onCounting" ref="countdown"></CountDown>
    <button @click="start">开始</button>
    <button @click="pause">暂停</button>
    <button @click="resume">继续</button>
  </div>
</template>

<script>
import { CountDown } from 'vue-countdown';

export default {
  name: 'CountDownDemo',
  components: { CountDown },
  data() {
    return {
      time: 0,
      paused: false,
    };
  },
  methods: {
    onGetTime(time) {
      this.time = time.seconds;
      if (time.seconds === 20) {
        this.$refs.countdown.pauseCountDown();
        this.paused = true;
      }
    },
    onCounting(time) {
      if (this.paused && time.seconds === 0) {
        this.$refs.countdown.startCountDown();
        this.paused = false;
      }
    },
    start() {
      this.$refs.countdown.startCountDown();
    },
    pause() {
      this.$refs.countdown.pauseCountDown();
    },
    resume() {
      this.$refs.countdown.resumeCountDown();
    },
  },
};
</script>

在该示例中，我们使用了组件中提供的暴露方法：startCountDown()、pauseCountDown()和resumeCountDown()，它们分别用于开始倒计时、暂停倒计时和重新开始倒计时。当倒计时时间为20秒时，我们使用pauseCountDown()方法来暂停倒计时，并设置标志为paused为true。当用户点击“继续”按钮时，我们使用onCounting()方法检查是否超过20秒，若超过了，就使用startCountDown()方法开始倒计时，并将paused标志设为false。

以上就是实现一个简单倒计时组件的过程。更复杂的用法可以参考插件官方文档。