欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

element-ui中轮播图自适应图片高度

程序员文章站 2022-03-20 17:49:38
哈哈,久违了各位。我又回来了,最近在做毕设,所以难免会遇到很多问题,需要解决很多问题,在万能的博友帮助下,终于解决了Element-ui中轮播图的图片高度问题,话不多说上代码。 那个axios的使用不重要,大致思路就是页面渲染前拿到当前窗口的宽度*图片比例给轮播图一个初始的高度,当窗后大小发生变化时 ......

哈哈,久违了各位。我又回来了,最近在做毕设,所以难免会遇到很多问题,需要解决很多问题,在万能的博友帮助下,终于解决了element-ui中轮播图的图片高度问题,话不多说上代码。

那个axios的使用不重要,大致思路就是页面渲染前拿到当前窗口的宽度*图片比例给轮播图一个初始的高度,当窗后大小发生变化时,监听事件里将轮播图高度重新赋值即可,再次感谢两位博友的帮助

<template>
    <div v-if="imgurl">
      <el-carousel :height="imgheight+'px'" trigger="click">
        <el-carousel-item v-for="(item,index) in imgurl" :key="index">
          <img ref="image" style="width:100%;" :src="item" alt="轮播图" />
        </el-carousel-item>
      </el-carousel>
    </div>
</template>
<script>
// 引入axios
import axios from "axios";
export default {
  name: "first",
  data() {
    return {
      imgurl: [],
      imgheight: ""
    };
  },
  methods: {
    imgload() {
      this.$nexttick(function() {
        // 获取窗口宽度*图片的比例,定义页面初始的轮播图高度
        this.imgheight = document.body.clientwidth*1/4
      });
    },
    getimgurl() {
      axios
        .get("/carousel")
        .then(res => {
          for (var i = 0; i < res.data.message.length; i++) {
            const imgurl = `../../static/${res.data.message[i].imgurl}`;
            this.imgurl.push(imgurl);
          }
          // 获取到图片后,调用this.imgload()方法定义图片初始高度
          this.imgload();
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  mounted() {
    this.getimgurl();
    // 监听窗口变化,使得轮播图高度自适应图片高度
    window.addeventlistener("resize", () => {
      this.imgheight = this.$refs.image[0].height;
    });
  }
};
</script>