init

src/components/E-image/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <el-image
+    :preview-src-list="[url]"
+    class="block-img"
+    :src="url"
+    @click.stop="handleClickItem"></el-image>
+</template>
+
+<script>
+  export default {
+    props: {
+      url: {
+        type: String,
+        default: ''
+      },
+    },
+    data() {
+      return {
+      }
+    },
+    methods: {
+      handleClickItem() {
+        // 获取遮罩层dom
+        let domImageMask = document.querySelector(".el-image-viewer__mask");
+        if (!domImageMask) {
+          return;
+        }
+        domImageMask.addEventListener("click", () => {
+          // 点击遮罩层时调用关闭按钮的 click 事件
+          document.querySelector(".el-image-viewer__close").click();
+        });
+      }
+    }
+  }
+</script>
+
+<style>
+  .block-img{
+    width: 30px;
+    height: 30px;
+  }
+  .el-icon-circle-close{
+    color: white;
+  }
+</style>