哈哈,久违了各位。我又回来了,最近在做毕设,所以难免会遇到很多问题,需要解决很多问题,在万能的博友帮助下,终于解决了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>