From 3c4fee1db116c11d4f04727cfe076d7c94daeaf2 Mon Sep 17 00:00:00 2001 From: yanzhaofeige <yanzhaofeige@qq.com> Date: Mon, 30 Sep 2024 12:10:57 +0800 Subject: [PATCH] init --- cpzidc-ui/src/components/ImagePreview/index.vue | 90 +++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 90 insertions(+), 0 deletions(-) diff --git a/cpzidc-ui/src/components/ImagePreview/index.vue b/cpzidc-ui/src/components/ImagePreview/index.vue new file mode 100644 index 0000000..3c770c7 --- /dev/null +++ b/cpzidc-ui/src/components/ImagePreview/index.vue @@ -0,0 +1,90 @@ +<template> + <el-image + :src="`${realSrc}`" + fit="cover" + :style="`width:${realWidth};height:${realHeight};`" + :preview-src-list="realSrcList" + > + <div slot="error" class="image-slot"> + <i class="el-icon-picture-outline"></i> + </div> + </el-image> +</template> + +<script> +import { isExternal } from "@/utils/validate"; + +export default { + name: "ImagePreview", + props: { + src: { + type: String, + default: "" + }, + width: { + type: [Number, String], + default: "" + }, + height: { + type: [Number, String], + default: "" + } + }, + computed: { + realSrc() { + if (!this.src) { + return; + } + let real_src = this.src.split(",")[0]; + if (isExternal(real_src)) { + return real_src; + } + return process.env.VUE_APP_BASE_API + real_src; + }, + realSrcList() { + if (!this.src) { + return; + } + let real_src_list = this.src.split(","); + let srcList = []; + real_src_list.forEach(item => { + if (isExternal(item)) { + return srcList.push(item); + } + return srcList.push(process.env.VUE_APP_BASE_API + item); + }); + return srcList; + }, + realWidth() { + return typeof this.width == "string" ? this.width : `${this.width}px`; + }, + realHeight() { + return typeof this.height == "string" ? this.height : `${this.height}px`; + } + }, +}; +</script> + +<style lang="scss" scoped> +.el-image { + border-radius: 5px; + background-color: #ebeef5; + box-shadow: 0 0 5px 1px #ccc; + ::v-deep .el-image__inner { + transition: all 0.3s; + cursor: pointer; + &:hover { + transform: scale(1.2); + } + } + ::v-deep .image-slot { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + color: #909399; + font-size: 30px; + } +} +</style> -- Gitblit v1.9.3