Блог

Возможно ли интегрировать несколько компонентов (галерей) в существующий проект (laravel)? Я попробовал с одним, и это не проблема (во внешнем интерфейсе), но с несколькими я точно не знаю, как это будет реализовано бэкэндом.

Я предполагаю, что мне придется влить информацию в компонент с помощью json. И каждый компонент (галерея) отдельно должен быть интегрирован (например->

 import Component from './Component.svelte';
new Component ({
  target: document.querySelector ('. app')
});
 

)

Я буду очень благодарен, если кто-нибудь укажет мне направление ..

ПРАВКА(БОЛЕЕ ПОДРОБНОЕ ОБЪЯСНЕНИЕ):

Еще раз здравствуйте. Я использую web pack и gulp для настройки стройности. Идея состоит в том, чтобы заменить галереи в существующем проекте.

Мой файл JSON:

 {
  "top_offers": [
    {
      "id": 1,
      "imgs": [
        {
          "url": "https://static.barnes-bulgaria.com/property-images/big/747121_1.jpg"
        },
        {
          "url": "https://static.barnes-bulgaria.com/property-images/big/747121_2.jpg"
        },
        {
          "url": "https://static.barnes-bulgaria.com/property-images/big/747121_3.jpg"
        }
      ]
    },
    {
      "id": 2,
      "imgs": [
        {
          "url": "https://static.barnes-bulgaria.com/property-images/big/747121_4.jpg"
        },
        {
          "url": "https://static.barnes-bulgaria.com/property-images/big/747121_5.jpg"
        },
        {
          "url": "https://static.barnes-bulgaria.com/property-images/big/747121_6.jpg"
        }
      ]
    },
    {
      "id": 3,
      "imgs": [
        {
          "url": "https://static.barnes-bulgaria.com/property-images/big/747121_7.jpg"
        },
        {
          "url": "https://static.barnes-bulgaria.com/property-images/big/747121_8.jpg"
        },
        {
          "url": "https://static.barnes-bulgaria.com/property-images/big/747121_9.jpg"
        }
      ]
    }
  ]
}
 

My Component (Houses.svelte)

 <script>
  import { topOffers } from "./topOffers.js";
  import { onMount } from "svelte";
  import SwiperCore, { Lazy, Navigation } from "swiper";

  SwiperCore.use([Lazy, Navigation]);

  let Swiper;
  let SwiperSlide;

  onMount(async () => {
    let res = await fetch("json/rentahome.json");
    res = await res.json();
    $topOffers = res.top_offers;

    const SwiperSvelteModule = await import("swiper/svelte");
    Swiper = SwiperSvelteModule.Swiper;
    SwiperSlide = SwiperSvelteModule.SwiperSlide;
  });
  
</script>

{#each $topOffers as gallery (gallery.imgs)}
  <svelte:component
    this={Swiper}
    style="--swiper-navigation-color: #fff;--swiper-pagination-color: #fff"
    lazy={true}
    navigation={true}
    loop={true}
    preloadImages={true}
    class="mySwiper"
    grabCursor={true}
  >

    {#each gallery.imgs as imgs (imgs.url)}
      <svelte:component this={SwiperSlide}>
        <img data-src={imgs.url} class="swiper-lazy size-img" alt="" />
        <div class="swiper-lazy-preloader swiper-lazy-preloader-white" />
      </svelte:component>
    {/each}

  </svelte:component>
{/each}

<style>
  .size-img {
    height: 200px;
    width: 100%;
  }
</style>
 

HTML существующего проекта:

  <div class="slider-slick-cardd">
           <div class='svelte' svelte-id='1'></div>
          </div>
 

Здесь я даю атрибут каждой обертке (svelte-id = ‘1 «, svelte-id =’ 2 ‘..и т. Д.), Предполагается, что они являются идентификаторами из JSON

Мой svelte.js файл:

 import Houses  from './Houses.svelte';
Array.from(document.querySelectorAll('.svelte')).forEach((e,i) => {          
   new Houses({
    target: e 
});
});
 

Здесь предполагается, что они должны быть пойманы по атрибутам..
Это решение работает не так, как ожидалось, потому что компонент foreach каждый раз, и результат получен ниже на прикрепленном изображении

Желаемым результатом должен быть столбец галереи, который будет строкой (для каждого атрибута оболочки svelte-id = «1» (2,3 ..и т. Д.).

Пожалуйста, кто-нибудь, помогите :((

Я предполагаю, что вам захочется узнать svelte-id внутреннюю часть каждого стройного компонента, поэтому вы создаете 1 стройный компонент для каждой строки и показываете только 1 галерею.

вы можете получить атрибут с помощью element.getAttribute()

 Array.from(document.querySelectorAll('.svelte')).forEach((e,i) => {          
   const svelteId = e.getAttribute('svelte-id');

   new Houses({
    target: e,
    props: {
      offerId: svelteId
    }
   });
}
 

с этим вы можете справиться в своем компоненте стройности:

 <script>
  import { topOffers } from "./topOffers.js";
  export let offerId;
  // ....
</script>

{#each $topOffers[offerId] as gallery (gallery.imgs)}
  <svelte:component ... />
{/each}
 

Если вы используете шаблон стройности по умолчанию для создания своего приложения, вы увидите, что main.js экспорт чего-то называется app . Это код, который доступен за пределами Svelte для остальной части страницы.

rollup.config.js Там есть поле output.name (по умолчанию приложение), это имя, с помощью которого main.js будет известен экспорт из.

С помощью этих двух частей мы могли бы легко перейти main.js к следующему:

 import App from './App.svelte';

export default function(target, props) {
    new App({
        target,
        props
    })
};
 

Что у нас здесь есть, так это то, что вместо того, чтобы немедленно монтировать наше приложение, у нас есть функция, которая позволяет создавать приложения вместо этого!

Так что теперь ваш сервер может генерировать html-вывод следующим образом:

 <script>
  app(document.getElementById('A'), propsA)
  app(document.getElementById('B'), propsB)
  app(document.getElementById('C'), propsC)
</script>
 

и он загрузит приложение три раза, в указанных разделах, с заданными реквизитами.

Теперь вы, конечно, можете также распечатать эти реквизиты во время рендеринга бэкенда по своему усмотрению, поскольку фактическое использование будет отличаться от платформы к платформе (в вашем случае Laravel).

Просто обратите внимание, что вы должны быть уверены, что весь DOM загружен (чтобы иметь возможность находить целевые объекты), а пакет svelte загружен (по очевидным причинам)