【前言】

Vue3 使用 ElementPlus，Vue2 使用 Element-ui。

【问题描述】

在 Vue3+ElementPlus 中，使用 el-image 和预览大图功能，点击 el-image 后预览的图片局限在原有图片（小图）内，遮罩也没有充满屏幕。

使用 transform: translateY(-5px); 的原因是本来外面有一层 div，想用 hover 时增加阴影和位移表示选中了当前 div。

但是在 vue3 中出现预览的图片和小图尺寸一样、鼠标移动时图片频繁闪动。

错误效果

精简代码后发现是 ElementPlus el-image 的 previewSrcList 属性和 translateY 冲突（ translateX 等也冲突）。

如果没有外层 div、只有 el-image，但是 el-image 上增加 transform: translateY(-5px); 鼠标移动时图片不会闪烁，但是预览仍是小图不是大图。

精简代码后错误效果如下：

vue2 中 element-ui 则无此错误。 vue2 中正确效果如下：

vue3 代码如下

<template>
  <div>
    <el-image
      class="img"
      style="width: 200px;height: 200px;"
      :src="url"
      :preview-src-list="srcList"
    />
  </div>
</template>

<script setup>
import { ref } from "vue";
const url = ref(
  "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
);
const srcList = ref([
  "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
  "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
]);
</script>

<style scoped>
.img {
  transform: translateY(-5px);
}
</style>

vue2 代码如下

<template>
  <div>
    <el-image
      class="img"
      style="width: 200px;height: 200px;"
      :src="url"
      :preview-src-list="srcList"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
      srcList: [
        "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
        "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
      ],
    };
  },
};
</script>

<style scoped>
.img {
  transform: translateY(-5px);
}
</style>

图片频闪的 css 代码（别的部分都一样）：

.img:hover {
  border: 5px solid red;
  transform: translateY(-5px);
}

【解决办法】

放弃 translateY ，或者降级使用 vue2+element-ui，或者使用其她方法，如鼠标的移入移出方法，然后修改样式或者放大图片。