Question

是否可以减小<v-carousel>的高度？我在文档中看到他们正在研究它，但是它已经实施了吗？如果没有解决方法？我只是想设置一个最大高度。

Answer 1

在您的主要vue组件中或在您拥有v-carousel的组件中，添加css规则：

.carousel {
  height: 200px !important;
}

添加!important（如果没有它就无法工作）
如果您将此规则放在主要组件中，请确保<style>标签中没有单词scoped

Answer 2

您可以设置其自动高度：

<v-carousel height="auto">

Answer 3

例如，如果要基于图像的v型转盘动态高度。
您可以使用以下内容：

示例：

GLM1 <- ME(BS~LATITUDE, data=dataset, listw=listwgab8, family=gaussian, nsim=99, alpha=0.05)

设置数据道具：

<v-carousel :style="{'height': this.carouselHeight}">
   <v-carousel-item v-for="(item, index) in items" :key="index" style="height: auto" :src="item.image"></v-carousel-item>
</v-carousel>

创建方法：

data () {
 return {
carouselHeight: 0
  {
 }

已挂载的调用方法：

getCarouselHeight () {
  var item = document.getElementsByClassName('v-image__image--cover')
   this.carouselHeight = item[0].clientHeight + 'px'
  }

Answer 4

不需要使用CSS也不重要。您可以使用一个道具来更改高度：

名称：身高

默认值：500

类型：数字|串设置组件高度

例如。

  <v-carousel height="500px">
    <v-carousel-item
      v-for="(item,i) in items"
      :key="i"
      :src="item.src"
    ></v-carousel-item>
  </v-carousel>

更改Vuetify转盘高度

4 个答案: