vue仿淘宝放大镜插件的使用

1.首先下载PicZoom插件

npm install vue-piczoom --save

2.使用时注意：原来img标签要改为pic-zoom,并且属性src要改为url

html部分代码：

<template>
  <div>
      <div class="box">
          <pic-zoom :url="imgurl" :scale="3"></pic-zoom>
      </div>
      <div class="list">
          <ul>
            <li v-for="(item,index) in imagesList" 
                :key="index" 
                @mouseenter="changeImage(index)"
            >
                 <img :src="item" />
            </li>
          </ul>
      </div>
  </div>
</template>

js部分代码：（1）引入PicZoom

                      （2）如果使用的图片是本地图片，则要加上require来引入。

  import PicZoom from "vue-piczoom"

<script>
  import PicZoom from "vue-piczoom"
    export default {
        name: "FooterShow",
        data(){
            return{
              imgurl:require("../assets/images/pic1.jpg"),
               imagesList:[
                 require("../assets/images/pic1.jpg"),
                 require("../assets/images/pic2.jpg"),
                 require("../assets/images/pic3.jpg"),
               ]
            }
         },
        components:{
          PicZoom
        },
      methods:{
        changeImage:function (index) {
             this.imgurl=this.imagesList[index];
        }
      }

    }
</script>

css部分代码：

<style scoped>
.box{
  width: 400px;
  height: 320px;
}
.list{
  width: 400px;
  height: 130px;
}
  .list ul{
    width: 400px;
    display: flex;
    justify-content: space-around;
  }
  .list ul li{
    width:120px;
    height: 90px;
    background-color: white;
    margin-top: 15px;
  }
  .list ul li img{
    width: 120px;
    height: 90px;
  }
</style>

这样就可以作为成一个组件来使用了。

效果图：