@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 |