Aquí está mi código:
<div class="pop-up-chat"> <div id="div1"> <div class="pop-up-msg regular-text">Hi, How may I help you?</div> <div class="triangle-down"></div> </div> </div>Aquí estoy apuntando al div de chat emergente y configurando un retraso de 5 segundos y ocultando el div. ¿Qué tiene de malo?
export default { name: 'PopUpMsg', mounted() { this.msgShow(); }, methods: { msgShow() { const msg = document.getElementsByClassName('pop-up-chat'); setTimeout(() => { msg.style.visibility = 'hidden'; }, 5000); }, }, }Simplemente agregue una nueva propiedad a data showPopup y configúrelo en true y luego cámbielo a false dentro de los ganchos mounted
Uso v-show para mostrar u ocultar el elemento deseado v-if-vs-v-show
<template> <div> <!-- binding style --> <div :style="{visibility: showPopup ? 'visible' : 'hidden' }" <!-- or use v-show directive to show | hide element --> <div v-show="showPopup" class="pop-up-chat"> <div id="div1"> <div class="pop-up-msg regular-text">Hi, How may I help you?</div> <div class="triangle-down"></div> </div> </div> <!-- The rest of your template --> </div> </template> <script> export default { name: 'PopUpMsg', data() { return { showPopup: true, } } mounted() { this.msgShow(); }, methods: { msgShow() { setTimeout(() => { this.showPopup = false }, 5000) }, }, } </script> O puede crear una directiva personalizada v-visible
<div v-visible="showPopup" /> Vue.directive('visible', function(el, binding) { el.style.visibility = Boolean(binding.value) ? 'visible' : 'hidden'; });Mientras trabaja con Vue.js, le sugiero que use la directiva v-show para mostrar y ocultar la ventana emergente.
Manifestación:
new Vue({ el: '#app', data: { isVisible: true }, mounted() { this.poppupShow(); }, methods: { poppupShow() { setTimeout(() => { this.isVisible = false; }, 5000); } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div class="pop-up-chat" v-show="isVisible"> <div id="div1"> <div class="pop-up-msg regular-text">Hi, How may I help you?</div> <div class="triangle-down"></div> </div> </div> </div>funciona de esta manera
methods: { msgShow() { const msg = document.getElementById('msg'); setTimeout(() => { msg.style.display = 'block'; setTimeout(() => { msg.style.display = 'none'; }, 10000); }, 5000); }, },.pop-up-chat { pantalla : ninguno; // inicialmente }