Vue 프로젝트에서 Element ui 주마등을 사용하여 수행할 수 없는 문제 해결

1. vue 프로젝트에 elementui 도입
http://element.eleme.io/#/zh-CN/component/carousel
도입 후 HTML 섹션

<el-carousel height="150px">
<el-carousel-item v-for="item in imgList" :key="item" height="300px" >
<h3><img :src="item" alt=""> </h3>
</el-carousel-item>
</el-carousel>

JS 섹션

<script>
export default {
data(){
return {
imgList:[
require('../../assets/img/images/a1.png'),
require('../../assets/img/images/a2.png'),
require('../../assets/img/images/a3.png'),
require('../../assets/img/images/a4.png'),
require('../../assets/img/images/a5.png')
]
}
},
components: {
}
}
</script>

웹팩으로 구축된 프로젝트는 절대 경로를 직접 사용할 수 없습니다. 리퀴어를 사용하려면 이걸 사용하지 않으면 온라인 그림이어야 합니다.http 형식의
보충 지식: vue 사용 요소 UI 프레임워크를 바탕으로 주마등 이미지 높이 적응
주마등 코드 구조

data() {
 return{
 //  ,  
 imgList: [
   {id: 0, idView: require('../assets/images/banner3.jpg')},
   {id: 1, name: ' ', idView: require('../assets/images/banner2.jpg')},
   {id: 2, name: ' ', idView: require('../assets/images/banner1.jpg')}
  ]
 }
}

<template> 
 <el-carousel :interval="5000" arrow="always" class="d_jump" :height="imgHeight">
 <el-carousel-item v-for="item in imgList" :key="item.id">
  <el-row>
  <el-col :span="24"><img ref="imgHeight" :src="item.idView" class="banner_img"/></el-col>
  </el-row>
 </el-carousel-item>
 </el-carousel>
</template>

element UI 홈페이지 주소 스탬프 여기.
http://element-cn.eleme.io/#/zh-CN/component/carousel
Carousel에 Height 파라미터가 있는데 고정값 620px를 주면 그림과 같은 효과가 나타난다. 그림의 너비는 시각적 창의 변화에 따라 확대되거나 축소된다. 시각적 창의 축소, 그림의 너비와 높이의 축소, 윤방 그림의 고정 높이는 변하지 않는다. so...그림에서 보듯이 그림이height: 100%를 주면속성, 그림이 늘어납니다.그래, 그럼 auto로 바꾸자, 그림과 같이
따라서 그림이 정상적으로 표시되려면 공백줄이 나타나지 않는 방법은 윤방도의 높이와 그림의 높이를 동태적으로 바꾸면 된다.
먼저 그림의 높이를 가져오고, ref를 통해 DOM 요소를 가져옵니다.
감청 창이 바뀔 때img의 높이를 가져와 윤방도height 속성에 속성 값을 추가합니다

that.imgHeight = '620px'
window.onresize = function temp() {
 //  img height 
 that.imgHeight = `${that.$refs.imgHeight['0'].height}px`
}

지금까지 Vue를 해결하는 프로젝트에서 Element ui 주마등을 사용해서 이루지 못한 문제는 바로 편집자가 여러분께 공유한 모든 내용입니다. 참고 부탁드리며 많은 응원 부탁드립니다.