element-ui 輪播圖的使用
```
<template>
??<div?id="banner">
????<!--動(dòng)態(tài)將圖片輪播圖的容器高度設(shè)置成與圖片一致-->
????<el-carousel?:height="bannerHeight?+?'px'">
??????<!--遍歷圖片地址,動(dòng)態(tài)生成輪播圖-->
??????<el-carousel-item?v-for="item?in?img_list"?:key="item">
????????<img?:src="item"?alt?/>
??????</el-carousel-item>
????</el-carousel>
??</div>
</template>
<script>
export?default?{
??name:?"Banner",
??data()?{
????return?{
??????//?圖片地址數(shù)組
??????img_list:?["./banner1",?"./banner1",?"./banner1",?"./banner1"],
??????//?圖片父容器高度
??????bannerHeight:?1000,
??????//?瀏覽器寬度
??????screenWidth:?0
????};
??},
??methods:?{
????setSize:?function()?{
??????//?通過(guò)瀏覽器寬度(圖片寬度)計(jì)算高度
??????this.bannerHeight?=?(400?/?1920)?*?this.screenWidth;
????}
??},
??mounted()?{
????//?首次加載時(shí),需要調(diào)用一次
????this.screenWidth?=?window.innerWidth;
????this.setSize();
????//?窗口大小發(fā)生改變時(shí),調(diào)用一次
????window.onresize?=?()?=>?{
??????this.screenWidth?=?window.innerWidth;
??????this.setSize();
????};
??}
};
</script>
<style?scoped>
.el-carousel__item?h3?{
??color:?#475669;
??font-size:?14px;
??opacity:?0.75;
??line-height:?300px;
??margin:?0;
}
.el-carousel__item:nth-child(2n)?{
??background-color:?#99a9bf;
}
.el-carousel__item:nth-child(2n?+?1)?{
??background-color:?#d3dce6;
}
img?{
??/*設(shè)置圖片寬度和瀏覽器寬度一致*/
??width:?100%;
??height:?inherit;
}
</style>
```
