Vue Flickity Carousel: altura de la ventana gráfica 0

29 Jul, 2023 Programación 0

Estoy atascado con un error de la biblioteca Flickity.

Tengo un componente de carrusel que utiliza Flickity para crear el carrusel. Todo estaba funcionando bien hasta que necesité abrir este carrusel dentro de un componente de modal.

Cuando activo un botón, se abre el modal sin las imágenes del carrusel. Si redimensiono la ventana (aumento o reduzco la pantalla), Flickity comienza a funcionar. Pero necesito que Flickity funcione sin que el usuario tenga que mover la pantalla.

<template>
    <modal v-bind="$props">
        <template v-slot:trigger="">
            <button>Abrir Modal</button>
        </template>
        <template>
            <carousel :options="{wrapAround: true}">
                <img src="https://via.placeholder.com/800x600">
                <img src="https://via.placeholder.com/800x600">
                <img src="https://via.placeholder.com/800x600">
            </carousel>
        </template>
    </modal>
</template>

<script lang="ts">
    import { defineComponent } from '@vue/composition-api';
    import Carousel from '../carousel/carousel.vue';
    import Modal from '../modal/modal.vue';
    import Button from '../button/button.vue';

    export default defineComponent({
        components: {
            Carousel,
            Modal,
            Button,
        },

        setup() {
            return {};
        },
    });
</script>

Me di cuenta en otra pregunta anterior que una posible solución es: cuando activo el botón del modal, necesito acceder al componente de carrusel y hacer que Flickity realice el método de redimensionamiento. Intenté hacerlo, pero no tengo idea de cómo puedo llamar al método de Flickity cuando activo el botón del modal utilizando la API de composición de Vue.

davy.ai

July 29, 2023 at 11:23 pm

Parece que el problema con la biblioteca Flickity no funciona correctamente dentro del componente modal tiene que ver con el tamaño del carrusel no se calcula correctamente hasta que se muestra completamente el modal. Una posible solución a este problema es redimensionar el carrusel manualmente cuando se abre el modal.

Para hacer esto usando la API de composición de Vue, puedes usar el gancho onMounted para agregar un observador cuando se abre el modal, luego llamar al método resize de la instancia Flickity para redimensionar manualmente el carrusel.

Aquí tienes un ejemplo de cómo podrías implementar esto en tu código:

<template>
    <modal v-bind="$props">
        <template v-slot:trigger="">
            <button @click="openModal">Abrir modal</button>
        </template>
        <template>
            <carousel ref="carousel" :options="{wrapAround: true}">
                <img src="https://via.placeholder.com/800x600">
                <img src="https://via.placeholder.com/800x600">
                <img src="https://via.placeholder.com/800x600">
            </carousel>
        </template>
    </modal>
</template>

<script lang="ts">
    import { defineComponent, onMounted, ref } from '@vue/composition-api';
    import Carousel from '../carousel/carousel.vue';
    import Modal from '../modal/modal.vue';
    import Button from '../button/button.vue';
    import Flickity from 'vue-flickity';

    export default defineComponent({
        components: {
            Carousel,
            Modal,
            Button,
            Flickity
        },

        setup() {
            const carouselRef = ref(null);

            const openModal = () => {
                // Esperar un poco para que el modal se muestre completamente antes de redimensionar el carrusel
                setTimeout(() => {
                    if (carouselRef.value) {
                        // Llamar al método `resize` de la instancia Flickity
                        carouselRef.value.$flickity.resize();
                    }
                }, 100);
            }

            return {
                carouselRef,
                openModal
            };
        },
    });
</script>

En este ejemplo, primero agregamos una referencia ref al componente carousel para poder acceder a su instancia Flickity más adelante. También definimos una función openModal que se llamará cuando se abra el modal.

Dentro de openModal, agregamos una pequeña demora antes de redimensionar el carrusel para permitir que el modal se muestre completamente. Luego verificamos si la referencia del componente carousel está definida y llamamos al método resize de su instancia Flickity.

Finalmente, devolvemos carouselRef y openModal desde la función setup, que se pueden usar en la plantilla para abrir el modal y acceder a la referencia del componente carousel.

Esto debería solucionar el problema con la biblioteca Flickity que no funciona correctamente dentro del componente modal.

es.davy.ai

¿Tienes una pregunta?

Vue Flickity Carousel: altura de la ventana gráfica 0

Answer

davy.ai