3

Hice un componente en vue que se divide en 3 cajas (les digo vistas y la 1 es la vista principal).

 ---------
|     | 2 |
|  1  |---|
|     | 3 |
 ---------

Inicialmente tengo un objeto que TIENE varias imágenes, y PUEDE TENER vídeos y/o recorridos 360.

En la caja 1, empiezo mostrando la galería de imágenes.

En la caja 2 hay un botón. Si el objeto tiene vídeos, el botón se habilita. Si clickeo en el botón, el vídeo se coloca en la caja 1, y ahora la caja 2 tiene un preview de la galería de imágenes (con un boton que al clickearlo, la vuelve a colocar en la vista 1)

La caja 3 se comporta exactamente igual que la caja 2, pero con recorrido 360 (es un HTML embebido)

En este momento mi componente se comporta bien y muestra la cosas como debe. Pero ahora quiero agregarle una funcionalidad más y no sé como encararlo.

Yo quiero que, cuando el usuario interactúe con el componente, (por ejemplo recorriendo la galería, o reproduciendo el vídeo, o recorriendo la galería 360) y luego intercambie las vistas, que no se pierda el lugar donde estaba.

Ejemplo: En la galería, yo podría mantener una variable currentIndex por ejemplo, y voy verificando en qué posición se encuentra, y al cambiar de vista (a vídeo o 360) y volver a la galería de imágenes, cuando se levante la misma, indicarle que comience por el indice.

Esto lo hice y funcionó, sin embargo no puedo mantener un estado de la galería 360, indefectiblemente se vuelve a iniciar.

Lo que sucede es que, como los divs tienen la sentencia v-if, se renderizan condicionalmente y montan o desmontan su contenido.

Quisiera encontrar una solución (con algo de CSS) que haga que el componente cargue las imágenes, los vídeos, la galería 360 solo la primera vez que se agreguen respectivamente a la vista 1.

Luego, al ir intercambiando una vista con otra, que no se reemplacen los condicionalmente (como ocurre ahora), sino que se superponga una vista principal sobre otra. (de esta manera nunca perdería el estado actual del recorrido 360)

Luego, si desmonto el componente, ahí sí deberían desmontarse.

Es posible hacer esto sin desarmar mucho lo que ya hice?

Muchas gracias.

