element实现图片预览，不使用外部插件

功能：图片上显示遮罩层，点击遮罩层上的按钮才去预览
效果图：

image.png

遇到的问题:
1、鼠标进入图片时显示遮罩层会出现闪烁。修改：进入和离开的事件绑定在父级
2、点击预览遮罩层也可关闭预览，实现方式是获取class来给它绑定点击事件。
实现方法：
js:

import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
  components: { ElImageViewer },
  data () {
      return {
          viewImgDialog: false // 是否显示预览
      }
  },
  methods: {
    // 查看图片
    viewImg () {
      this.viewImgDialog = true
      // 给遮罩层绑定点击关闭事件
      this.$nextTick(() => {
        let mask = document.getElementsByClassName('el-image-viewer__mask')
        mask[0].onclick = () => {
          this.closeViewer()
        }
      })
    },
    // 关闭查看器
    closeViewer () {
      this.viewImgDialog = false
    }
  }
}

html

<div class="hImg position" @mouseenter="enter('破产工作机制')" @mouseleave="leave()">
     <img src="../dataScreen/images/test1.jpg" alt="" v-image-preview>
     <div class="shadow" v-if="shadowShow.text === '破产工作机制'">
        <i class="el-icon-zoom-in icon" @click="viewImg()"></i>
        <i class="el-icon-delete icon" style="margin-left: 15px" @click="delImg()"></i>
     </div>
</div>
<el-image-viewer
    class="imgViewer"
    v-if="viewImgDialog"
    :on-close="closeViewer"
    :url-list="['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']" />

插件实现：参考https://www.jianshu.com/p/84042c7b1b5b
项目要求在图片上显示遮罩层，遮罩层上的按钮实现预览和删除。插件的话是直接点击图片本身实现的预览，加上本次项目使用了element，所以我就偷懒下。