logo 有点东西

vue element走马灯组件（Carousel）高度设置

期望效果

在页面加载后，走马灯组件的高度与左图高度一致。

实现方法

先给左图加个ref,来方便我们获取dom元素的高度。之后定义一个photosHeight来设置走马灯的高度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
    <div>
        <div class="item">
            <img :src="photoUrl" ref="photo" alt="">
            <p>图一</p>
       </div>
    </div>
    <div class="item">
        <el-carousel v-if="photos.length" :height="photosHeight">
            <el-carousel-item v-for="(photo, index) in photos" :key="index">
                <el-image style="width: 100%" :src="photo" fit="contain"></el-image>
            </el-carousel-item>
        </el-carousel>
        <p>图二</p>
    </div>
</template>

js部分: 在图一加载时读取图一的高度并设置给走马灯

1
2
3
4
5
this.$nextTick(() => {
    this.$refs.photo.onload = function() {
        this.photosHeight = this.height + 'px' // 注意Carousel的height属性是string类型。即高度+px
    }
})

其他推荐内容

FRP使用笔记
  • 2021/05/20
    • 工具

FRP使用笔记

v-for创建重复组件导致重复请求接口的BUG
  • 2021/04/25
    • 编程

v-for创建重复组件导致重复请求接口的BUG

评论区