mlinquan / vue-awesome-countdown Goto Github PK

View Code? Open in Web Editor NEW

191.0 2.0 42.0 981 KB

Countdown plug-in with high performance and high accuracy for [Vue](http://vuejs.org/)2.5.0+.

Home Page: https://vac.js.org

License: MIT License

JavaScript 5.19% Vue 94.81%

vue-awesome-countdown's Introduction

vue-awesome-countdown

Countdown plug-in with high performance and high accuracy for Vue2.5.0+.

Installation

Install

$ npm install vue-awesome-countdown --save
# or
$ yarn add vue-awesome-countdown

ES6

import vueAwesomeCountdown from 'vue-awesome-countdown'

Vue.use(vueAwesomeCountdown, 'vac') // Component name, `countdown` and `vac` by default

CommonJS

var Vue = require('vue');
var vueAwesomeCountdown = require('vue-awesome-countdown').default;

Vue.use(vueAwesomeCountdown);

Browser

<script src="https://unpkg.com/vue@latest"></script>
<script src="https://unpkg.com/vue-awesome-countdown@latest"></script>
<!-- OR -->
<script src="path/to/vue/vue.min.js"></script>
<script src="path/to/vue-awesome-countdown/dist/vue-awesome-countdown.umd.min.js"></script>

Usage

Vue2.5.0+.

<countdown :end-time="new Date().getTime() + 60000">
  <span
    slot="process"
    slot-scope="anyYouWantedScopName">{{ `Lefttime: ${anyYouWantedScopName.timeObj.ceil.s}` }}</span>
  <span slot="finish">Done!</span>
</countdown>

<vac :end-time="new Date().getTime() + 60000">
  <span
    slot="process"
    slot-scope="{ timeObj }">{{ `Lefttime: ${timeObj.m}:${timeObj.s}` }}</span>
  <span slot="finish">Done!</span>
</vac>

Vue2.6.0+.

<countdown :end-time="new Date().getTime() + 60000">
  <template
    v-slot:process="anyYouWantedScopName">
      <span>{{ `Lefttime: ${anyYouWantedScopName.timeObj.ceil.s}` }}</span>
    </template>
  <template
    v-slot:finish>
      <span>Done!</span>
  </template>
</countdown>

<vac :end-time="new Date().getTime() + 60000">
  <template
    v-slot:process="{ timeObj }">
    <span>{{ `Lefttime: ${timeObj.m}:${timeObj.s}` }}</span>
  </template>
  <template
    v-slot:finish>
      <span>Done!</span>
  </template>
</vac>

SSR (Nuxt)

<no-ssr>
  <vac :end-time="new Date().getTime() + 60000">
    <span
      slot="process"
      slot-scope="{ timeObj }">{{ `Lefttime: ${timeObj.m}:${timeObj.s}` }}</span>
    <span slot="finish">Done!</span>
  </vac>
</no-ssr>

Example demo

https://vac.js.org

Props

Prop	Required	Explain	Type	Default
startTime	`false`	Time stamp of countdown start	`[String, Number, Date]`	`null`
endTime	when `leftTime` undefined	Time stamp of countdown end	`[String, Number, Date]`	`null`
leftTime	when `endTime` undefined	Remaining milliseconds of countdown end	`Number`	`0`
autoStart	`false`	Start countdown automatically	`Boolean`	`true`
speed	`false`	Unit: millisecond	`Number`	`1000`
tag	`false`	The wrap tag name	`String`	`span`

Data

The data can get it through slot-scop or methods.

Data	Explain	Default
state	The countdown run state, the states are `beforeStart`, `stopped`, `paused`, `process` and `finished`	`beforeStart`
attrs	The countdown component tag attributes	`{}`
actualEndTime	Actual countdown end time	`null`
timeObj	Look look	`{}`
countdownTimer	The countdown timer function, Do not use as much as possible.	`null`
actualStartTime	Actual countdown start time.	`null`
runTimes	Countdown run times (The `onProcess` methods run times)	`0`
usedTime	The total time consuming from the countdown to the end.	`0`

timeObj

{
    "endTime": 1542634411361,
    "speed": 1000,
    "leftTime": 97019,
    "d": "0",
    "h": "00",
    "m": "01",
    "s": "37",
    "ms": "019",
    "org": {
        "d": 0.001134247685185185,
        "h": 0.02722194444444444,
        "m": 1.6333166666666665,
        "s": 37.998999999999995,
        "ms": 19
    },
    "ceil": {
        "d": 1,
        "h": 1,
        "m": 2,
        "s": 98
    }
}

Slots

Slot process and slot finish will not display at the same time.

name	slot-scop	Position	Display condition
prev	component `_self`	1	Defined, Controllable display
before	component `_self`	2	On before start, `state === 'beforeStart'`
process	component `_self`	2	On process, `state === 'process'` or `state === 'stopped'` or `state === 'paused'`
finish	component `_self`	3	On finish, `state === 'finished'`
default	component `_self`	3	Defined, Controllable display

Methods

The methods can be accesse through slot-scop or $refs.

Method	Explain	Parameters
startCountdown		`restart`
stopCountdown		no
pauseCountdown		no
switchCountdown		no
finishCountdown		no
doCountdown		no

Event

Event	Explain	Parameters
start	Functions executed at the beginning of countdown	`vm`
process	Function executed when countdown is performed	`vm`
stop	Function executed when countdown stops	`vm`
pause	Function executed when countdown paused	`vm`
finish	Function executed when countdown finished	`vm`

MIT License

Copyright © 2018 LinQuan.

vue-awesome-countdown's People

Contributors

Stargazers

Watchers

Forkers

trendingtechnology 18210092010 tusko ivaneric79 sqqd89363637 mc-mosa mobeidat jljohnson lansolo99 naseemhaider leaves-27 massimiliano76 ebrou diadal hasfoor bsnc aliwesome mantissa23 gopankm eaktpn felexkemboi alirezabahmei zizxzy naman-ops vicgonvt wuanrin adrianooo30 wertykid yuisanadaa abdu4188 jcfutch treboryx aminkammoun sashabuinskiy marcelschwabenland lazyhero zhenghongqiang saroj990 kunj12345 mairaruuning fahad-441002 qjwsmile

vue-awesome-countdown's Issues

Vue2.0 run build 错误，如何处理？

ERROR in static/js/vendor.814ae202417734b5bd0b.js from UglifyJs
Unexpected token: punc (() [./node_modules/[email protected]@vue-awesome-countdown/dist/vue-awesome-countdown.common.js:185,0][static/js/vendor.814ae202417734b5bd0b.js:46643,6]

  Build failed with errors.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `node build/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Start event not called with autoStart false

Hello, great library !

Start event doesn't seem to be called when autoStart is set to false and starting countdown with startCountdown method.

Thanks

Remaining time is not preserved on "switchCountdown" when "leftTime" is used.

I am using this library on a project and I noticed that calling the stopCountdown() method stops the countdown. When I start the countdown again, the time passed is taken into account

This is observable also in the demo page https://vac.js.org/examples/methods/all-methods.html.
Just click on stop, wait for some time, and click start again.

I could just not render the component as a work around, e.g. v-if="isCounting" instead of using the stopCountdown() method

Originally posted by @bi6o in #8 (comment)

npm install vue-awesome-countdown (Dependent package errors)

After running the title, I run npm audit.

                       === npm audit security report ===                        
                                                                                
┌──────────────────────────────────────────────────────────────────────────────┐
│                                Manual Review                                 │
│            Some vulnerabilities require your attention to resolve            │
│                                                                              │
│         Visit https://go.npm.me/audit-guide for additional guidance          │
└──────────────────────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Moderate      │ Cross-Site Scripting                                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ serialize-javascript                                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=2.1.1                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ vue-awesome-countdown                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ vue-awesome-countdown > @vue/cli-service >                   │
│               │ copy-webpack-plugin > serialize-javascript                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://npmjs.com/advisories/1426                            │
└───────────────┴──────────────────────────────────────────────────────────────┘
found 1 moderate severity vulnerability in 44351 scanned packages
  1 vulnerability requires manual review. See the full report for details.

And I also ran npm audit fix.

% npm audit fix                                                                       
up to date in 7.912s

38 packages are looking for funding
  run `npm fund` for details

fixed 0 of 1 vulnerability in 44351 scanned packages
  1 vulnerability required manual review and could not be updated

I don't know how to deal with this problem.
Also, can I ignore it?

It will be helpful if you tell me.

Is there any way I can do that?
Since that is a prop — I can't do it without getting Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders warning.
Tried to set it with remainingTime — no luck.

onFinish event not working

I am not sure what is wrong but i can't seem to catch onFinish event. From my understanding i should catch it from my Vue instance like:
vm.$on('onFinish', (vac) => finish(vac))

Am I doing something wrong? Maybe also provde some example of that in the docs.
Tnx

timeObj.s not precise

when I countdown e.g 6 seconds timeObj.s is not precise (6,4,3,2,1,0). I know there is ceil, but I need the presentation of timeObj.m:timeObj.s

Triggering finish event just once

There's a way to trigger finish event just once? I want to play an audio on finish, but every time I open the page with the countdown finished, the audio play again. Thanks.

leftTime传入数值为毫秒还是秒？

项目里用的倒计时，后端返回的数值单位为秒，leftTime有时直接传入，有时需要乘以1000才显示正确。这是什么原因？

IE10 不兼容

错误指向这一行

Sometimes the countdown is deducted by 2 seconds

Hello, I have used vue awesome countdown in Vue 2. My vue-awesome-countdown verson is 1.0.24..

Technically it works fine but from time to time there will be a time deduction delay of one second then it will just be deducted by 2 seconds. Below is my snippet

<template>
  <div>
    <vac ref="countdown" :left-time="msBeforeDraw" @finish="fresh">
          <p slot="process" slot-scope="{ timeObj }" class="mb-0">
            <small class="drawInfo">Countdown</small>
            <span v-if="timeObj.h !== '00'" class="colorMain"
              >{{ timeObj.h }}:</span
            >
            <span class="colorMain">{{ timeObj.m }}:</span>
            <span class="colorMain">{{ timeObj.s }}</span>
          </p>
          <span slot="finish" class="opening  drawInfo">
            <small>Countdown</small>
            <span class="colorMain">开奖中</span>
          </span>
        </vac>
  </div>
</template>

<script>
export default {
  data(){
    return {msBeforeDraw: 600}
  }
  methods: {
    async fresh() {
      await this.$parent.fetchKey()
      setTimeout(() => {
        if (this.$refs.countdown) {
          this.$refs.countdown.startCountdown(true)
        }
      }, 1000)
    }
  }
}
</script>

Start event not called with auto start false

Hello, great library !

Start event doesn't seem to be called when autoStart is set to false and starting countdown with startCountdown method.

Thanks

Update documentation to fit Vue 2.6 slots syntax

Like:

                  <countdown :end-time="new Date().getTime() + 60000">
                    <template v-slot:process="{ timeObj }">{{
                      `Time left ${timeObj.m}:${
                        timeObj.s
                      }`
                    }}</template>
                    <template v-slot:finish>
                      <b-button variant="warning">Request SMS again</b-button>
                    </template>

beforeStart slot be preheat

I read the source code and real state, can't find before state set, should the README.md doc update the before slot to preheat or change the source code?

how to import and use in nuxt?

Hello. How to import and use in nuxt?

finish event not working

<vac :end-time="timer" @finish="finisher()">
        <template
          v-slot:process="{ timeObj }">
          <span>{{ `Get New Code In: ${timeObj.m}:${timeObj.s}` }}</span>
        </template>
        <template
          v-slot:finish>
            <span>Done!</span>
        </template>
      </vac>

ie11报错

How can use vue-awesome-countdown with typescript ?

I try to use the vue-awesome-countdown at my project this is my step
1- npm install vue-awesome-countdown --save
2- npm install
3- import the vue-awesome-countdown
import vueAwesomeCountdown from "vue-awesome-countdown";

It's not working on IE, Expected ':' Error

Time zone setting

Hello!
Is there a way to define on which time zone the countdown should be based ?
I currently have a countdown set to 6pm. The countdown sould show 20min left but on safari (iOS and mojave), it shows 2h20min…
I don't know if it is time zone related though.

Thanks a lot!

Why are there only span tags and nothing?

For example！

startCountdown() restart doesn't work

<countdown
  ref="unregisterTimer"
  :end-time="new Date().getTime() + 6000"
>
  <template v-slot:process="{ timeObj }">
    <span class="ml-3 timer">
      Request SMS once again {{ timeObj.m }}:{{
        timeObj.s
      }}
    </span>
    <b-button @click="stopCountdown">STOP</b-button>
    <b-button @click="startCountdown">START</b-button>
  </template>
  <template v-slot:finish="vac">
    <b-button
      @click="unregisterDevice"
      class="ml-3"
      variant="warning"
      >Send again</b-button
    >
  </template>
</countdown>

Then a method:

private startCountdown() {
  this.$refs.unregisterTimer.startCountdown(true)
}

Doesn't actually restart a countdown, i can pause it, then start, but restart doesn't work.

How to use in browser?

https://codepen.io/kanekt/pen/expObo

not working

目前支持Vue3吗

如题

Installing component via Vue.use causes error in old browsers

If I install component via Vue.use and don't add it to transpileDependencies option of Vue CLI, I get the following error on browsers that don't support Enhanced Object Literals:

Uncaught SyntaxError: Unexpected token (

The error arises because of the following code in vue-awesome-countdown.js:

  install(Vue, name) {
    name = name || 'vac'
    Vue.component(name, vueAwesomeCountdown)
    Vue.component('countdown', vueAwesomeCountdown)
  }

To fix the issue it is necessary change line #4 to:

install: function install(Vue, options) {

To work around the issue, install components by calling Vue.component:

import vueAwesomeCountdown from 'vue-awesome-countdown/vue-awesome-countdown.vue';
...
Vue.component('vac', vueAwesomeCountdown);

有时候2秒2秒的走

设置了:speed="1000"，为1秒一次，显示时有时候2秒动一次，比如：58秒，下一次直接56秒了

More examples

Can you provide instruction how to use Methods and Events?
http://cl.ly/356bc9303e7d

switchCountdown not really stopping the timer

as the example is showing
https://vac.js.org/examples/methods/switch-countdown.html

When I call the switchCountdown(), the timer seems to stop, but the time is still lapsing. When I call the method again, the timer starts not from where I stopped but jumps right to how long has lapsed.

Is this behavior intended or is it a bug?

Timer not starts when using dynamic start-time and end-time

I am assigning start-time and end-time dynamically to the plugin.

I am using firebase and on the response, I am assigning the values. See my below code.

This is my code to use firebase call

const auctionRef = this.$fire.firestore.collection('auctions')
const loadInitial = await auctionRef.where('auction_id', '==', parseInt(this.auctionNumber)).get()
        if (!loadInitial.empty) {
         loadInitial.forEach((doc) => {
            const values = doc.data()
            this.startTime = new Date(values.startTime).getTime()
            this.endTime = new Date(values.endTime).getTime()
            this.$refs.countdownTimer.startCountdown(true) 
          })
        }

Component


               <client-only>
                    <vac
                      ref="countdownTimer"
                      :start-time="startTime"
                      :end-time="endTime"
                      :autoStart="false"
                      @process="(vac) => process(vac)"
                      @finish="(vac) => finish(vac)"
                    >
                      <span
                        slot="process"
                        slot-scope="{ timeObj }"
                      >{{ `Lefttime: ${timeObj.m}:${timeObj.s}` }}</span>
                      <span slot="finish">Done!</span>
                    </vac>
                  </client-only>

I am not getting what is the issue with this initialization. If I assign static values to the start-time and end-time with the same data as api then it is working.

Also I will need to increase endtime with 10 seconds in between. How to do that?

Is it possible to count up?

I would like to implement a type of timer that counts the amount of time since a given timestamp. I am already using this library for a countdown so I'd prefer to keep it all the same.

I've tried:

<countdown start-time="2022-01-07T00:00:00Z">
    <template v-slot:process="props">
          <!-- This never shows -->
    </template>
</countdown>

This doesn't seem to work, but I was wondering if there is any way to do it with this library.

finish and autostart false not working

Hi, Finish and autostart false not working. Also it is not taking the date so it is only taking the time.

Thank you

My code:

<countdown 
    :startTime="2020-06-25 13:30:00"
    :end-time="2020-06-27 13:30:00" 
    @onfinish="termino()" 
    :autoStart="false"
    >
        <template v-slot:process="{ timeObj }"> 
            <span>{{ `Offer ends: ${timeObj.h}h ${timeObj.m}m ${timeObj.s}s` }}</span> 
        </template>
        <template v-slot:finish> 
            <span>Expired!</span> 
        </template>
</countdown>

How to reset the timer without restarting it?

Hi,
Now I have the use case of resetting the timer without starting it automatically but I could not find a way to do it. Now I am using startCountdown method with restart passed but it would restart the timer automatically. Is there a way just to reset the timer? Thanks.