web-dev-qa-db-ja.com

Vuetifyカルーセルの高さを変更する

<v-carousel>の高さを下げることは可能ですか?ドキュメントで彼らがそれに取り組んでいるのを見ましたが、それはまだ実装されていますか?そうでない場合、回避策はありますか?最大の高さを設定しようとしています。

5
Otto

CSSを使用する必要も重要でもありません。 1つの支柱を使用して高さを変更できます。

名前:高さ

デフォルト:500

タイプ:番号| stringコンポーネントの高さを設定します

例えば。

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

メインのvueコンポーネント、またはv-carouselがあるコンポーネントで、cssルールを追加します。

.carousel {
  height: 200px !important;
}
  • それなしでは機能しない場合は、!importantを追加します

  • このルールをメインコンポーネントに配置する場合は、<style>タグにWordscopedが含まれていないことを確認してください

5
Un1

あなたはそれの自動高さを設定することができます:

<v-carousel height="auto">
4
mr_squall

たとえば、画像に基づいた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
  {
 }
  1. createメソッド:
getCarouselHeight () {
  var item = document.getElementsByClassName('v-image__image--cover')
   this.carouselHeight = item[0].clientHeight + 'px'
  }
  1. マウントされたメソッドを呼び出す:
mounted () {
this.getCarouselHeight()
}
1