vue图片放大镜组件,vue放大镜功能
最近有个项目需要局部放大图片，类似淘宝商品页面的放大镜效果。经过一番研究，功能是有的。下面文章主要介绍如何使用vue3实现放大镜效果的相关信息。有需要的朋友可以参考一下。
目录
前言一、包装的意义二。怎么包装？
准备
2.开始打包
使用
三、效果演示
摘要
前言
在逛购物网站的时候，大家一定都见过鼠标放在一件商品上，会有放大的效果。今天，我们将自己包装一个具有放大镜效果的全局组件。来看看吧~
一、封装的意义
从技术角度来看
通过vue插件封装成一个全局组件，整个项目也可以在其他地方使用，使用起来很方便。
模块化开发思想，一个模块实现一个功能。
用户角度
可以带来更好的浏览体验。
你可以看到商品的细节。
二、如何封装？
1. 准备
需要@vueuse/core的useMouseInElement方法，所以先打开项目根目录下的终端，执行下面的命令。
这里安装了指定的版本，您可以根据自己的需要进行选择。
npm安装@vueuse/core@5.3.0
2. 开始封装
和上一篇文章一样，使用vue插件注册全局组件。
将封装的全局组件存储在src/components下，并在该目录下创建一个名为enlarge-images.vue的新文件。
代码如下(示例):
模板
div class=商品-图像
！-预览大图-
div class= large :style=[{ background image:` URL($ { images[currIndex]})`}，bgPosition] v-show= is show /div
div class=middle ref=target
！-左边的大图-
img:src= images[currIndex] alt=
！-遮罩层-
div class= layer :style=[position] v-show= is show /div
/div
ul class=small
！-右边的缩略图-
li v-for=(img，I)in images :key= img :class= { active:I===currIndex }
img @ mouse enter= currIndex=I :src= img alt=
/李
/ul
/div
/模板
脚本
从“vue”导入{ ref，watch，reactive }
从“@vueuse/core”导入{ useMouseInElement }
导出默认值{
名称：放大图像，
道具：{
图像：{
类型：数组，
默认值：()=[]
}
},
设置(道具){
const currIndex=ref(0)
const target=ref(空)
const isShow=ref(false)
//遮罩层的坐标
恒定位置=反应({
左：0，
顶部：0
})
//控制背景图像的位置
const bgPosition=reactive({
背景位置X: 0，
背景位置Y: 0
})
const { elementX，elementY，iso outside }=use mouse inelement(target)
//在鼠标移动后监听信息
手表([elementX，elementY，isOutside]，()={
//每次值改变时，只读取新的数据
isShow.value=！iso outside . value
//鼠标在图片的区域之外，不需要计算坐标。
if (isOutside.value)返回
//水平方向
if (elementX.value 100) {
//左边距
位置.左=0
} else if (elementX.value 300) {
//右边框
位置.左=200
}否则{
//中间状态
position . left=elementx . value-100
}
//垂直方向
if (elementY.value 100) {
//上限
position.top=0
} else if (elementY.value 300) {
//下边界
位置.顶部=200
}否则{
//中间状态
position . top=elementy . value-100
}
//console.log(elementX.value，elementY.value，isOutside.value)
//计算预览图像背景的位置
bgposition . backgroundpositionx=-position . left * 2 px
bgposition . backgroundpositiony=-position . top * 2 px
//计算左侧遮罩层的位置
position.left=px
position.top=px
})
return { currIndex，target，isShow，position，bgPosition }
}
}
/脚本
样式范围语言=少。商品-图像{
框大小：边框-框；
宽度：480像素
高度：400像素
位置：相对；
显示器：flex
z指数：500;
img {
宽度：100%;
身高：100%;
}。大的
位置：绝对；
top:0；
左：410像素
宽度：400像素
高度：400像素
箱形阴影：0 0 10px rgba(0，0，0，0.1)；
背景-重复：不重复；
背景-尺寸：800像素800像素
背景色：# f8f8f8
}。中间{
宽度：400像素
高度：400像素
背景：# f5f5f5
位置：相对；
光标：移动；层{
宽度：200像素
高度：200像素
背景：rgba(0，0，0，0.2)；
左：0;
top:0；
位置：绝对；
}
}。小型{
边距：0;
填充：0;
宽度：80px
李{
宽度：68px
高度：68px
边距：10px
列表样式：无；
光标：指针；
：悬停，活动{
边框：2px纯色# 27ba9b
}
}
}
}
/风格
src/组件下新建索引。射流研究…
从导入放大图像放大图片
导出默认值{
安装（应用程序){
应用程序组件(放大图像。姓名，放大图像)
}
}
主页。射流研究…中注册为插件
从“vue”导入{ createApp }
从导入应用程序 App.vue
从导入路由器。/路由器
从导入存储。/商店
//自己封装的
从导入myUI ./组件
createApp(应用程序)。使用（存储)。使用（路由器)。使用(myUI).挂载(#应用程序)
3. 使用
这里借助固定的数据进行测试
代码如下（示例):
模板
div class=主页-横幅
！-放大镜效果-
放大图像：images=images/
/div
/模板
脚本
导出默认值{
名称："应用程序",
setup() {
常量图像=[
https://代码-1307161657。因为。美联社-北京。myq云。com/images/cloudJPEG ，
https://代码-1307161657。因为。美联社-北京。myq云。com/images/ground。JPEG ，
https://代码-1307161657。因为。美联社-北京。myq云。com/images/night。JPEG ，
https://代码-1307161657。因为。美联社-北京。myq云。com/images/street。JPEG ，
https://代码-1307161657。因为。美联社-北京。myq云。com/images/sun。 JPEG
]
返回{图像}
}
}
/脚本
style lang=less 。主页-横幅{
宽度：1000像素
边距：50px自动；
}
/风格
三、 效果演示
鼠标移入右侧小图片，即可切换当前显示的图片
鼠标放入左侧图片预览区，预览区内移动鼠标即可在右侧看到放大的指定区域
(PS:gif图太大了，各位看下效果图吧~)
总结
批量注册为全局组件的方式，各位可以看下某视频剪辑软件常用工具函数这篇文章。
到此这篇关于如何利用vue3实现放大镜效果的文章就介绍到这了，更多相关vue3实现放大镜效果内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。