vue-countdown-demi

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

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.