鼠标悬浮+高亮放大图片效果（vue）

1.完整效果

2.图片列表数据结构：

detailImageList=ref(["https://cbu01.alicdn.com/img/ibank/O1CN016gFMNi24tEw82w8Vj_!!2219410837448-0-cib.jpg","https://cbu01.alicdn.com/img/ibank/O1CN01NAgFiA24tEw82xPXg_!!2219410837448-0-cib.jpg","https://cbu01.alicdn.com/img/ibank/O1CN01IAJq2y24tEw9W58Aq_!!2219410837448-0-cib.jpg","https://cbu01.alicdn.com/img/ibank/O1CN01q5OSs924tEw94lFy4_!!2219410837448-0-cib.jpg","https://cbu01.alicdn.com/img/ibank/O1CN01Vdf7c724tEwP8ZJJH_!!2219410837448-0-cib.jpg","https://cbu01.alicdn.com/img/ibank/O1CN01ahOP1b24tEw6wZOYj_!!2219410837448-0-cib.jpg","https://cbu01.alicdn.com/img/ibank/O1CN012V5iiu24tEwFwpJlG_!!2219410837448-0-cib.jpg","https://cbu01.alicdn.com/img/ibank/O1CN01CvsVnL24tEwBgBsNs_!!2219410837448-0-cib.jpg","https://cbu01.alicdn.com/img/ibank/O1CN01eTsNsN24tEwJIQpmI_!!2219410837448-0-cib.jpg","https://cbu01.alicdn.com/img/ibank/O1CN01WD14h024tEwFwssI2_!!2219410837448-0-cib.jpg","https://cbu01.alicdn.com/img/ibank/O1CN01kYSj9w24tEwJLNqds_!!2219410837448-0-cib.jpg","https://p16-oec-general-useast5.ttcdn-us.com/tos-useast5-i-omjb5zjo8w-tx/65c2c4429b734178b096f3fb787cd092~tplv-fhlh96nyum-resize-webp:800:800.webp"])

3.视图层

<div v-if="detailImageList.length"class="card detail-section"><divclass="detail-section__head"><divclass="detail-section__icon detail-section__icon--primary"><Icon icon="ep:picture"/></div><div><divclass="section-title">商品图片</div><divclass="section-desc">共{{detailImageList.length}}张图片</div></div></div><divclass="detail-gallery"><el-link v-for="(image, index) in detailImageList":key="`${selectedRecord.productId || 'image'}-${index}`":href="detailUrl"target="_blank"class="detail-gallery__item detail-gallery__item--clickable"><single-image:src="image"/></el-link></div></div>

4.样式（css）

.card{border-radius:10px;padding:16px;border:1px solidvar(--el-border-color-lighter);background:var(--el-bg-color);box-shadow:0 1px 2pxrgb(0 0 0 / 4%);}.detail-section{display:flex;flex-direction:column;gap:14px;padding:20px;border-radius:12px;border:1px solidvar(--el-border-color-lighter);background:var(--el-bg-color);box-shadow:0 2px 8pxrgba(0,0,0,0.04);}.detail-section__head{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solidvar(--el-border-color-lighter);}.detail-section__icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;}.detail-section__icon--primary{background:linear-gradient(135deg,#409eff 0%,#66b1ff 100%);box-shadow:0 3px 8pxrgba(64,158,255,0.3);}.detail-section__icon--warning{background:linear-gradient(135deg,#e6a23c 0%,#f0c278 100%);box-shadow:0 3px 8pxrgba(230,162,60,0.3);}.detail-section__icon--success{background:linear-gradient(135deg,#67c23a 0%,#85ce61 100%);box-shadow:0 3px 8pxrgba(103,194,58,0.3);}.section-title{font-size:16px;font-weight:650;color:var(--el-text-color-primary);line-height:1.4;}.section-desc{margin-top:2px;font-size:12px;color:var(--el-text-color-secondary);}.detail-gallery{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;}.detail-gallery__item{width:140px;height:140px;overflow:hidden;border-radius:10px;border:1px solidvar(--el-border-color-lighter);background:var(--el-fill-color-lighter);}.detail-gallery__item--clickable{cursor:pointer;transition:transform 0.2s,box-shadow 0.2s;&:hover{transform:scale(1.03);box-shadow:0 4px 16pxrgba(0,0,0,0.12);border-color:var(--el-color-primary-light-5);}}.detail-gallery__item--clickable :deep(.el-link){text-decoration:none;}.detail-gallery__item :deep(img){object-fit:cover;width:100%;height:100%;}

5.图片组件封装如下

<template><el-image v-bind="$attrs"style="width: 120px; min-height: 80px; object-fit: contain":src="src"class="cursor-pointer"referrerpolicy="no-referrer"@click="doPreview(src)"><template #placeholder><divclass="img-loading"style="min-width: 120px; min-height: 120px"></div></template><template #error><divclass="flex items-center justify-center w-full h-full"style="color: red; min-height: 80px">加载失败</div></template></el-image></template><script setup>import{apiasviewerApi}from"v-viewer";constprops=defineProps({src:{type:String,default:"",},});asyncfunctiondoPreview(url){viewerApi({images:[url],options:{zIndex:4000,toolbar:{flipHorizontal:{show:true,},flipVertical:{show:true,},next:{show:false,},oneToOne:{show:true,},play:{show:false,},prev:{show:false,},reset:{show:true,},rotateLeft:{show:true,},rotateRight:{show:true,},zoomIn:{show:true,},zoomOut:{show:true,},},},});}</script><style>.img-loading{width:100%;height:100%;list-style:none;background-image:linear-gradient(100deg,#fafafa25%,#eaeaea37%,#fafafa63%);background-size:400%100%;background-position:100%50%;animation:skeleton-loading1.4s ease infinite;}@keyframesskeleton-loading{0%{background-position:100%50%;}100%{background-position:050%;}}</style>

icon

icon 标签网站，快速找到需要icon
快捷 方便 好用 推荐！