vue-countdown-demi v1.0.0

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

Methods

Events

所有冒泡事件都是可选的

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

License

Made with 💙

Published under MIT License.