vue.js2 / vuetify 轮播图片的一些问题

Question

我使用来自https://vuetifyjs.com/en/components/carousels的轮播组件

<section v-show="artistImagesList.length > 0">
    <v-carousel>
        <v-carousel-item v-for="(nextArtistImage,i) in artistImagesList" :src="nextArtistImage.image_url" :key="nextArtistImage.id" :alt="nextArtistImage.image_url">
            <div class="carousel_image_title">{{ concatStr(nextArtistImage.description, 100) }}</div>
        </v-carousel-item>
    </v-carousel>
</section>

使用它我需要更多选项来控制一些图像，例如

1) 如果图像的宽度/高度太大，我想显示具有轮播大小比例的图像。有可能吗？

2) 如何设置图像区域的最大宽度/高度？

3) 当我以秒间隔默认打开页面时，我看到空的轮播区域，并且仅在间隔默认秒后打开第一张图像。 我设置了有效的图像列表，没有空元素。但看起来一开始打开了一些空图像。

它是某个库的包装器吗？我可以访问它的选项吗？请参考示例如何制作...

使用的包

vue.js2.5.7

vuetify,1.0.8

Answer 1

对于数字 2) 将轮播设置为 400 像素的宽度和高度，我目前正在使用以下代码。但要回答 1），您可以将这些值设置为您想要的任何值。

   <v-flex xs12 style="width:100%; max-width:400px; margin: auto 0">
        <v-carousel cycle hide-delimiters style="width:100%; max-height:400px" class="white">
          <v-carousel-item v-for="(item,i) in images" :src="baseUrl+item.url" :key="i"></v-carousel-item>
        </v-carousel>
      </v-flex>

对于 3，如果您因为通过 axios 加载图像而收到此错误（就像我一样），可以通过在轮播中添加 v-if 来修复它。 v-if="myloadedimages.length > 0"。这样，轮播将仅在图像加载后显示，并且将显示第一张图像。