图片实现鼠标悬浮蒙层、遮罩层，element 的 table 中使用 image 组件并实现预览放大，解决 图标 icon 遮挡图片预览放大事件。

需求：在 element 的 table 组件中使用  image 图片预览大图的功能时，给鼠标悬浮图片时给一个遮罩层、蒙层的效果，来优化用户交互。

一、引用 image 图片设置放大属性并预设 icon 图标

 //给最大的盒子设置 class
 <div  class="img-box">
    //导入 element 的 image组件
    <div>
      <el-image :preview-teleported="true" style="width: 75px; height: 75px" class="images"
      :hide-on-click-modal=true src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
      :zoom-rate="1.2"
      :preview-src-list="['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg']"
      :initial-index="1" fit="cover" >
      </el-image>
     </div>

    // 使用 element 中查看 icon ，可自定义图片
     <el-icon  class="icon-box" >
        <View />
     </el-icon>
</div>

当前效果：

二、 实现盒子的 hover 遮罩层、蒙层。

.img-box {
  display: flex;
  justify-content: center;
  align-items: center;
  //父级设置 相对定位，让 icon设置绝对定位时能够以该父级为准。
  position: relative;
  // icon 设置 绝对定位 让其固定在你想要的合适位置。 样式可调整，自己定位即可。
  .icon-box {
    display: none;
    position: absolute;
    top: 35%;
  }
}
// 设置鼠标悬浮时的效果
.img-box:hover {
  // 给图片设置样式
  .images{
    background: #000;
    img {
      // 图片设置 透明度，让背景黑色呈现出来。
      opacity: 0.6;
    }
     //这个可忽略，为了
    .el-image-viewer__canvas > img {
      opacity: 1;
    }
  }
  // 给 icon 设置样式，.el-icon 是组件自带的类名。
  .el-icon {
    display: inline-block;
    color: #fff;
  }
}

效果图：

三、 解决 图标 icon 遮挡图片的点击预览事件问题。

        在 element 中 image 的图片预览放大事件没有通过额外的变量来实现，所以我们在做遮罩层、蒙层的时候就会遇见一个问题，如何在蒙层中你加入了额外的 icon 图标，那么这个图标会遮挡住原本的图片预览放大事件。

        其实你不嫌麻烦的话，可以使用 element 中的对话框，配合图片显示也能完成图片发大的效果，并且不会出现这种遮挡事件问题。

这里解决 图标遮挡 element 自带的放大事件其实用一句话解决就好，给你图标的 css 设置：

//在你的 icon 盒子遮挡 image放大事件的元素上，添加该 css 属性。
pointer-events:none

        pointer-events 属性用于控制元素如何响应鼠标或者触摸事件的，当设置为 none 时，元素不响应鼠标或者触摸事件，但可以实现内容区域内其余元素响应鼠标或者触摸事件，达到事件穿透效果。

最后！最后！在 element 中在 table 中使用 image 时，请将放大预览元素插入到 body 元素之上

image组件中设置 :preview-teleported="true"，否则你会有这种奇效：