vue3 swiper slide 如何获取最高高度

在Vue3中，如果你想要获取Swiper插件的slide元素的最高高度，可以按照以下步骤操作：

1. 首先，确保你在组件中已经正确安装了swiper及其vue相关的库，并且已经创建了一个`Swiper`实例。

<template>
  <div ref="swiper">
    <!-- Swiper slides here -->
  </div>
</template>

<script>
import { ref } from 'vue';
import SwiperCore, { Navigation, Lazy, Scrollbar } from 'swiper';
import Swiper from 'swiper/vue';

// Import Swiper styles
import 'swiper/dist/css/swiper.css';

export default {
  setup() {
    const swiper = ref(null);
    
    // Initialize Swiper instance
    const initSwiper = async () => {
      await import('./swiper.min.js'); // If you use a separate file for Swiper

      const params = {
        // ... other Swiper parameters
        observeParents: true,
        on: {
          slideChangeTransitionEnd: (event) => {
            const currentSlide = event.target.slides[event.index];
            const maxHeight = Math.max(...currentSlide.children.map((child) => child.offsetHeight));
            // 更新或存储当前最高的滑动高度
            this.sliderMaxHeight = maxHeight;
          }
        }
      };

      swiper.value = new Swiper('.swiper-container', params);
    };

    // Call the initialization when the component is ready
    useEffect(() => {
      initSwiper();
    }, []);

    return {
      swiper
    };
  }
}
</script>

在这个例子中，我们在`slideChangeTransitionEnd`事件中计算每个slide内所有子元素的高度，取最大值作为当前slide的最大高度。然后你可以通过`this.sliderMaxHeight`来访问这个值。