vue-timer-countdown
Version:
77 lines (67 loc) • 1.59 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo for vue-timer-countdown</title>
</head>
<body>
<div id="app">
支持所有方式传入deadline数据（数字、变量、vuex的值、等）
<br>
<br>
<timer-countdown
:deadline="5"
@done="done"
v-slot="time"
>
{{ time.day }}天{{ time.hour }}时{{ time.minute }}分{{ time.second }}秒
</timer-countdown>
<br>
<br>
<timer-countdown
:deadline="timeLeft"
@done="done"
@update="update"
:complete-zero="false"
:left-second="2"
:ignore-day="false"
></timer-countdown>
<br>
<input type="number" v-model.number="timeLeft">
<br>
任何时候（包括已经结束后触发`done`之后），修改`deadline`都可以让组件重新启动。
<br>
<br>
打开控制台瞧瞧吧~
</div>
<script src="//unpkg.com/vue@2"></script>
<script src="//unpkg.com/vue-timer-countdown"></script>
<!-- <script src="../dist/vue-timer-countdown.iife.js"></script> -->
<script>
// 全局注册
// Vue.use(vueTimerCountdown, { component: 'timer-countdown' })
// 或：
// Vue.component('timer-countdown', vueTimerCountdown)
new Vue({
components: {
// 局部注册
'timer-countdown': vueTimerCountdown
},
el: '#app',
data () {
return {
timeLeft: 5
}
},
methods: {
done () {
console.log('done')
},
update (data) {
console.log('update', data)
}
}
})
</script>
</body>
</html>