v4.3.0

admin/src/components/ImagePreview/index.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+  defineOptions({
+    name: 'ImagePreview',
+  });
+
+  const props = withDefaults(
+    defineProps<{
+      src: string;
+      width?: number | string;
+      height?: number | string;
+    }>(),
+    {
+      width: 200,
+      height: 200,
+    },
+  );
+
+  const realWidth = computed(() => {
+    return typeof props.width === 'string' ? props.width : `${props.width}px`;
+  });
+
+  const realHeight = computed(() => {
+    return typeof props.height === 'string' ? props.height : `${props.height}px`;
+  });
+</script>
+
+<template>
+  <ElImage
+    :src="src"
+    fit="cover"
+    :style="`width:${realWidth};height:${realHeight};`"
+    :preview-src-list="[src]"
+    preview-teleported
+  >
+    <template #error>
+      <div class="image-slot">
+        <SvgIcon name="image-load-fail" />
+      </div>
+    </template>
+  </ElImage>
+</template>
+
+<style lang="scss" scoped>
+  .el-image {
+    background-color: var(--el-fill-color);
+    border-radius: 5px;
+    box-shadow: var(--el-box-shadow-light);
+    transition:
+      background-color 0.3s,
+      var(--el-transition-box-shadow);
+
+    :deep(.el-image__inner) {
+      cursor: pointer;
+      transition: all 0.3s;
+
+      &:hover {
+        transform: scale(1.2);
+      }
+    }
+
+    :deep(.image-slot) {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      font-size: 30px;
+      color: #909399;
+    }
+  }
+</style>