Трафарет js: сторонняя библиотека карусели уничтожена, когда я изменяю область действия: 'true' для тени: 'true' - PullRequest
Новая
       5

Трафарет js: сторонняя библиотека карусели уничтожена, когда я изменяю область действия: 'true' для тени: 'true'

0 голосов
/ 18 февраля 2020

У меня есть карусель на основе сторонней библиотеки Swiper js. Проблема в том, что когда я использую scope: true, у меня нет проблем, и все работает нормально, однако, когда я пытаюсь настроить компонент с shadow: true, он уничтожается и ничего не работает. Я использую библиотеку следующим образом: 

...
import  Swiper, { SwiperOptions }  from 'swiper';
...

@Component({
  tag: 'my-swiper-slider',
  styleUrl: './styles.css',
  assetsDirs: ['assets'],
  shadow: true,
})
export class Carousel {
@Prop() options: SwiperOptions = {
    slidesPerView: 3,
    spaceBetween: 40,
    autoplay: false,
    loop: false,
    autoHeight: true,
    breakpoints: {
      640: {
        slidesPerView: 5,
        spaceBetween: 20,
      },
      768: {
        slidesPerView: 5,
        spaceBetween: 40,
      },
      1024: {
        slidesPerView: 5,
        spaceBetween: 50,
      },
    }
  }
 private setSwiper() {
    this.swiper = new Swiper('.swiper-container', this.options);
  }

  componentDidLoad() {
    this.setSwiper();
  }

  render() {

    return (
      <Host class={{"container": true}}>

        <PrevBtn
          goBack={this.goBack.bind(this)} />

        <div class="swiper-container">
          <div class="swiper-wrapper">
            <slot></slot>
          </div>
        </div>

        <NextBtn
          goForward={this.goForward.bind(this)} />

      </Host>
    );
  }
}

По какой-то причине, когда я настраиваю компонент как «shadow: true», он не может получить доступ к трафарету, или я так думаю.

1 Ответ

2 голосов
/ 18 февраля 2020

Когда вы включаете shadow, все дочерние элементы компонента будут перемещены в его теневую DOM и, следовательно, будут скрыты как детали реализации. Это означает, что вы больше не сможете найти свой контейнер с помощью селектора запросов .swiper-container.

Однако конструктор Swiper может также взять элемент HTML вместо селектора запроса, поэтому вы можете использовать ref вместо элемента контейнера: 

@Component({ tag: 'my-swiper-slider', shadow: true })
export class Carousel {
  @Prop() options: SwiperOptions;

  @State() swiper?: Swiper;
  @State() swiperContainerRef?: HTMLDivElement;

  componentDidLoad() {
    if (this.swiperContainerRef) {
      this.swiper = new Swiper(this.swiperContainerRef, this.options);
    }
  }

  render() {
    return (
      <Host>
        <div ref={el => this.swiperContainerRef = el)} />
      </Host>
    );
  }
}

Ссылка на контейнер всегда должна быть уже доступна в componentDidLoad ловушке жизненного цикла, но вы также можете использовать requestAnimationFrame чтобы дождаться его появления.

...