标签：很多 帮助 引入 catch trigger ++ rip 方法 页面
哈哈，久违了各位。我又回来了，最近在做毕设，所以难免会遇到很多问题，需要解决很多问题，在万能的博友帮助下，终于解决了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>
标签：很多 帮助 引入 catch trigger ++ rip 方法 页面
原文地址：https://www.cnblogs.com/Azyzl/p/11169141.html
