Code Monkey home page Code Monkey logo

vue-awesome-countdown's Issues

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?

有时候2秒2秒的走

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

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

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>

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

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);

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 event not working

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>

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";
image

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.

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!

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)

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.

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>

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.

Update leftTime from method

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.

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?

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.

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.

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>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.