Question

我有以下代码，可以在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>

bootstrap-vue b-modal溢出-y内容不滚动

0 个答案: