1、首先要安装@vueuse/core
npm i @vueuse/core
2、实现过程如下:
<template>
<div class="goods-image">
<div v-show="show" class="large" :style="[{backgroundImage:`url(${images[currIndex]})`},largePosition]"></div>
<div class="middle" ref="target">
<img :src="images[currIndex]" alt="">
<div v-show="show" class="layer" :style="layerPosition"></div>
</div>
<ul class="small">
<li v-for="(img,i) in images" :key="img" :class="{active:i===currIndex}">
<img @mouseenter="currIndex=i" :src="img" alt="">
</li>
</ul>
</div>
</template>
<script>
import { reactive, ref, watch } from 'vue'
import { useMouseInElement } from '@vueuse/core'
export default {
name: 'HelloWorld',
props: {
images: {
type: Array,
default: () => ['https://yanxuan-item.nosdn.127.net/a6939f41c48fa9e9c8f7a7ed855351f1.jpg',
'https://yanxuan-item.nosdn.127.net/0cdfd546f8675669b87716114ad5900a.jpg',
'https://yanxuan-item.nosdn.127.net/240983ccc935146a4795e3990d30468d.jpg',
'https://yanxuan-item.nosdn.127.net/d46e005025a5d3b73c4781d31b327558.jpg',
'https://yanxuan-item.nosdn.127.net/330913911087b44b0d817dd78233165f.png',]
}
},
setup (props) {
const currIndex = ref(0)
const show = ref(false)
const layerPosition = reactive({
left: 0,
top: 0
})
const largePosition = reactive({
backgroundPositionX: 0,
backgroundPositionY: 0
})
const target = ref(null)
const { elementX, elementY, isOutside } = useMouseInElement(target)
watch([elementX, elementY, isOutside], () => {
show.value = !isOutside.value
const position = { x: 0, y: 0 }
if (elementX.value < 100) position.x = 0
else if (elementX.value > 300) position.x = 200
else position.x = elementX.value - 100
if (elementY.value < 100) position.y = 0
else if (elementY.value > 300) position.y = 200
else position.y = elementY.value - 100
layerPosition.left = position.x + 'px'
layerPosition.top = position.y + 'px'
largePosition.backgroundPositionX = -2 * position.x + 'px'
largePosition.backgroundPositionY = -2 * position.y + 'px'
})
return { currIndex, show, layerPosition, largePosition, target }
}
}
</script>
<style scoped lang="less">
.goods-image {
width: 480px;
height: 400px;
position: relative;
display: flex;
z-index: 500;
.large {
position: absolute;
top: 0;
left: 412px;
width: 400px;
height: 400px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
background-repeat: no-repeat;
background-size: 800px 800px;
background-color: #f8f8f8;
}
.middle {
width: 400px;
height: 400px;
background: #f5f5f5;
position: relative;
cursor: move;
img{
width: 100%;
height: 100%;
}
//cursor: pointer;
.layer {
width: 200px;
height: 200px;
background: rgba(0,0,0,.2);
left: 0;
top: 0;
position: absolute;
}
}
.small {
width: 80px;
li {
width: 68px;
height: 68px;
margin-left: 12px;
margin-bottom: 15px;
cursor: pointer;
img{
width: 100%;
height: 100%;
}
&:hover,&.active {
border: 2px solid #27BA9B;
}
}
}
}
</style>
3、使用:在其他的.vue文件中导入组件即可使用,例如:
import HelloWorld from "@/components/HelloWorld.vue";
<HelloWorld ></HelloWorld>
4、效果如下: