ElementUI 轮播图片自适应大小

最新推荐文章于 2025-06-27 17:45:38 发布

原创

最新推荐文章于 2025-06-27 17:45:38 发布 · 6.8k 阅读

2 ·

CC 4.0 BY-SA版权

在使用ElementUI的轮播组件时，遇到轮播高度固定的问题。通过网上搜索的方法，尝试获取图片高度并设置为轮播高度，但发现必须在`this.$nextTick()`回调中进行，以确保DOM更新后正确获取图片展示高度，避免因原始高度导致的轮播图过大问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天学习了Element的轮播组件，然后用它做了一个demo，但发现一个问题，它的轮播高度是固定的，我现在想让轮播的高度根据图片自适应大小，网上查了一些方法，大致就是先获取图片的高度，然后把它设为轮播的高度，但是很多方法都少了关键的一点 this.$nextTick()

<template>
	<div>
		<el-carousel trigger="click" :height="bannerHeight+'px'">
			<el-carousel-item>
				<img ref="image" style="width:100%" src="http://www.rcrn88.com/Uploads/goods/2019031210524200000015523591622137.jpg"
				 alt="">
			</el-carousel-item>
			<el-carousel-item>
				<img ref="image" style="width:100%" src="http://www.rcrn88.com/Uploads/goods/2019031210524200000015523591622137.jpg"
				 alt="">
			</el-carousel-item>
		</el-carousel>
	</div>
</template>

<script>
	export default {	
		data() {
			return {
				bannerHeight: '',
			}
		},
		methods: {
			imgLoad() {
				this.$nextTick(function() {
					this.bannerHe