mlinquan / vue-awesome-countdown Goto Github PK
View Code? Open in Web Editor NEWCountdown 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
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
Replace "stoped" by "stopped" -> 2P
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?
设置了:speed="1000",为1秒一次,显示时有时候2秒动一次,比如:58秒,下一次直接56秒了
Hello, great library !
Start event doesn't seem to be called when autoStart
is set to false and starting countdown with startCountdown
method.
Thanks
https://codepen.io/kanekt/pen/expObo
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
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>
In all of the code, replace "finised" by "finished". Missing "H".
For example!
如题
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
Can you provide instruction how to use Methods and Events?
http://cl.ly/356bc9303e7d
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);
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
<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>
Hello. How to import and use in nuxt?
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.
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!
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)
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.
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?
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>
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.
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?
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有时直接传入,有时需要乘以1000才显示正确。这是什么原因?
<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.
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>
The onStop event is not emitted when the countdown is stopped
Hello, great library !
Start event doesn't seem to be called when autoStart
is set to false and starting countdown with startCountdown
method.
Thanks
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.