Vue3+ElementPlus 中 el-image 预览大图属性 previewSrcList 和 translateY(-5px) 的冲突

【前言】

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，或者使用其她方法如鼠标的移入移出方法，然后修改样式或者放大图片。