Quiero mover la barra de navegación a la derecha: -500px (cerrar la barra de navegación) haciendo clic en cualquier parte de la ventana. En Html, JS puedo apuntar a la etiqueta del cuerpo para hacer lo mismo. ¿Cómo hacerlo en vue? Tengo dos funciones para dos (abrir y cerrar) botón. Aún así, quiero agregar una funcionalidad adicional para ocultar la barra de navegación haciendo clic en cualquier lugar de la pantalla. Mi código
<div class="chatbot-whole-wrap"> <PopUpMsg class="pop-up-chat" /> <div class="chat-bot-wrapper"> <input id="open" type="checkbox" /> <img id="chat-btn" alt="chat-icon" src="@/assets/chat-bot-bee-icon.svg" @click="openWindow()" /> <div id="sidebar"> <img id="chat-close-btn" alt="chat-icon" src="@/assets/close-icon.svg" @click="closeWindow()" /> <iframe class="chat-bot-iframe" src="https://hggsbnjsggxvbxjkksb/" width="100%" height="100%"></iframe> </div> </div> </div>Aquí hay dos métodos que he usado
methods: { openWindow() { document.getElementById('sidebar').style.right = '0'; }, closeWindow() { document.getElementById('sidebar').style.right = '-500px'; }, },No soy el más fluido en Vue.js, pero ¿no podría registrar un controlador de eventos en el cuerpo en un método de ciclo de vida?
function closeNavIfOpen () { console.log('do your thing') } var app = new Vue({ el: '#app', data: { message: 'Click anywhere in the body!' }, mounted () { window.document.body.addEventListener('click', closeNavIfOpen, false) }, destroyed () { window.document.body.removeEventListener('click', closeNavIfOpen, false) } }) body { margin: 0; min-height: 100vh; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> {{ message }} </div>