programing

Vuetify 회전목마 높이 변경

yoursource 2022. 11. 21. 23:06
반응형

Vuetify 회전목마 높이 변경

의 높이를 낮출 수 있습니까?<v-carousel>서류에서 작업 중인 것으로 봤는데, 아직 구현이 안 되었나요?그렇지 않다면 주변에 할 일이 있나요?난 그냥 최고 높이를 설정하려고 하는 거야.

자동 높이를 설정할 수 있습니다.

<v-carousel height="auto">

CSS를 사용할 필요도 없고, 중요한 것도 아닙니다.높이를 변경하려면 다음 중 하나의 받침대를 사용할 수 있습니다.

이름: 높이

디폴트: 500

Type: number | string 컴포넌트 높이를 설정합니다.

예.

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

기본 vue 컴포넌트 또는 이 컴포넌트가 있는 컴포넌트에서v-carouselcss 규칙을 추가합니다.

.carousel {
  height: 200px !important;
}
  • 더하다!important그것 없이는 안 된다면

  • 이 규칙을 메인 컴포넌트에 넣는 경우,<style>태그에 단어가 없습니다.scoped그 안에

예를 들어 이미지를 기반으로 한 v-carousel의 동적 높이를 원하는 경우.
다음과 같은 것을 사용할 수 있습니다.

예:

<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. 작성 방법:
getCarouselHeight () {
  var item = document.getElementsByClassName('v-image__image--cover')
   this.carouselHeight = item[0].clientHeight + 'px'
  }
  1. 마운트된 콜 메서드:
mounted () {
this.getCarouselHeight()
}

언급URL : https://stackoverflow.com/questions/51067412/changing-the-vuetify-carousel-height

반응형