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

在Vue3中，结合Element UI创建这样的效果，可以利用Element UI提供的轮播组件如`el-image`，配合CSS来处理图片的隐藏和显示。首先，设置一张图片作为初始的完整展示状态，然后其他图片在默认状态下隐藏部分。当鼠标悬停在某张图片上时，通过JavaScript监听`mouseover`事件改变图片的样式。

HTML结构示例：

<template>
  <div class="image-container">
    <el-image :src="currentImage.src" style="width: 100%; height: auto; display: block;">
      <img slot="default" :src="initialImage.src" alt="初始图片">
    </el-image>
    <el-image v-for="(item, index) in images" :key="index" :src="item.src" :hover-class="'show-on-hover'" @mouseenter="handleMouseEnter(index)">
      <img slot="default" :src="item.src" alt="隐藏图片">
    </el-image>
  </div>
</template>

CSS样式：

.show-on-hover {
  opacity: 1;
  transition: opacity .5s ease-in-out;
}

.initial-show {
  opacity: 1;
}

JavaScript逻辑：

export default {
  data() {
    return {
      currentImage: { src: this.initialImage.src }, // 初始显示的图片
      initialImage: this.images[0], // 第一张图片
      images: ... // 图片数组
    };
  },
  methods: {
    handleMouseEnter(index) {
      if (index === 0) {
        // 如果当前不是第一张，隐藏第一张
        this.$refs['image-' + 0].classList.remove('initial-show');
      } else {
        // 如果当前是第一张，隐藏当前
        this.currentImage = this.images[index];
        this.$refs['image-' + index].classList.add('initial-show');
      }
    }
  },
  mounted() {
    // 初始情况下添加 'initial-show' 类到第一张图片
    this.$refs['image-' + 0].classList.add('initial-show');
  }
};

在这个例子中，当你将鼠标移到其他图片上时，对应的图片会变为完全显示，而第一张图片则变为不完全显示，鼠标移开时恢复原状。