|
本文最后编辑于 前，其中的内容可能需要更新。
::: tip 介绍Vue3图片预览放大镜组件 具备展示和放大功能 :::
Vue3图片预览放大镜组件(非插件)
图片预览放大镜组件使用项目
目的：完成商品图片预览功能和切换 并且实现图片放大镜功能
大致步骤：
准备图片预览放大镜组件的样式和效果
需要准备两个图片容器 一个用来预览原图 一个用来预览放大后的图片
需要准备一个遮盖图效果 用来控制预览放大效果
Vue组件导入图片预览放大镜组件 配置图片数据
图片预览放大镜组件实现步骤
封装图片预览放大镜组件
路径: src/views/goods/components/goods-image.vue
首先准备大图容器和遮罩容器
然后使用@vueuse/core的useMouseInElement方法获取基于元素的偏移量(遮盖层移动数据)
elementX表示相对元素左上角的横向偏移量 x轴
elementY表示相对元素左上角的纵向偏移量 y轴
isOutside是否在元素之外 在监控Dom元素外是true 在里面是false
target是监听的Dom元素
计算出 遮罩容器定位与大容器背景定位 暴露出数据给模板使用(右侧大图移动数据) 实现放大效果
图片预览放大镜组件参数
:images动态向图片预览放大镜组件 传递展示图片数据 (必填)
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153 ![]() ![]() import { ref, watch, reactive } from 'vue'// 导入VueUse里面 监听鼠标在元素的坐标import { useMouseInElement } from '@vueuse/core'export default { name: 'GoodsImage', props: { // 接收传来的图片数据 images: { type: Array, default: () => [] } }, setup (props) { // 设置图片切换的状态位 const currIndex = ref(0) // 设置监听的Dom元素 const target = ref(null) // 控制右侧大图的显示与隐藏 const isShow = ref(false) // 使用VueUse里面 监听鼠标在元素的坐标 // elementX表示相对元素左上角的横向偏移量 x轴 // elementY表示相对元素左上角的纵向偏移量 y轴 // isOutside是否在元素之外 在监控Dom元素外是true 在里面是false // target是监听的Dom元素 //! useMouseInElement参数都是对象 需要用.value const { elementX, elementY, isOutside } = useMouseInElement(target) // 控制左侧遮罩层 实现随鼠标移动(需要设置相应式) const layerPosition = reactive({ x: 0, y: 0 }) // 控制右侧预览图的位置 实现放大效果 (通过css样式属性 控制背景图的相对位置) const imgPostion = reactive({ backgroundPositionX: 0, backgroundPositionY: 0 }) // 设置一个监听 实时监听鼠标在图片中 位置的变化 watch([elementX, elementY, isOutside], (newT) => { // 控制显示和隐藏预览图 isShow.value = !isOutside.value // 如果在外面就不执行预览 if (isOutside.value) return // 计算layer(遮罩层)的位置 // 设置x坐标 if (elementX.value < 100) { // 计算左侧的边界(x方向左边界) // 到达做边界 让其固定不移出去(左上角为基准) layerPosition.left = 0 } else if (elementX.value > 300) { // 计算右边界(x方向右边界) // 到达右边界 让其固定不移出去(左上角为基准) layerPosition.left = 200 } else { // 临界于x轴的100和300之间 // 遮罩层在图片移动区域应该是300px(自身宽度的一半 -100) layerPosition.left = elementX.value - 100 } // 设置y坐标 if (elementY.value < 100) { // 计算左侧的边界(y方向左边界) // 到达做边界 让其固定不移出去(左上角为基准) layerPosition.top = 0 } else if (elementY.value > 300) { // 计算右边界(y方向右边界) // 到达右边界 让其固定不移出去(左上角为基准) layerPosition.top = 200 } else { // 临界于x轴的100和300之间 // 遮罩层在图片移动区域应该是300px(自身宽度的一半 -100) layerPosition.top = elementY.value - 100 } // 先计算 右侧大图的移动位置 再计算遮盖层的移动位置 // 计算右侧大图的移动位置 // 控制右侧大图的背景位置(右侧放大图的背景图像的水平位置) // 移动的范围是之前是左侧的两倍 imgPostion.backgroundPositionX = -layerPosition.left * 2 + 'px' imgPostion.backgroundPositionY = -layerPosition.top * 2 + 'px' // 计算遮盖层的移动位置 // 算出遮盖层移动的距离 实现遮盖层根据鼠标移动 (遮盖层的背景图像的水平位置) layerPosition.left = layerPosition.left + 'px' layerPosition.top = layerPosition.top + 'px' }) return { currIndex, target, layerPosition, imgPostion, isShow } }}.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; background: #f5f5f5; 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 #27b79b; } } }}
在Vue组件中 导入图片预览放大镜组件
没有设置为插件 需要import导入使用
图片预览放大镜组件参数
:images动态向图片预览放大镜组件 传递展示图片数据 (必填)
1234567891011121314151617 // 导入图片预览放大镜组件import GoodsImage from './components/goods-image.vue'export default { name: 'getImg', components: { // 配置图片预览放大镜组件 GoodsImage },
总结：
基于Vueuse提供方法监控进入DOM内的坐标
基于坐标的变化控制遮罩层的移动
基于坐标的变化控制右侧预览图背景的变化
控制进入和离开时显示和隐藏效果
|