From d43ae50abc9461a9b20b3f015ba3679ba699dfa2 Mon Sep 17 00:00:00 2001
From: LiuHao <liuhaoai545@gmail.com>
Date: 星期二, 06 六月 2023 22:52:24 +0800
Subject: [PATCH] update 修改组件 去除无用引用和代码缩进
---
src/components/ImagePreview/index.vue | 32 +++++++++++++++++---------------
1 files changed, 17 insertions(+), 15 deletions(-)
diff --git a/src/components/ImagePreview/index.vue b/src/components/ImagePreview/index.vue
index 45f8326..723ccdb 100644
--- a/src/components/ImagePreview/index.vue
+++ b/src/components/ImagePreview/index.vue
@@ -1,9 +1,18 @@
+<template>
+ <el-image :src="`${realSrc}`" fit="cover" :style="`width:${realWidth};height:${realHeight};`" :preview-src-list="realSrcList" preview-teleported>
+ <template #error>
+ <div class="image-slot">
+ <el-icon><picture-filled /></el-icon>
+ </div>
+ </template>
+ </el-image>
+</template>
+
<script setup lang="ts">
+import { propTypes } from '@/utils/propTypes';
+
const props = defineProps({
- src: {
- type: String,
- default: ""
- },
+ src: propTypes.string.def(''),
width: {
type: [Number, String],
default: ""
@@ -27,7 +36,7 @@
return;
}
let real_src_list = props.src.split(",");
- let srcList:string[] = [];
+ let srcList: string[] = [];
real_src_list.forEach(item => {
return srcList.push(item);
});
@@ -43,28 +52,21 @@
);
</script>
-<template>
- <el-image :src="`${realSrc}`" fit="cover" :style="`width:${realWidth};height:${realHeight};`" :preview-src-list="realSrcList" preview-teleported>
- <template #error>
- <div class="image-slot">
- <el-icon><picture-filled /></el-icon>
- </div>
- </template>
- </el-image>
-</template>
-
<style lang="scss" scoped>
.el-image {
border-radius: 5px;
background-color: #ebeef5;
box-shadow: 0 0 5px 1px #ccc;
+
:deep(.el-image__inner) {
transition: all 0.3s;
cursor: pointer;
+
&:hover {
transform: scale(1.2);
}
}
+
:deep(.image-slot) {
display: flex;
justify-content: center;
--
Gitblit v1.9.3