Изменение высоты карусели Vuetify

Question

Можно ли уменьшить высоту на <v-carousel>? Я видел в документации, что они работали над этим, но реализовано ли оно еще? Если нет, то есть ли обход? Я просто пытаюсь установить максимальную высоту.

Answer 1

Если вы хотите динамическую высоту v-карусели на основе изображения, например.
Вы можете использовать что-то вроде этого:

пример:

<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>

1. установить данные реквизита:

data () {
 return {
carouselHeight: 0
  {
 }

2. метод создания:

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

3. вызов метода на смонтированном:

mounted () {
this.getCarouselHeight()
}

Answer 2

Нет необходимости использовать 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>

Answer 3

В вашем основном компоненте vue или в компоненте, где у вас есть v-carousel, добавьте правило css:

.carousel {
  height: 200px !important;
}

• Добавить !important, если без него не работает

• Если вы помещаете это правило в основной компонент, убедитесь, что в теге <style> нет слова scoped