纯洁美丽。它化做雪花，用自己洁白的生躯覆盖在大地上。此时，一切都是银装素裹，一副冰清玉洁的模样。光秃秃的树枝上缀满了朵朵洁白的 "梨花 "，风一吹，花儿纷纷飘落，好似一只只银白色的蝴蝶在空中偏偏起舞。 "忽如一夜春风来，千树万树梨花开 "，这句诗不正是赞美冬天的吗？
本文实例为大家分享了Vue3实现图片放大镜效果的具体代码，供大家参考，具体内容如下
实现效果
代码
<template>
<div class="goods-image">
<!-- 大图容器 -->
<div
class="large"
:style="[
{
backgroundImage: `url(${imageList[curId]})`,
backgroundPositionX: position.backgroundPositionX,
backgroundPositionY: position.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">
<li
v-for="(img, i) in imageList"
:key="i"
@mouseenter="curId = i"
:class="{ active: curId === i }"
>
<img :src="img" alt="" />
</li>
</ul>
</div>
</template>
<script>
import { reactive, ref, watch } from "vue'
import { useMouseInElement } from '@vueuse/core'
export default {
name: 'GoodsImage',
props: {
imageList: {
type: Array,
default: () => {
return []
}
}
},
setup () {
const curId = ref(0)
const target = ref(null)
// elementX: 鼠标距离左侧的偏移值
// elementY：表表距离顶部的偏移值
// isOutside: 是否在容器外部 外部true 内部 false
const { elementX, elementY, isOutside } = useMouseInElement(target)
const left = ref(0) // 滑块距离左侧的距离
const top = ref(0) // 滑块距离顶部的距离
const isShow = ref(false) // 显示大图和蒙层图的显示和隐藏
const position = reactive({ // 大图显示的位置,默认是0
backgroundPositionX: 0,
backgroundPositionY: 0
})
watch(
// 监听的对象
[elementX, elementY, isOutside],
() => {
if (elementX.value < 100) {
// 左侧最小距离
left.value = 0
}
if (elementX.value > 300) {
left.value = 200
}
if (elementX.value > 100 && elementX.value < 300) {
left.value = elementX.value - 100
}
if (elementY.value < 100) {
// 左侧最小距离
top.value = 0
}
if (elementY.value > 300) {
top.value = 200
}
if (elementY.value > 100 && elementY.value < 300) {
top.value = elementY.value - 100
}
// 控制背景图移动
// 1. 蒙层移动的方向和大图背景移动的方向是相反的
// 2. 蒙层和大图由于面积大小是1:2的 蒙层每移动一个像素 大图移动俩个像素
// backgrondPosition：x,y;
position.backgroundPositionX = -left.value * 2 + 'px'
position.backgroundPositionY = -top.value * 2 + 'px'
// 当isOutside的值发生变化的时候,立刻取反赋值给isShow
// isOutside: 是否在容器外部 外部true 内部 false
isShow.value = !isOutside.value
},
{}
)
return {
curId,
target,
left,
top,
position,
isShow
}
}
}
</script>
以上就是Vue3如何实现图片放大镜效果。要用你的梦想引领你的生命，要用感恩真诚助人圆梦的心态引领你的生命，要用执著无惧乐观的态度来引领你的人生。更多关于Vue3如何实现图片放大镜效果请关注haodaima.com其它相关文章！
