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.
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>