Les dejo el componente:

 <template>
  <div class="container-multimedia">
    <div class="col-9 container-principal" v-if="mostrando == 1">
      
      <Galleria :value="arrImgs" :numVisible="5" :activeIndex="activeIndex" :showThumbnails="false" :showItemNavigators="true">
        <template #item="slotProps">
          <img
            class="img-galeria"
            :src="slotProps.item.image"
            :alt="slotProps.item.image"
          />
        </template>
        <template #thumbnail="slotProps">
          <img
            class="img-thumb"
            :src="slotProps.item.thumb"
            :alt="slotProps.item.image"
          />
        </template>
      </Galleria>

    </div>
    <div class="col-9 container-principal" v-else-if="mostrando == 2">
      <galeria-video :videos="arrVids" />
    </div>
    <div class="col-9 container-principal" v-else-if="mostrando == 3">
      <galeria-360 :keyVid="arr360[0].key" />
    </div>


    <div class="col-3 barra-lateral">
      
      <div class="container-1 multimedia" v-if="mostrando == 1">
        <div v-if="!arrVids.length" class="content-multimedia no-contenido">
          <!-- No hay video. No funciono. -->
          <div class="boton circular">
            <i><icon-base width="25" height="25" icon-name="Videos"><IconVideos /></icon-base></i>
          </div>
        </div>
        <div v-else @click="setMostrando(2)" class="content-multimedia normal">
          <!-- CLICK ACA PARA VER LA GALERIA DE VIDEOS -->
          <div class="boton circular">
            <i><icon-base width="25" height="25" icon-name="Videos"><IconVideos /></icon-base></i>
          </div>
        </div>
      </div>

      <div class="container-1 multimedia" v-else-if="mostrando == 2" @click="setMostrando(1)">
        <!-- CLICK ACA PARA VER LA GALERIA DE IMAGENES -->
          <div class="content-multimedia normal">
            <div class="boton circular">
              <i><icon-base width="25" height="25" icon-name="Fotos"><IconFotos /></icon-base></i>
            </div>
          </div>
      </div>

      <div class="container-1 multimedia" v-else-if="mostrando == 3">
        <div v-if="!arrVids.length" class="content-multimedia no-contenido">
          <!-- No hay video. No funciono. -->
          <div class="boton circular">
            <i><icon-base width="25" height="25" icon-name="Videos"><IconVideos /></icon-base></i>
          </div>
        </div>
        <div v-else @click="setMostrando(2)" class="content-multimedia normal">
          <!-- CLICK ACA PARA VER LA GALERIA DE VIDEOS -->
          <div class="boton circular">
            <i><icon-base width="25" height="25" icon-name="Videos"><IconVideos /></icon-base></i>
          </div>
        </div>
      </div>

      <!-- CASOS: 1) Hay fotos, videos y recorrida 360 -->

      <div class="container-2 multimedia" v-if="mostrando == 1">
        <div v-if="!arr360.length" class="content-multimedia no-contenido">
          <!-- No hay recorrido 360. No funciono. -->
          <div class="boton circular">
            <i><icon-base width="30" height="30" icon-name="360º"><Icon360 /></icon-base></i>
          </div>
        </div>
        <div v-else @click="setMostrando(3)" class="content-multimedia normal">
          <!-- CLICK ACA PARA VER EL RECORRIDO EN 360 -->
          <div class="boton circular">
            <i><icon-base width="30" height="30" icon-name="360º"><Icon360 /></icon-base></i>
          </div>
        </div>
      </div>
      <div class="container-2 multimedia" v-if="mostrando == 2" @click="setMostrando(3)">
        <div v-if="!arr360.length" class="content-multimedia no-contenido">
          <!-- No hay recorrido 360. No funciono. -->
          <div class="boton circular">
            <i><icon-base width="30" height="30" icon-name="360º"><Icon360 /></icon-base></i>
          </div>
        </div>
        <div v-else @click="setMostrando(3)" class="content-multimedia normal">
          <!-- CLICK ACA PARA VER EL RECORRIDO EN 360 -->
          <div class="boton circular">
            <i><icon-base width="30" height="30" icon-name="360º"><Icon360 /></icon-base></i>
          </div>
        </div>
      </div>
      <div class="container-2 multimedia" v-if="mostrando == 3" @click="setMostrando(1)">
        <!-- CLICK ACA PARA VER LA GALERIA DE IMAGENES -->
          <div class="content-multimedia normal">
            <div class="boton circular">
              <i><icon-base width="25" height="25" icon-name="Fotos"><IconFotos /></icon-base></i>
            </div>
          </div>
      </div>

    </div>
  </div>
  <multimedia-full-screen :item="item"/>
</template>

<script>
import IconBase from '@/components/IconBase.vue';
import IconFavoritos from '@/assets/iconos/icono-favorito.vue';
import IconVideos from '@/assets/iconos/icono-videos.vue';
import Icon360 from '@/assets/iconos/icono-360.vue';
import IconFotos from "@/assets/iconos/icono-fotos.vue";
import IconPantallaCompleta from "@/assets/iconos/icono-pantalla-completa.vue";

import { ref } from "@vue/reactivity";
import Galleria from "primevue/galleria";
import Galeria360 from "../../../Galeria/Galeria360.vue";
import GaleriaVideo from "../../../Galeria/GaleriaVideo.vue";
import { useStore } from 'vuex';
import MultimediaFullScreen from './MultimediaFullScreen.vue';

