vue放大镜功能,vue图片放大插件
这篇文章主要为大家详细介绍了Vue3实现图片放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Vue3实现图片放大镜效果的具体代码，供大家参考，具体内容如下
实现效果
代码
模板
div class=商品-图像
！-大图容器-
差异
大号
:style=[
{
背景图像：` URL($ { imageList[curId]})`，
backgroundPositionX:位置。背景位置x，
backgroundPositionY:位置。背景技术在位置上，
},
]
v-if=isShow
/div
div class=middle ref=target
img:src= imageList[curId] alt= /
！-蒙层容器-
div class= layer :style= { left:left px ，top: top px } v-if=isShow/div
/div
ul class=small
里
图片列表中的v-for=(img，I
:key=i
@mouseenter=curId=i
:class={ active: curId===i }
img :src=img alt= /
/李
/ul
/div
/模板
脚本
从“vue”导入{反应、参考、观察}
从" @vueuse/core "导入{ useMouseInElement }
导出默认值{
名称： GoodsImage ，
道具：{
imageList: {
类型：数组，
默认值：()={
return []
}
}
},
setup () {
const curId=ref(0)
const target=ref(空)
//elementX:鼠标距离左侧的偏移值
//elementY:表表距离顶部的偏移值
//iso外部：是否在容器外部外部真实的内部错误的
const { elementX，elementY，iso outside }=使用鼠标inelement(target)
const left=ref(0) //滑块距离左侧的距离
const top=ref(0) //滑块距离顶部的距离
const isShow=ref(false) //显示大图和蒙层图的显示和隐藏
恒定位置=反应({ //大图显示的位置，默认是0
背景位置X: 0，
背景位置Y: 0
})
手表（
//监听的对象
[elementX，elementY，isOutside]，
()={
if (elementX.value 100) {
//左侧最小距离
left.value=0
}
if (elementX.value 300) {
左值=200
}
if(elementx。值100 elementx。值300){
left.value=elementX.value - 100
}
if (elementY.value 100) {
//左侧最小距离
top.value=0
}
if (elementY.value 300) {
顶值=200
}
if(元素y值100元素y值300){
top.value=elementY.value - 100
}
//控制背景图移动
//1.蒙层移动的方向和大图背景移动的方向是相反的
//2.蒙层和大图由于面积大小是1:2的蒙层每移动一个像素大图移动俩个像素
//backgrondPosition:x，y；
位置。backgroundpositionx=-left。值* 2 像素
位置。backgroundpositiony=-top。值* 2 像素
//当等外侧的值发生变化的时候，立刻取反赋值给是否显示
//iso外部：是否在容器外部外部真实的内部错误的
isShow.value=！iso外部。价值
},
{}
)
返回{
curId，
目标，
左边，
顶，
位置，
是否显示
}
}
}
/脚本
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。