vue-countdown-demi

一款适用于Vue2、Vue2.7、Vue3的带有可选控件的倒计时组件

简体中文 | English

npm包文件

dist
├── v2
|    ├──── index.cjs.js
|    ├──── index.es.js
|    ├──── index.umd.js
├── v2.7
|    ├──── index.cjs.js
|    ├──── index.es.js
|    ├──── index.umd.js
├── v3
     ├──── index.cjs.js
     ├──── index.es.js
     ├──── index.umd.js

安装

使用npm:

npm install vue-countdown-demi

使用pnpm:

pnpm add vue-countdown-demi

使用Yarn:

yarn add vue-countdown-demi

如何使用

#main.ts

import Vue from 'vue'
import TemplateComponent from 'vue-countdown-demi'
import App from './App.vue'

Vue.config.productionTip = false
Vue.use(TemplateComponent)

new Vue({ render: h => h(App) }).$mount('#app')

基础用法

<template>
  <vue-countdown :time="2 * 24 * 60 * 60 * 1000" v-slot="{ days, hours, minutes, seconds }">
    Time Remaining：{{ days }} days, {{ hours }} hours, {{ minutes }} minutes, {{ seconds }} seconds.
  </vue-countdown>
</template>

自定义循环时间

<template>
  <vue-countdown :time="time" :interval="100" v-slot="{ days, hours, minutes, seconds, milliseconds }">
    New Year Countdown：{{ days }} days, {{ hours }} hours, {{ minutes }} minutes, {{ seconds }}.{{ Math.floor(milliseconds / 100) }} seconds.
  </vue-countdown>
</template>

<script>
export default {
  data() {
    const now = new Date();
    const newYear = new Date(now.getFullYear() + 1, 0, 1);

    return {
      time: newYear - now,
    };
  },
};
</script>

格式化slot props

<template>
  <vue-countdown :time="2 * 24 * 60 * 60 * 1000" :transform="transformSlotProps" v-slot="{ days, hours, minutes, seconds }">
    Time Remaining：{{ days }} days, {{ hours }} hours, {{ minutes }} minutes, {{ seconds }} seconds.
  </vue-countdown>
</template>

<script>
export default {
  methods: {
    transformSlotProps(props) {
      const formattedProps = {};

      Object.entries(props).forEach(([key, value]) => {
        formattedProps[key] = value < 10 ? `0${value}` : String(value);
      });

      return formattedProps;
    },
  },
};
</script>

按需倒计时

<template>
  <button type="button" class="btn btn-primary" :disabled="counting" @click="startCountdown">
    <vue-countdown v-if="counting" :time="60000" @end="onCountdownEnd" v-slot="{ totalSeconds }">Fetch again {{ totalSeconds }} seconds later</vue-countdown>
    <span v-else>Fetch Verification Code</span>
  </button>
</template>

<script>
export default {
  data() {
    return {
      counting: false,
    };
  },
  methods: {
    startCountdown: function () {
      this.counting = true;
    },
    onCountdownEnd: function () {
      this.counting = false;
    },
  },
};
</script>

Props

参数	类型	默认值	描述
auto-start	boolean	true	组件初始化时是否自动开启倒计时
emit-events	boolean	true	组件是否emit倒计时事件
interval	number	1000	倒计时间隔时间（单位：ms），该值不应该小于0
now	Function	() => Date.now()	当前时间（单位：ms）
tag	string	"span"	组件根元素标签
time	number	0	倒计时的时间（单位：ms）
transform	Function	(slotProps) => slotProps	在渲染前输出slotProps，该对象包含以下属性: days, hours, minutes, seconds, milliseconds, totalDays, totalHours, totalMinutes, totalSeconds, 以及 totalMilliseconds.

Methods

事件名称	回调参数	说明
start	()	开始倒计时。当props auto-start设置为 true时自动执行
abort	()	立即终止倒计时
end	()	手动结束倒计时
restart	()	重新开始倒计时

Events

事件名称	回调参数	说明
start	()	倒计时开始时触发
progress	(data)	倒计时进行时持续触发。data对象包含以下属性: days, hours, minutes, seconds, milliseconds, totalDays, totalHours, totalMinutes, totalSeconds, 以及 totalMilliseconds.
abort	()	倒计时终止时触发
end	()	倒计时结束时触发

所有冒泡事件都是可选的

Note: 你可以设置 emit-events: false 来提高组件性能。

License

Made with 💙

Published under MIT License.