bootstrap-vue b-modal overflow-y содержимое не прокручивается - PullRequest
Новая
       26

bootstrap-vue b-modal overflow-y содержимое не прокручивается

0 голосов
/ 14 октября 2018

У меня есть следующий код, который делает миниатюры изображений в b-carousel.При нажатии открывается b-dialog с большими изображениями в другом b-carousel с некоторым текстовым содержимым;это содержание заставляет диалог прокручиваться по оси Y.Проблема, с которой я сталкиваюсь, заключается в том, что невозможно программно открыть диалоговое окно, чтобы его можно было прокручивать!

Обновление # 1 : я попытался сфокусировать диалоговое окно $el, изменяя .modal-open { overflow-y: auto; }, и еще несколько вещей, но, похоже, ничего не работает!Единственное, что работает, - это открыть его, а затем нажать кнопку «Далее» для b-carousel, который, кажется, помещает содержимое на место и включает прокрутку.

Обновление # 2 : Я еще немного покопался, и похоже, что это position:relative, которую установила карусель!Если я верну значение inherit, прокрутка будет работать, но это нарушит стилизацию кнопок для элементов управления.Я также попытался установить для диалогового окна значение position:relative, но это никак не отразилось. 

<template>
  <div class='thumbnail-wrapper-outer'>
    <b-modal ref="modal" size='lg' v-model="detailsOpen" @ok="closeDetails">
      <div>        
        <b-carousel v-model="imageNumber" controls indicators :interval="thumbnailCarouselInterval">
          <b-carousel-slide :key="photo.url" v-for="photo in hugePhotos" :img-width="photo.width" :img-height="photo.height" :img-src="photo.url"></b-carousel-slide>
        </b-carousel>     
      </div>
      <div>
         {{content}} <-- ... overflowing-y content here ... -->
      </div>
      <div slot="modal-footer" class="w-100">    
        <b-btn size="sm" class="float-right" @click="closeDetails">
          Close
        </b-btn>
      </div>
    </b-modal>
    <div class='thumbnail-wrapper-inner'>
      <div @click.stop.prevent="openDetails">
        <b-carousel v-model="imageNumber" class="thumb" controls indicators :interval="thumbnailCarouselInterval">
          <b-carousel-slide :key="photo.url" v-for="photo in smallPhotos" :img-width="photo.width" :img-height="photo.height" :img-src="photo.url"></b-carousel-slide>
        </b-carousel>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component
export default class Thumbnail extends Vue {
  @Prop(Object)
  smallPhotos!: any[];
  @Prop(Object)
  hugePhotos!: any[];
  @Prop(String)
  content!: string;
  detailsOpen: boolean = false;
  thumbnailCarouselInterval: number = 0;
  imageNumber: number = 0;
  fixScrolling() {
    (this.$refs.modal as any).$el.focus();
  }
  openDetails() {
    this.detailsOpen = true;
  }
  closeDetails() {
    this.detailsOpen = false;
  }
}
</script>

<style scoped lang="scss">
.thumbnail-wrapper-inner {
  &:hover {
    cursor: pointer;
  }
  .thumb {
    width: 120px;
  }
}
</style>
...