vue element走马灯组件(Carousel)高度设置
in 前端 with 0 comment

vue element走马灯组件(Carousel)高度设置

in 前端 with 0 comment

期望效果

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

1.png

实现方法

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

<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部分: 在图一加载时读取图一的高度并设置给走马灯

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