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）将轮播设置为400px宽度和高度，我目前正在使用以下代码。但要回答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"。这样，只有在加载图像后才会显示轮播，并显示第一张图像。

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

1 个答案: