用vue3写一个图片横排不完全显示，第一张图片默认完全显示，鼠标经过其他图片时，该图片完全显示，第一张不完全显示，鼠标经过哪张图片，哪张图片就完全显示

在 Vue 3 中，你可以通过 CSS 动画结合 Vue 的响应式特性来实现这个效果。首先，你需要创建一个包含图片的组件，比如 `ImageCarousel`。在这个组件里，维护一张数组状态来存储每张图片的状态（是否完全显示）。然后，在模板中，使用 v-if 和 v-show 控制图片的隐藏和显示，配合 hover 事件监听器来改变状态。

HTML 模板部分：

<template>
  <div class="carousel">
    <transition-group :name="animationName" tag="div" v-for="(item, index) in images" :key="index">
      <img :src="item.src" :class="{ 'show-on-hover': isShowing[index] }" @mouseover="setShow(index)" @mouseout="resetShow(index)">
    </transition-group>
  </div>
</template>

CSS 部分：

.carousel {
  position: relative;
}

.show-on-hover {
  opacity: 0; /* 初始隐藏 */
  transition: opacity 0.5s ease-in-out;
}

/* 当鼠标悬停时，给对应的图片设置 opacity: 1 */
.show-on-hover:hover {
  opacity: 1;
}

Vue 组件部分 (假设 images 数组存储了图片 URL，并且默认第一张已完全显示):

<script setup>
import { ref, onMounted, watchEffect } from 'vue';

const images = ref([{ src: 'your-first-image-url' }, ...restOfYourImages]); // 其他图片URL在这里
let isShowing = new Array(images.value.length).fill(true); // 默认所有都显示

function setShow(index) {
  isShowing[index] = true;
}

function resetShow(index) {
  isShowing[index] = false;
}

// 初始化第一张图片完全显示
onMounted(() => {
  isShowing[0] = true;
});

watchEffect(() => {
  // 监听 isShowing 变化，调整每个图片的显示状态
  images.value.forEach((_, i) => {
    if (isShowing[i]) {
      document.querySelector(`img[src="${images.value[i].src}"]`).classList.add('show-on-hover');
    } else {
      document.querySelector(`img[src="${images.value[i].src}"]`).classList.remove('show-on-hover');
    }
  });
});
</script>