vue图片放大镜组件,vue 可视化大屏
本文主要介绍Vue3.0自己实现放大镜效果的案例。本文通过一个简单的案例来说明对这项技术的理解和使用。以下是详细内容，有需要的朋友可以参考一下。
需要的效果是：放大两倍，鼠标进入左图片区域时，显示遮罩层，离开时，隐藏遮罩层。
css中的光标
https://www.runoob.com/cssref/pr-class-cursor.html
如何实现鼠标随动效果：(没有父亲的孩子)绝对定位修改top，左键控制移动。
在@vueuse中，有一个工具方法：useMouseInElement
模板
div ref=target
h1你好世界/h1
/div
/模板
脚本
从“vue”导入{ ref }
从“@vueuse/core”导入{ useMouseInElement }
导出默认值{
setup() {
const target=ref(空)
const { x，y，is outside }=use mouse inelement(target)
返回{ x，y，isOutside }
}
}
/脚本
这是VueUse官网上的用法。最后，别忘了return { target } 我一开始没return target,x,y,isOutside的值是 0,0,false,并不是变化的值。。
鼠标位置和遮罩位置之间的关系：
class= layer :style= layer style /div//这是遮罩层。
Setup(){ //下面是实现鼠标跟随的代码
const layerStyle=reactive({
顶部：“0px”，
左：“0px”
})
//监听三个值的变化。watch的第一个参数是一个数组。
手表([elementX，elementY，isOutside]，()={
//layer style . left=elementx . value/2 px
//layer style . top=element y . value/2 px
设top=elementY.value - 100
let left=elementX.value - 100
//为掩码元素分配位置
if (top 0) top=0
if (top 200) top=200
if (left 0) left=0
如果(左200)左=200
layerStyle.top=top px
layerStyle.left=left px
})
返回{ elementX，elementY，isOutside，target，layerStyle }
}
遮罩区域不能超出顶部左侧的父框。我注释掉了两行代码。为什么我不能把它们写在一起？因为后来，当我需要添加判断的时候，我会发现，当我在判断之后添加px的时候，你会发现无从下手。上面分开写，top和left只是一个数值。计算完成后，我会添加单位。
放大效果如何实现：
css中有一个背景大小属性。第一个参数是指宽度，第二个参数是指高度，可以是放大图片。
本身是 400 *400,那放大两倍就是 800*800
css中的Background-position-x和background-position-y可以放大指定区域。
关于背景-位置：x，y，第一个值是水平位置，第二个值是垂直位置。
这是右边有放大效果的div:
div class= large :style= { background image:` URL($ { images[current]})，largeStyle }/div
这是css代码，可以参考一下：大的
位置：绝对；
top:0；
左：412px
宽度：400px
高度：400px
箱形阴影：0 0 10px rgba(0，0，0，0.1)；
背景-重复：不重复；
背景-尺寸：800px 800px
背景色：# f8f8f8
}
最后，当鼠标移出左边的方框区域时，蒙版被隐藏，右边放大的方框也被隐藏。
useinelement的isOutSide属性可以监控是否超出监控元素，v-show=！“在外面”就可以了。
关于Vue3.0实现放大镜效果的案例这篇文章到此为止。更多关于Vue3.0实现放大镜效果的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。