leromro-mini/pages_home/pages/certification/image-viewer.vue

<template>
  <view class="image-viewer" :style="containerStyle">
    <image
      :src="src"
      :mode="mode"
      :style="imageStyle"
      :lazy-load="lazyLoad"
      @load="onImageLoad"
      @error="onImageError"
      @tap="onImageTap"
    ></image>
  </view>
</template>

<script>
export default {
  name: 'ImageViewer',
  props: {
    // 图片地址
    src: {
      type: String,
      required: true
    },
    // 容器宽度
    width: {
      type: [String, Number],
      default: '100%'
    },
    // 容器高度
    height: {
      type: [String, Number],
      default: 'auto'
    },
    // 图片展示模式
    mode: {
      type: String,
      default: 'aspectFit',
      validator: (value) => {
        return ['aspectFit', 'aspectFill', 'widthFix', 'heightFix'].includes(value)
      }
    },
    // 是否懒加载
    lazyLoad: {
      type: Boolean,
      default: true
    },
    // 图片圆角
    radius: {
      type: [String, Number],
      default: 0
    },
    // 是否可点击放大
    preview: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      imageWidth: 0,
      imageHeight: 0,
      loaded: false
    }
  },
  computed: {
    containerStyle() {
      const style = {
        width: typeof this.width === 'number' ? `${this.width}rpx` : this.width,
        height: typeof this.height === 'number' ? `${this.height}rpx` : this.height,
        borderRadius: typeof this.radius === 'number' ? `${this.radius}rpx` : this.radius
      }
      return style
    },
    imageStyle() {
      const style = {
        width: '100%',
        height: '100%'
      }
      return style
    }
  },
  methods: {
    onImageLoad(e) {
      this.loaded = true
      this.imageWidth = e.detail.width
      this.imageHeight = e.detail.height
      this.$emit('load', e)
    },
    onImageError(e) {
      this.$emit('error', e)
    },
    onImageTap() {
      if (this.preview) {
        uni.previewImage({
          urls: [this.src],
          current: this.src
        })
      }
      this.$emit('tap')
    }
  }
}
</script>

<style lang="scss">
.image-viewer {
  position: relative;
  overflow: hidden;
  width: 100%;
  image {
    display: block;
    transition: opacity 0.3s;
  }
}
</style>