在element框架，鼠标悬浮显示放大镜，点击可以全屏预览

需求：鼠标悬浮到图片上显示放大镜模块，并跟随鼠标移动。

方法：

        vue-piczoom

        1.安装
                npm install vue-piczoom --save

               

        2.使用         

<template>  
  <a-card>
    <div style="width: 200px;height: 200px;">
      <PicZoom :url="imagesdL" :scale="3"></PicZoom>
    </div>
  </a-card>
</template>
 
import PicZoom from "vue-piczoom";
 
export default {
  components: {
    PicZoom
  },
}

3.改动（改为根据鼠标位置移动的放大镜，且点击能全屏放大浏览图片）

        1）将vue-piczoom组件拿出来封装为自己的组件

        2）将生成的canvas,appendChild到鼠标的范围黑框内（需要设置z-index为较高优先级）。

                

box.querySelector('.mouse-cover').appendChild(this.canvas)

        3）canvas宽高调整为固定300，定位位置可根据需求调整 ，如果是正右方就是小黑框宽度

this.canvas.style.left = this.cover.style.width
this.canvas.style.top = '0px'

全屏浏览图片借用了element的preview-src-list

        1）在组件内添加el-image标签

        

  <el-image class="elImage"  ref="elImgRef" :preview-src-list="[imgUrl]"></el-image>



    .elImage{
      display: none;
    }

        2）给mouse-cover添加click事件，点击时触发el-image的点击事件从而触发预览图片功能。

<div class="mouse-cover" ref="mouseCoverRef" @click="openImagePreview"></div>

 openImagePreview() {
      this.$refs.elImgRef.clickHandler(); // 手动触发点击事件      
 },