vue3封装京东商品详情页放大镜效果组件 vue3封装京东商品详情页放大镜

本文实例为大家分享了vue3封装类似京东商品详情页放大镜效果组件的具体代码，供大家参考，具体内容如下

首先先完成基本布局
【vue3封装京东商品详情页放大镜效果组件】
文章图片

完成图片的切换效果，通过 mouseenter 事件切换图片

落地代码

.goods-image {width: 480px; height: 400px; position: relative; display: flex; z-index: 500; .large {position: absolute; top: 0; left: 412px; width: 400px; height: 400px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); background-repeat: no-repeat; background-size: 800px 800px; background-color: #f8f8f8; }.middle {width: 400px; height: 400px; position: relative; cursor: move; .layer {width: 200px; height: 200px; background: rgba(0, 0, 0, 0.2); left: 0; top: 0; position: absolute; }}.small {width: 80px; li {width: 68px; height: 68px; margin-left: 12px; margin-bottom: 15px; cursor: pointer; &:hover,&.active {border: 2px solid @xtxColor; }}}}