element-ui中轮播图自适应图片高度
Posted azyzl
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了element-ui中轮播图自适应图片高度相关的知识,希望对你有一定的参考价值。
哈哈,久违了各位。我又回来了,最近在做毕设,所以难免会遇到很多问题,需要解决很多问题,在万能的博友帮助下,终于解决了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>
以上是关于element-ui中轮播图自适应图片高度的主要内容,如果未能解决你的问题,请参考以下文章
vue中轮播组件,实现默认显示3张图片,中间显示全部两边显示部分