vue 긴 그림 수직 으로 위 vue 에서 짧 은 그림 수직 으로 가운데 에 있 는 것 을 실현 합 니 다.

1099 단어 vue신축성 레이아웃수직
대략적인 효 과 는 아래 그림 과 같 고 수직 방향 만 고려한다.긴 그림 은 스크롤 바 를 통 해 볼 수 있 고 짧 은 그림 이 중간 효과 이 며 구조 가 합 리 적 입 니 다.

html 코드(vue 역할 영역 내):

<div class="box" v-for="item in previewImg">
  <img :src="item" alt="" @load="checkHeight($event)">
</div>
css 코드:

.box{
 height: 100%;//         
 overflow: auto;
 display: flex;
 flex-direction: column;
 justify-content: space-around;
}
.swiper-slide.long{
 justify-content: flex-start;
}
js 코드(vue 역할 영역 내 jquery 사용):

methods: {
checkHeight:function (event) {
  var el=$(event.currentTarget);
  el.parent().removeClass('long');
　　//this.CH      
  if(el.height()>this.CH){
    el.parent().addClass('long');
  }

}

}
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
python 코드 를 기반 으로 간단 한 숫자 걸 러 내 는 방법
vue router 에서 html 5 history 를 iis 서버 에 설정 하 는 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage