浏览代码

feat : create timer component

master
Adrien 4 年前
父节点
当前提交
66adaa8926
共有 2 个文件被更改,包括 59 次插入3 次删除
  1. +6
    -3
      src/components/Battleground.vue
  2. +53
    -0
      src/components/Battleground/Timer.vue

+ 6
- 3
src/components/Battleground.vue 查看文件

@@ -1,15 +1,15 @@
<template>
<div class="battleground" v-if="battleground">
<div>Welcome to {{ battleground.name }}</div>
<router-link to="alteracPass">Go to Alterac Pass</router-link>
<router-link to="battlefieldOfEternity">Go to Battlefield Of Eternity</router-link>
<Timer initialTime="90"></Timer>
<router-link to="/battlegrounds">Back to selector</router-link>

</div>
</template>

<script>
import BATTLEGROUNDS from '../gameInfos/maps'
import Timer from '@/components/Battleground/Timer'
export default {
name: 'Battleground',
data () {
@@ -25,6 +25,9 @@
$route (to) {
this.battlegroundId = to.params.battlegroundId
}
},
components: {
Timer
}
}
</script>


+ 53
- 0
src/components/Battleground/Timer.vue 查看文件

@@ -0,0 +1,53 @@
<template>
<div class="timer">
<span v-if="displayHours">{{ hours }}:</span><span v-if="displayMinutes">{{ minutes }}</span><span>:{{ seconds }}</span>
</div>
</template>

<script>
export default {
name: 'Timer',
data () {
return {
currentTime: this.$attrs.initialTime
}
},
methods: {
startTimer: function () {
this.timerIntevalId = setInterval(() => {
this.currentTime--
if (this.currentTime === 0) {
this.stopTimer()
}
}, 1000)
},
stopTimer: function () {
clearInterval(this.timerIntevalId)
}
},
computed: {
seconds: function () {
return (this.currentTime % 60).toLocaleString('en', {minimumIntegerDigits: 2})
},
minutes: function () {
return (Math.floor(this.currentTime / 60) % 60)
},
hours: function () {
return (Math.floor(this.currentTime / 3600) % 24)
},
displayMinutes: function () {
return this.minutes > 0 || this.hours > 0
},
displayHours: function () {
return this.hours > 0
}
},
mounted () {
this.startTimer()
}
}
</script>

<style scoped>

</style>

正在加载...
取消
保存