问题
开发中使用element的走马灯组件遇到图片无法自适应的问题,但是开发中往往需要自适应布局,在此情况下如何实现走马灯的自适应是一个值得解决的问题。尝试多次,直接写css无法实现布局的自适应。
解决办法
经过实践,可通过以下方式解决
<el-carousel trigger="click" :height="bannerH +'px'">
<el-carousel-item v-for="(item,index) in bannerImgLst" :key="index">
<img :src="'https://mirror198829.github.io/static/cloud/'+item" class="bannerImg"/>
</el-carousel-item>
</el-carous>
关键点:
通过监听页面的resize方法,动态修改banner的宽高
export default {
name: 'homePage',
data () {
return {
bannerH:200,
bannerImgLst:['navBg1.png','navBg2.png','navBg3.jpg']
}
},
methods:{
setBannerH(){
this.bannerH = document.body.clientWidth / 4
}
},
mounted(){
this.setBannerH()
window.addEventListener('resize', () => {
this.setBannerH()
}, false)
},
created(){}
}