Se supone que esto es un temporizador de cuenta regresiva de reaparición para los jefes en mi juego. Tengo este objeto que tiene una marca de tiempo individual con formato Unix, necesito hacer la función que muestra un temporizador de cuenta regresiva.
mi código:
<script setup lang="ts"> function convertUnixtoReadable(time: number) { const Countdown = new Date(time * 1000).getTime() //2019-12-9 10:30:15 var now = new Date().getTime(); var distance = Countdown - now; var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); if (now > Countdown) { return ("alive") } else { return (days + "d " + hours + "h " + minutes + "m " + seconds + "s ") } } </script>y mi plantilla:
<div v-for="i in MVPTimer.value" :key="i" class="mvp"> <div class="mvp-info"> {{ i.mobname }} - {{ convertUnixtoReadable(i.respawntime) }} </div> </div>Actualmente funciona. muestra si el 'monstruo' está vivo, o el 'tiempo' restante para que reaparezca. pero no "cuenta atrás". Sé que necesito un setInterval o computado ... ¿o ambos? Podría hacer esto si tuviera que usar la API de opciones; pero prefiero practicar la configuración del script
Aquí hay una forma vue3 de hacerlo con el estado de almacenamiento reactivo.
//store.js import { reactive, readonly } from 'vue' const state = reactive({ countdownPaused: false }) function toggleCountdownPlayPause() { state.countdownPaused = !state.countdownPaused } export const store = readonly({ state, toggleCountdownPlayPause }) //main.js import { createApp } from 'vue' import store from './store' import App from './App.vue' const app = createApp(App) app.use(store) app.config.globalProperties.$store=store app.mount("#app") // components/Timer.vue <template> <b> <span>{{ cowntdown }}</span> </b> </template> <script> import store from '../../store' export default { data() { return { store, timerCountdown: 120, timeout: null } }, watch: { paused(isPaused) { if (!isPaused) { this.timerCountdown-- } else { clearTimeout(this.timeout) } }, timerCount: { handler(value) { if (value > 0 && !this.paused) { this.timeout = setTimeout(() => this.timerCountdown--, 1000) } }, immediate: true } }, computed: { paused() { return store.state.countdownPaused }, formattedCountdown() { const minutes = Math.floor(this.timerCount / 60) > 0 ? Math.floor(this.timerCount / 60 ) : "00" const seconds = this.timerCount % 60 > 9 ? this.timerCount % 60 : "0" + [this.timerCount % 60] return `${minutes}:${seconds}` } } </script> // components/TimerPlayPauseButton.vue <template> <button :class="{'paused':paused}" @click="togglePlayPause"></button> </template> <script> import { store } from '../../store' export default { data() { return { store, paused: store.state.countdownPaused } }, methods: { togglePlayPause(e) { this.store.toggleCountdownPlayPause() } } } </script> <style> .paused:after { content: "ll" } //App.vue <template><div><timer /><timer-play-pause-button /></div></template> <script> import Timer from './components/Timer.vue' import TimerPlayPauseButton from './components/TimerPlayPauseButton.vue' export default { components: { 'timer': Timer, 'timer-play-pause-button': TimerPlayPauseButton } }