el-carousel走马灯自动高度方案

ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ..

于 2024-06-28 17:11:50 发布

阅读量187

点赞数 1

分类专栏： Vue 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/betterAndBetter_/article/details/140048690

版权

Vue 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

<el-carousel :height="carHeight" autoplay>
   <el-carousel-item v-for="(item, index) in list" :key="item.url">
     <img :src="item.url" alt="" :ref="el => (imageRefs[index] = el)" />
   </el-carousel-item>
 </el-carousel>

import { useResizeObserver } from '@vueuse/core';

const list = ref([]);
const imageRefs = ref([]);
const carHeight = ref(0);

onMounted(async () => {
  await getData();
  
  nextTick(() => {
    useResizeObserver(imageRefs.value[0], entries => {
      const entry = entries[0];
      const { height } = entry.contentRect;
      carHeight.value = height + 'px';
    });
  });
});