@pluve/pdf-preview-vue

lego 系列之图片预览组件

feature

• 页面内图片展示；
• 点击弹框预览；
• 支持原图、大图、中图、小图、精准调参 5 种图片展示模式；
• 支持图片懒加载；
• 支持自动转 webp 格式；
• 支持阿里云和华为云图片指令；

usage

<template>
  <LegoImage v-bind="ossLegoImageProps" />
</template>
<script setup lang="ts">
  const ossLegoImageProps = computed<ILegoImageProps>(() => ({
    src: '',
    width: `200px`,
    height: `200px`,
    objectFit: 'cover',
    compressionMode: 'large',
    customInstruction: '',
    objectStorageServiceProvider: 'OSS',
    enableAutoOrientation: false,
    blur: [0, 0],
    rotate: 0,
    enablePreview: true,
    style: {
      borderRadius: '10px',
      backgroundColor: '#f5f5f5',
      border: 'solid 1px #e8e8e8',
    },
  }));
</script>

Properties

| Property | Type | Description | Default | | ---------------------------- | -------------------------------------------- | ------------------------------------------------------------------------------ | -------- | | alt | string? | 图片描述 | "" | | src | string | 图片地址，支持传图片 base64 | - | | placeholder | string? | 图片占位图片地址，支持传图片 base64 | - | | fallback | string? | 异常兜底展示图片，支持传图片 base64 | - | | width | string | number | undefined | 图片宽度 | - | | height | string | number | undefined | 图片高度 | - | | className | string? | 图片样式类 | - | | style | CSSProperties | undefined | 图片行内样式 | - | | compressionMode | ImageMode | undefined | 图片压缩模式，默认原图模式，small: 100，middle: 300，large: 600 | original | | customInstruction | string? | 自定义压缩指令，在compressionMode为'custom'时生效 | "" | | enablePreview | boolean? | 是否启用图片预览能力，开启后点击图片即可预览，默认预览图片原图（转 webp 格式） | false | | objectFit | ObjectFit? | 图片内容适配模式，参考 image object-fit | cover | | objectStorageServiceProvider | ObjectStorageServiceProvider | 对象存储服务厂商，目前支持阿里云 oss 和华为云 obs | - | | enableLazyLoading | boolean? | 是否开启懒加载，默认开启 | true | | enableAutoOrientation | boolean? | 是否开启自适应方向，默认开启 | true | | blur | [radius: number, standardDeviation: number]? | 模糊效果，第一个参数为模糊半径[1,50]，第二个参数为标准差[1,50] | - | | rotate | number? | 旋转角度，默认 0 | 0 |

dependencies

• ant-design-vue
• vue3.x