import $ from 'jquery'
export default {
  components: {
    IconBase,
    IconFavoritos,
    IconVideos, 
    Icon360,
    IconFotos, 
    IconPantallaCompleta,

    Galleria,
    Galeria360,
    GaleriaVideo,
    MultimediaFullScreen,
  },
  props: ["item"],
  setup(props) {
    const item = ref(null);
    item.value = props.item;

    const store = useStore()

    const arrImgs = ref([]);
    const arrVids = ref([]);
    const arr360 = ref([]);

    const activeIndex = ref(0);

    // Variable para saber qué estoy mostrando: 1- imagenes. 2- video. 3-360
    const mostrando = ref(1);

    const setMostrando = (val) => {
      mostrando.value = val;
    };

    // Obtengo imagenes
    item.value.imagenes.map((e) => {
      let obj = {
        image: e.image,
        thumb: e.thumb,
      };
      arrImgs.value.push(obj);
    });

    // Obtengo videos
    if (item.value.videos.length) {
      item.value.videos.map((e) => {
        let obj = {
          id: e.id,
          titulo: e.title,
          descripcion: e.description,
          provider: e.provider,
          key: e.key_video,
          url: e.url,
          player_url: e.player_url,
        };
        if (e.provider == "matterport") {
          arr360.value.push(obj);
        } else if (e.provider == "youtube") {
          arrVids.value.push(obj);
        }
      });
    }

    const abrirGaleriaFullScreen = () => {
      store.dispatch("propiedadPopup/galeriaFullScreenAction", true);
       setTimeout(() => {
        $("#toolbar1").focus();
      }, 100);
    };

    return { arrImgs, arrVids, arr360, mostrando, setMostrando, activeIndex, abrirGaleriaFullScreen, item };
  },
};
</script>

1 respuesta 1

1

Puedes utilizar los módulos css

Estos permiten aplicar una clase de css a un elemento de las siguientes formas:

<template>
  <!-- equivalente a class="red" -->
  <p :class="$style.red"> 
    Aplicando la clase
  </p>

  <!-- equivalente a class="red" si isRed es true -->
  <!-- en otro caso de vuelve class="" -->
  <p :class="{ [$style.red]: isRed }"> 
    Aplicando de forma condicional
  </p>
  
  <!-- equivalente a usar class="red bold" -->
  <p :class="[$style.red, $style.bold]">
    Por lista
  </p>
</template>

<style module>
.red {
  color: red;
}
.bold {
  font-weight: bold;
}
</style>

En tu caso, en vez de usar v-if para mostrar tus componentes puedes usar los modulos de css con display: none;:

<template>  
  <div class="container-multimedia">

    <div class="col-9 container-principal" :class="{[$style.hide]: mostrando !== 1}">
      Galleria 🖼️
      <input>
    </div>
    <div class="col-9 container-principal" :class="{[$style.hide]: mostrando !== 2}">
      Galleria de video 🎥
    </div>
    <div class="col-9 container-principal" :class="{[$style.hide]: mostrando !== 3}">
      Galleria 360 🌎
    </div>

    <div class="col-3 barra-lateral">
      <div class="container-1 multimedia" v-if="mostrando === 1" @click="setMostrando(2)">
        ver galeria videos 🎥
      </div>
      <div class="container-1 multimedia" v-else-if="mostrando === 2" @click="setMostrando(1)">
        ver galeria de imagenes 🖼️
      </div>
      <div class="container-1 multimedia" v-else-if="mostrando === 3" @click="setMostrando(2)">
        ver galeria de videos 🎥
      </div>

      <div class="container-2 multimedia" v-if="mostrando === 1" @click="setMostrando(3)">
        ver recorrido 360 🌎
      </div>
      <div class="container-2 multimedia" v-if="mostrando === 2" @click="setMostrando(3)">
        ver recorrido 360 🌎
      </div>
      <div class="container-2 multimedia" v-if="mostrando === 3" @click="setMostrando(1)">
        ver galeria de imagenes 🖼️
      </div>

    </div>
  </div>
</template>

<script>
import {ref} from "vue";

export default {
  props: ["item"],
  setup(props) {
    const myItem = ref(props.item);

    // Variable para saber qué estoy mostrando: 1- imagenes. 2- video. 3-360
    const mostrando = ref(1);

    const setMostrando = val => mostrando.value = val;

    return {mostrando, setMostrando, myItem};
  },
};
</script>

<style scoped module>
.hide {
  display: none;
}
</style>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.