Commit 903b5aebca7951da979d703604c7f54159498157

Authored by RuoYi
1 parent 7492dcc9

新增图片预览组件

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 &quot;@/components/Editor&quot;
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(&#39;RightToolbar&#39;, 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)
... ...