Vue 프로젝트에서 Element ui 주마등을 사용하여 수행할 수 없는 문제 해결
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>
<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>보충 지식: 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>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`
}이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
