Vuetify 全屏轮播
Posted
技术标签:
【中文标题】Vuetify 全屏轮播【英文标题】：Vuetify full-screen carousel 【发布时间】：2018-04-04 16:57:48 【问题描述】：对于我网站的主页，我计划在其上添加一些文字的全屏轮播。我可以制作轮播，但不能全屏（我想要它这样您就不必滚动，无论设备大小如何。我尝试了几件事，但都没有工作。
我在页面顶部有一个工具栏，它似乎会干扰并导致这些工具不起作用。
我试过了：
<v-carousel style="height: 100%" hide-controls>
<v-carousel fullscreen hide-controls>
<v-carousel fill-height hide-controls>
但是所有这些要么使整个事物消失，要么使旋转木马坚持似乎是默认的最大高度。
示例：https://codepen.io/anon/pen/EwqWqP
如何获得全屏轮播？
【问题讨论】：
分享更多代码。 @pirs 我已经更新了问题。 【参考方案1】：height: 100% 不起作用，因为您的父元素，例如 <body> 或 <some-other-div> 也需要一些高度。
您可以做的是将您的父容器height:100vh 和您的轮播设置为height:100%，例如：
HTML
<div id="app">
<v-app id="inspire">
<v-toolbar></v-toolbar>
<v-carousel style="height:100%">
<v-carousel-item v-for="(item,i) in items" v-bind:src="item.src" :key="i"></v-carousel-item>
</v-carousel>
</v-app>
</div>
CSS
#inspire
height: 100vh;
这似乎对我有用→Example
【讨论】：
这不起作用，因为 vh 似乎忽略了工具栏。我适当地更新了问题。 我不知道你可以在 vuetify 组件上设置样式属性，就像它们是普通的 html 标签一样。感谢您的回答【参考方案2】：使用 Vuetify 2.5.8，您可以在 v-carousel 标签中设置 。
<v-carousel >
【讨论】：
以上是关于Vuetify 全屏轮播的主要内容，如果未能解决你的问题，请参考以下文章