1,html
<div class="demo-image__preview">
<el-image
style="width: 100%; height: 50px"
:src="scope.row.url"
:preview-src-list="[scope.row.url]"
@mouseenter="scope.row.showZoomIcon = true"
@mouseleave="scope.row.showZoomIcon = false"
:style="{ opacity: scope.row.showZoomIcon ? '0.7' : '1' }"
>
</el-image>
<div
class="demo-image__zoom-icon"
v-if="scope.row.showZoomIcon"
>
<i class="el-icon-zoom-in"></i>
</div>
</div>
2,css
.demo-image__container {
position: relative;
}
.demo-image__zoom-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
color: #fff;
padding: 10px;
border-radius: 50%;
opacity: 0.8;
pointer-events: none;
transition: opacity 0.3s;
}
.demo-image__zoom-icon:hover {
opacity: 1;
}
3, 定义
data(){
return {
showZoomIcon: false,
}
}