vue.js2 / vuetify carousel图像的一些问题
vue.js2 / vuetify carousel图像的一些问题
提问于 2018-04-02 23:59:08
我使用来自https://vuetifyjs.com/en/components/carousels的carousel组件
<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
证明，1.0.8
回答 1
Stack Overflow用户
发布于 2018-05-31 13:07:31
对于第二个)，为了将carousel设置为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加载图像(就像我一样)而得到这个错误，可以通过向carousel添加一个v-if来修复。v-if="myloadedimages.length > 0"。这样，只有在加载了图像之后才会显示carousel，并且会显示第一个图像。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49614520
复制相关文章
相似问题