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

2021/05/18
- 编程
0阅读

期望效果

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

实现方法

先给左图加个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
    }
})

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

作者：有点东西

链接： https://www.youdiandongxi.com/article/element-carousel.html

协议：本文采用 CC BY-NC-SA 4.0 隐私协议，转载请注明出处！

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

期望效果

实现方法

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

其他推荐内容

在Phaser3中制作等距(Isometric)地图

IOS中WebViewJavascriptBridge桥接获取不到数据的问题

正则表达式的全局搜索标志g导致表单验证反复成功失败

评论区