vue+antVue封装一个图片组件

JOJORiny

已于 2023-03-15 17:50:11 修改

阅读量340

点赞数

文章标签： vue.js 前端 javascript antvue

于 2023-03-15 17:47:51 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45963071/article/details/129562317

版权

该文章展示了一个Vue组件，用于渲染图片，支持加载状态显示、错误处理、点击查看大图功能，以及多种显示模式和样式定制。组件可以根据图片加载状态显示加载中、加载失败或正常显示图片，并在图片加载错误时提供备用处理机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件：

<template>
  <div class="content" :style="[{ width: width, height: height, borderRadius: radius }]">
    <div
      class="status-1"
      v-if="is_Loading"
      :class="[shape ? 'img-border-radius' : '']"
      :style="[{ width: '100%', height: '100%' }]"
    >
      <a-icon v-if="is_error" type="exclamation-circle" />
      <a-icon v-else-if="is_Loading" type="loading" />
      <div v-if="is_error" class="trip">加载失败</div>
    </div>
    <img
      v-if="!is_error"
      :src="src"
      alt="暂无图片"
      @click="viewImg"
      class="imgs"
      :class="[shape ? 'img-border-radius' : '', mode, hover ? 'is-hover' : '']"
      :style="[{ width: '100%', height: '100%' }]"
      @error="imgOnRrror"
      @load="imgOnLoad"
      :title="visible ? '点击查看图片' : ''"
    />
    <a-modal v-model="visibleImg" title="查看图片" :footer="null" :width="modalWidth" centered>
      <img :src="src" alt="暂无图片" :style="[{ width: '100%', height: '100%' }]" @error="imgOnRrror" />
    </a-modal>
  </div>
</template>

<script>
export default {
  name: 'BeautifulImage',
  props: {
    src: {
      type: String,
      default: () => '',
    },
    width: {
      type: String,
      default: () => '100%',
    },
    height: {
      type: String,
      default: () => '100%',
    },
    //是否为圆形
    shape: {
      type: Boolean,
      default: () => false,
    },
    //圆角
    radius: {
      type: String,
      default: () => '0px',
    },
    //图片显示方式 contain cover fill scale-down
    mode: {
      type: String,
      default: () => '',
    },
    //是否开启点击图片查看功能
    visible: {
      type: Boolean,
      default: () => false,
    },
    //是否鼠标经过动画效果
    hover: {
      type: Boolean,
      default: () => false,
    },
    modalWidth: {
      type: String,
      default: () => '50%',
    },
  },
  data() {
    return {
      visibleImg: false,
      defaultImg: '', //默认图片
      is_error: false, //是否加载失败
      is_Loading: true, //false为加载完成
    }
  },
  created() {},
  methods: {
    viewImg() {
      if (this.visible) {
        this.visibleImg = true
      }
    },
    imgOnLoad(e) {
      this.is_error = false
      this.is_Loading = false
    },
    imgOnRrror(e) {
      this.is_error = true
    },
  },
}
</script>

<style lang="less" scoped>
.content {
  cursor: pointer;
  overflow: hidden;
}
.imgs {
  transition: all 0.3s;
}
.contain {
  object-fit: contain;
}
.cover {
  object-fit: cover;
}
.fill {
  object-fit: fill;
}
.none {
  object-fit: none;
}
.scale-down {
  object-fit: scale-down;
}
.img-border-radius {
  border-radius: 50% !important;
}
.is-hover:hover {
  transform: scale(1.2);
}
.status-1 {
  background-color: #f3f4f6;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .trip{
    font-size: 10px;
    margin-top: 2px;
  }
}
</style>

使用方法：

<beautiful-image
            :src="record.img"
            width="60px"
            height="60px"
            visible
            hover
            radius="6px"
            modalWidth="56%"
          />

效果图：