element-ui走马灯如何实现图片自适应

最新推荐文章于 2025-03-04 23:27:12 发布

转载最新推荐文章于 2025-03-04 23:27:12 发布 · 3.6k 阅读

9 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000015452637

文章标签：

#javascript #ui #ViewUI

问题
开发中使用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(){}
}