✨ feat: 新增二次封装image组件

src/components/ExpandImage.vue

+<template>
+  <div class="expand_image">
+    <el-image ref="previewImage" class="image" v-if="url" v-bind="$attrs" style="height: 100%;width: 100%;" :src="url"
+      :preview-src-list="[url]">
+      <!-- 透传所有普通插槽 -->
+      <template v-for="(_, name) in $slots" v-slot:[name]>
+        <slot :name="name" />
+      </template>
+    </el-image>
+    <div class="expand_image_icon">
+
+      <div @click="handleLook">
+        <slot name="icon"></slot>
+      </div>
+
+    </div>
+  </div>
+</template>
+<script type="text/javascript">
+
+
+export default {
+  name: 'ExpandImage',
+  inheritAttrs: false,
+  props:{
+      /** 
+     * 图片的 URL 地址
+     * @type {string}
+     * @default ''
+     */
+    url: {
+      type: String,
+      default: ''
+    },
+   
+  },
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    handleLook() {
+        this.$nextTick(() => {          
+      this.$refs.previewImage.clickHandler();
+    });
+     
+    }
+  },
+created() {
+  console.log(this.url,'++++++++++++++++');
+  
+  },
+}
+</script>
+<style lang="scss" scoped>
+.expand_image {
+  position: relative;
+
+  &:hover::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #000;
+    opacity: .3;
+    cursor: pointer;
+  }
+
+
+
+  .expand_image_icon {
+    visibility: hidden;
+    position: absolute;
+    display: flex;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    z-index: 1;
+  }
+
+  &:hover .expand_image_icon {
+    visibility: visible;
+    cursor: pointer;
+  }
+}
+</style>
\ No newline at end of file