elementUI轮播(Carousel)自适应

elementUI轮播(Carousel)自适应

1.需求:

图片要求宽度100%,高度不能限制死,要求高度自适应。
但这边的问题就是Carousel的高度默认是300px,图片能随着宽度的改变而改变,但Carousel无法改变。

2.解决:

<template>
  <div class="three">
    <el-carousel arrow="always" :height="bannerHeight+'px'">
        <el-carousel-item v-for="it in banner" :key="it.bannerName">
          <img ref="bannerImg" :src="it.bannerPath" :alt="it.bannerName" @load="imgLoad" style="width: 100%">
        </el-carousel-item>
    </el-carousel>
  
  </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      banner: [
        {
          bannerPath:'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
        },
        {
          bannerPath:'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg'
        },
      ],
      bannerHeight: ""
    };
  },
  mounted() {
    this.imgLoad();
    window.addEventListener("resize",() => {
        this.imgLoad();
      },false);
   
  },
  methods: {
    imgLoad() {
      this.$nextTick(() => {
        this.bannerHeight =this.$refs.bannerImg && this.$refs.bannerImg.length? this.$refs.bannerImg[0].height: "";//关键的一步
      });
    }
  }
};
</script>
<style lang="less">
.three {
  padding: 30px;
  width: 100%;
  height: 100%;
}
</style>

在这里插入图片描述

3.出现了问题:

页面初始化加载的时候,图片还没加载完,最开始没有高度。所以,第一次渲染的时候,文字就上去了,图片就在文字的下面渲染
在这里插入图片描述

4.解决:

通过img加载完以后,自己触发onLoad事件,再去设置插件的高度

<template>
  <div class="three">
    <el-carousel arrow="always" :height="bannerHeight+'px'">
        <el-carousel-item v-for="it in banner" :key="it.bannerName">
          <img ref="bannerImg" :src="it.bannerPath" :alt="it.bannerName" @load="imgLoad" style="width: 100%" @load=“handleLoad”>
        </el-carousel-item>
    </el-carousel>
  
  </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      banner: [
        {
          bannerPath:'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
        },
        {
          bannerPath:'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg'
        },
      ],
      bannerHeight: ""
    };
  },
  mounted() {
    //this.imgLoad();
    window.addEventListener("resize",() => {
        this.imgLoad();
      },false);
   
  },
  methods: {
    imgLoad() {
      this.$nextTick(() => {
        this.bannerHeight =this.$refs.bannerImg && this.$refs.bannerImg.length? this.$refs.bannerImg[0].height: "";//关键的一步
      });
    },
    handleLoad(){
		this.imgLoad()
	}
  }
};
</script>
<style lang="less">
.three {
  padding: 30px;
  width: 100%;
  height: 100%;
}
</style>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值