手机版 欢迎访问it开发者社区(www.mfbz.cn)网站

当前位置: > 开发

vue遮罩层

时间:2021/6/9 19:08:11|来源:|点击: 次

export default {
data() {
return {
topStyle:{transform:’’},
r_img: {},
topShow:false,
rShow:false
}
},
methods : {
// 鼠标进入原图空间函数
enterHandler() {
// 层罩及放大空间的显示
this.topShow = true
this.rShow = true
},
// 鼠标移动函数
moveHandler(event) {
// 鼠标的坐标位置
let x = event.offsetX
let y = event.offsetY
// 层罩的左上角坐标位置,并对其进行限制:无法超出原图区域左上角
let topX = (x-100) < 0 ? 0:(x-100)
let topY = (y-100) < 0 ? 0:(y-100)
// 对层罩位置再一次限制,保证层罩只能在原图区域空间内
if(topX>200) {
topX = 200
}
if(topY>200) {
topY = 200
}
// 通过 transform 进行移动控制
this.topStyle.transform = translate(${topX}px,${topY}px)
this.r_img.transform = translate(-${2*topX}px,-${2*topY}px)
},
// 鼠标移出函数
outHandler() {
// 控制层罩与放大空间的隐藏
this.topShow = false
this.rShow = false
}
}
}

Copyright © 2002-2019 某某自媒体运营 版权所有