图片展示组件

最新推荐文章于 2024-08-06 17:41:12 发布

TianNicholas

最新推荐文章于 2024-08-06 17:41:12 发布

阅读量364

点赞数

分类专栏：前端技术

本文链接：https://blog.csdn.net/qq_32615575/article/details/104612038

版权

前端技术专栏收录该内容

78 篇文章 0 订阅

订阅专栏

图片展示组件

<template>
  <div class="gd-image">
    <el-image
      :src="url[0]"
      :style="{width: cWidth + 'px', height: cHeight + 'px'}"
      :preview-src-list="[previewUrl]"
      fit="cover"
    >
      <div slot="error" class="el-image__error">
        <span v-if="!url[0]">无图片</span>
        <span v-else>加载失败</span>
      </div>
    </el-image>
    <p class="tips" v-if="tips">{{tips}}</p>
  </div>
</template>

<script>
export default {
  props: {
    url: {
      type: Array,
      default: () => {
        return []
      }
    },
    small: {
      type: Boolean,
      default: false
    },
    width: {
      type: [ Number, String ],
      default: 200
    },
    height: {
      type: [ Number, String ],
      default: 120
    },
    tips: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      cWidth: '',
      cHeight: '',
      previewUrl: ''
    }
  },
  created() {
    if (this.url.length == 1) {
      this.previewUrl = this.url[0]
    } else {
      this.previewUrl = this.url[1]
    }
    if (this.small) {
      this.cWidth = this.width/2
      this.cHeight = this.height/2
    } else {
      this.cWidth = this.width
      this.cHeight = this.height
    }
  }
}
</script>

<style lang="scss">
.gd-image{
  margin-right: 10px;
  display: inline-block;
  .tips{
    text-align: center;
    font-size: 13px;
    color: #666;
    margin-top: 5px;
  }
}
.el-image__error{
  background: #f2f2f2;
}
</style>