0
221
ViewsCómo cerrar el menú desplegable cuando se representa en otra página en Vue
Tengo un carrito desplegable como se puede ver a continuación: 
Entonces, mi problema es que cada vez que voy a la página siguiente o hago algo, permanece abierto. Pero quiero que se cierre cuando vaya a otra página. Para esto mi componente está aquí:
<template> <div class="custom-select" :tabindex="tabindex" @blur="open = false"> <div class="selected" :class="{ open: open }" @click="open = !open"> {{ selected.name }} </div> <div class="items" :class="{ selectHide: !open }"> <div v-if="defaultValue != ''">{{ defaultValue }}</div> <div v-for="(option, i) of options" :key="i" @click=" selected = option; open = false; $emit('input', option);"> {{ option.name }} </div> </div> </div> </template> <script> export default { props: { options: { type: Array, required: true, }, defaultValue: { type: String, required: false, default: "Choose an option", }, tabindex: { type: Number, required: false, default: 0, }, }, data() { return { open: false, selected: this.setDefaultValue(), }; }, mounted() { this.$emit("input", this.selected); }, methods: { setDefaultValue() { if (this.defaultValue == '' && this.options.length > 0) { return this.options[0]; } return {name: this.defaultValue}; } } }; </script>Estoy abierto a cualquier tipo de solución para resolver este problema.
·
Juan Pablo Isaza
1 answers
Answer question0
Puede crear una directiva de "clic fuera", que ejecuta una función de menú de cierre cada vez que hace clic fuera del menú. Luego, también llama a la función de cerrar menú cuando se hace clic en cualquier acción en el menú.
Directiva de ejemplo en main.js:
Vue.directive('click-outside', { bind: function (el, binding, vnode) { el.clickOutsideEvent = function (event) { // Check that click was outside the el and its children if (!(el === event.target || el.contains(event.target))) { // Call the specified method vnode.context[binding.expression](event) } } document.body.addEventListener('click', el.clickOutsideEvent) document.body.addEventListener('touchend', el.clickOutsideEvent) }, unbind: function (el) { document.body.removeEventListener('click', el.clickOutsideEvent) document.body.removeEventListener('touchend', el.clickOutsideEvent) } })En tu menú:
<div v-click-outside="closeMenu"></div>
·
Juan Pablo Isaza
Report
Answer question