Vue3实现图片放大镜效果
程序员文章站
2022-04-24 11:21:44
本文实例为大家分享了vue3实现图片放大镜效果的具体代码，供大家参考，具体内容如下实现效果代码
...
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。