春风项目四线(合箱线、总装线)
wujian
2024-01-24 78830ddf56a41d16ab440a1ed3019ef77b3db4af
提交 | 用户 | 时间
fd2207 1 <template>
2   <el-image
3     :src="`${realSrc}`"
4     fit="cover"
5     :style="`width:${realWidth};height:${realHeight};`"
6     :preview-src-list="realSrcList"
7   >
8     <div slot="error" class="image-slot">
9       <i class="el-icon-picture-outline"></i>
10     </div>
11   </el-image>
12 </template>
13
14 <script>
15 import { isExternal } from "@/utils/validate";
16
17 export default {
18   name: "ImagePreview",
19   props: {
20     src: {
21       type: String,
22       default: ""
23     },
24     width: {
25       type: [Number, String],
26       default: ""
27     },
28     height: {
29       type: [Number, String],
30       default: ""
31     }
32   },
33   computed: {
34     realSrc() {
35       if (!this.src) {
36         return;
37       }
38       let real_src = this.src.split(",")[0];
39       if (isExternal(real_src)) {
40         return real_src;
41       }
42       return process.env.VUE_APP_BASE_API + real_src;
43     },
44     realSrcList() {
45       if (!this.src) {
46         return;
47       }
48       let real_src_list = this.src.split(",");
49       let srcList = [];
50       real_src_list.forEach(item => {
51         if (isExternal(item)) {
52           return srcList.push(item);
53         }
54         return srcList.push(process.env.VUE_APP_BASE_API + item);
55       });
56       return srcList;
57     },
58     realWidth() {
59       return typeof this.width == "string" ? this.width : `${this.width}px`;
60     },
61     realHeight() {
62       return typeof this.height == "string" ? this.height : `${this.height}px`;
63     }
64   },
65 };
66 </script>
67
68 <style lang="scss" scoped>
69 .el-image {
70   border-radius: 5px;
71   background-color: #ebeef5;
72   box-shadow: 0 0 5px 1px #ccc;
73   ::v-deep .el-image__inner {
74     transition: all 0.3s;
75     cursor: pointer;
76     &:hover {
77       transform: scale(1.2);
78     }
79   }
80   ::v-deep .image-slot {
81     display: flex;
82     justify-content: center;
83     align-items: center;
84     width: 100%;
85     height: 100%;
86     color: #909399;
87     font-size: 30px;
88   }
89 }
90 </style>