From e181f04c642204e79749af93fa921875ff6c21ba Mon Sep 17 00:00:00 2001 From: baoshiwei <baoshiwei@shlanbao.cn> Date: 星期二, 20 五月 2025 10:46:35 +0800 Subject: [PATCH] refactor(qms): 重构趋势图展示逻辑 --- src/components/ImagePreview/index.vue | 55 ++++++++++++++++++++++++++++--------------------------- 1 files changed, 28 insertions(+), 27 deletions(-) diff --git a/src/components/ImagePreview/index.vue b/src/components/ImagePreview/index.vue index 45f8326..98e6479 100644 --- a/src/components/ImagePreview/index.vue +++ b/src/components/ImagePreview/index.vue @@ -1,16 +1,25 @@ +<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: "" + default: '' }, height: { type: [Number, String], - default: "" + default: '' } }); @@ -18,53 +27,45 @@ if (!props.src) { return; } - let real_src = props.src.split(",")[0]; + let real_src = props.src.split(',')[0]; return real_src; }); const realSrcList = computed(() => { if (!props.src) { - return; + return []; } - let real_src_list = props.src.split(","); - let srcList:string[] = []; - real_src_list.forEach(item => { + let real_src_list = props.src.split(','); + let srcList: string[] = []; + real_src_list.forEach((item: string) => { + if (item.trim() === '') { + return; + } return srcList.push(item); }); return srcList; }); -const realWidth = computed(() => - typeof props.width == "string" ? props.width : `${props.width}px` -); +const realWidth = computed(() => (typeof props.width == 'string' ? props.width : `${props.width}px`)); -const realHeight = computed(() => - typeof props.height == "string" ? props.height : `${props.height}px` -); +const realHeight = computed(() => (typeof props.height == 'string' ? props.height : `${props.height}px`)); </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