Commit 903b5aebca7951da979d703604c7f54159498157
1 parent
7492dcc9
新增图片预览组件
Showing
2 changed files
with
70 additions
and
0 deletions
ruoyi-ui/src/components/ImagePreview/index.vue
0 → 100644
1 | +<template> | |
2 | + <el-image :src="`${realSrc}`" fit="cover" :style="`width:${realWidth};height:${realHeight};`" :preview-src-list="[`${realSrc}`]"> | |
3 | + <div slot="error" class="image-slot"> | |
4 | + <i class="el-icon-picture-outline"></i> | |
5 | + </div> | |
6 | + </el-image> | |
7 | +</template> | |
8 | + | |
9 | +<script> | |
10 | +import { isExternal } from '@/utils/validate' | |
11 | + | |
12 | +export default { | |
13 | + name: 'ImagePreview', | |
14 | + props: { | |
15 | + src: { | |
16 | + type: String, | |
17 | + required: true | |
18 | + }, | |
19 | + width: { | |
20 | + type: [Number, String], | |
21 | + default: '' | |
22 | + }, | |
23 | + height: { | |
24 | + type: [Number, String], | |
25 | + default: '' | |
26 | + } | |
27 | + }, | |
28 | + computed: { | |
29 | + realSrc() { | |
30 | + if (isExternal(this.src)) { | |
31 | + return this.src | |
32 | + } | |
33 | + return process.env.VUE_APP_BASE_API + this.src | |
34 | + }, | |
35 | + realWidth() { | |
36 | + return typeof this.width == 'string' ? this.width : `${this.width}px` | |
37 | + }, | |
38 | + realHeight() { | |
39 | + return typeof this.height == 'string' ? this.height : `${this.height}px` | |
40 | + } | |
41 | + } | |
42 | +} | |
43 | +</script> | |
44 | + | |
45 | +<style lang="scss" scoped> | |
46 | +.el-image { | |
47 | + border-radius: 5px; | |
48 | + background-color: #ebeef5; | |
49 | + box-shadow: 0 0 5px 1px #ccc; | |
50 | + ::v-deep .el-image__inner { | |
51 | + transition: all 0.3s; | |
52 | + cursor: pointer; | |
53 | + &:hover { | |
54 | + transform: scale(1.2); | |
55 | + } | |
56 | + } | |
57 | + ::v-deep .image-slot { | |
58 | + display: flex; | |
59 | + justify-content: center; | |
60 | + align-items: center; | |
61 | + width: 100%; | |
62 | + height: 100%; | |
63 | + color: #909399; | |
64 | + font-size: 30px; | |
65 | + } | |
66 | +} | |
67 | +</style> | |
... | ... |
ruoyi-ui/src/main.js
... | ... | @@ -29,6 +29,8 @@ import Editor from "@/components/Editor" |
29 | 29 | import FileUpload from "@/components/FileUpload" |
30 | 30 | // 图片上传组件 |
31 | 31 | import ImageUpload from "@/components/ImageUpload" |
32 | +// 图片预览组件 | |
33 | +import ImagePreview from "@/components/ImagePreview" | |
32 | 34 | // 字典标签组件 |
33 | 35 | import DictTag from '@/components/DictTag' |
34 | 36 | // 头部标签组件 |
... | ... | @@ -54,6 +56,7 @@ Vue.component('RightToolbar', RightToolbar) |
54 | 56 | Vue.component('Editor', Editor) |
55 | 57 | Vue.component('FileUpload', FileUpload) |
56 | 58 | Vue.component('ImageUpload', ImageUpload) |
59 | +Vue.component('ImagePreview', ImagePreview) | |
57 | 60 | |
58 | 61 | Vue.use(directive) |
59 | 62 | Vue.use(plugins) |
... | ... |