1、安装插件 npm install vue-piczoom --save
2、复制相关代码即可
<template>
<div class="box">
<div class="pic">
<pic-zoom :url="imgurl" :scale="3"></pic-zoom>
</div>
<ul>
<li
v-for="(item, index) in picList"
:key="index"
@mouseenter="skim(index)"
>
<img :src="item" />
</li>
</ul>
</div>
</template>
<script>
import PicZoom from "vue-piczoom";
export default {
components: {
PicZoom,
},
data() {
return {
imgurl: "../../../static/images/0001.jpg",
picList: [
"../../../static/images/0001.jpg",
"../../../static/images/0002.jpg",
"../../../static/images/0003.jpg",
"../../../static/images/0004.jpg",
"../../../static/images/0005.jpg",
],
};
},
methods: {
skim(index) {
this.imgurl = this.picList[index];
},
},
};
</script>
<style scoped lang="scss">
.box {
width: 30vw;
height: 37vw;
border: 1px solid red;
.pic {
width: 30vw;
height: 30vw;
}
ul {
width: 100%;
display: flex;
justify-content: space-around;
list-style: none;
margin-top: 20px;
li {
width: 5vw;
height: 5vw;
img {
width: 100%;
height: 100%;
}
}
}
}
</style>
