Nota A: no estoy hablando de detectores de eventos en elementos, como @click
Nota B: He estado buscando "por todas partes" para esto, pero no pude encontrarlo en ninguna parte. Siéntete libre de abofetearme si la respuesta está ahí.
Nota C: soy un principiante con Vue tratando de aprender cosas
Supongo que podría poner ese tipo de oyentes de eventos dentro de main.js , pero eso parece un poco fuera de lugar. Además, ¿cómo llamaría a las funciones declaradas dentro de App.vue desde main.js?
Supongo que hay una forma mejor y más adecuada de manejar esto dentro de App.vue y el ciclo de vida.
¡Cualquier ayuda sería muy apreciada!
Aquí hay dos ejemplos de código Vanilla JS, uno con ventana y otro con documento :
window.addEventListener('offline', function() { alert('You seem to be offline!'); }); document.addEventListener('visibilitychange', function() { if (document.visibilityState === 'visible') { alert('Hello again!'); } });Puede configurar el detector de eventos en el enlace created o mounted en su SFC de esta manera:
<script> export default { created () { document.addEventListener('visibilitychange', this.handleVisibility, false) }, methods: { handleVisibility (e) { if (document.visibilityState === 'hidden') { // do what you like } else { // again do as you like } } } }; </script>