@tanzhenxing/zx-album NPM

zx-album 相册组件

相册组件用于展示一个或多个图片，支持单图、多图布局，图片预览，懒加载，删除等功能。

介绍

相册组件是一个功能丰富的图片展示组件，支持以下特性：

单图/多图展示
自适应图片尺寸
图片预览
懒加载
删除功能
加载状态
错误处理
空状态提示

使用示例

基础用法

<template>
  <zx-album :urls="urls"></zx-album>
</template>

<script setup>
import { ref } from 'vue';

const urls = ref([
  'https://cdn.mp.ac.cn/banner/01.jpg',
  'https://cdn.mp.ac.cn/banner/02.jpg',
  'https://cdn.mp.ac.cn/banner/03.jpg'
]);
</script>

自定义大小和间距

<template>
  <zx-album 
    :urls="urls" 
    singleSize="400rpx" 
    multipleSize="120rpx"
    space="10rpx"
  ></zx-album>
</template>

可删除的相册

<template>
  <zx-album 
    :urls="urls" 
    :deletable="true"
    @delete="onDelete"
  ></zx-album>
</template>

<script setup>
import { ref } from 'vue';

const urls = ref([
  'https://cdn.mp.ac.cn/banner/01.jpg',
  'https://cdn.mp.ac.cn/banner/02.jpg',
  'https://cdn.mp.ac.cn/banner/03.jpg'
]);

const onDelete = (index) => {
  urls.value.splice(index, 1);
};
</script>

配合上传组件使用

<template>
  <zx-album 
    :urls="images" 
    :deletable="true"
    @delete="onDelete"
  ></zx-album>
  <zx-upload 
    :fileList="images" 
    @afterRead="afterRead" 
    :maxCount="9"
  ></zx-upload>
</template>

<script setup>
import { ref } from 'vue';

const images = ref([]);

const afterRead = (event) => {
  const { file } = event;
  // 此处省略上传逻辑
  images.value.push(file.url);
};

const onDelete = (index) => {
  images.value.splice(index, 1);
};
</script>

使用对象数组

<template>
  <zx-album 
    :urls="images" 
    keyName="url"
  ></zx-album>
</template>

<script setup>
import { ref } from 'vue';

const images = ref([
  { url: 'https://cdn.mp.ac.cn/banner/01.jpg', id: '1' },
  { url: 'https://cdn.mp.ac.cn/banner/02.jpg', id: '2' },
  { url: 'https://cdn.mp.ac.cn/banner/03.jpg', id: '3' }
]);
</script>

API

Props

参数	说明	类型	默认值
urls	图片地址列表	Array	[]
keyName	指定从对象数组中读取的图片地址属性名	String	''
singleSize	单图时，图片长边的长度	String/Number	'360rpx'
multipleSize	多图时，图片边长	String/Number	'140rpx'
space	多图时，图片间隔	String/Number	'12rpx'
singleMode	单图时，图片缩放裁剪模式	String	'scaleToFill'
multipleMode	多图时，图片缩放裁剪模式	String	'aspectFill'
maxCount	最多展示图片数量	String/Number	9
previewFullImage	是否可以预览图片	Boolean	true
rowCount	每行展示图片数量	String/Number	3
showMore	超出maxCount时是否显示查看更多提示	Boolean	true
deletable	是否可以删除图片	Boolean	false
lazyLoad	是否开启图片懒加载	Boolean	true
loading	是否显示加载状态	Boolean	false
showError	是否显示加载失败提示	Boolean	true
showEmpty	是否显示空状态提示	Boolean	true
emptyText	空状态提示文字	String	'暂无图片'

Events

事件名	说明	回调参数
albumWidth	当相册宽度变化时触发	width: 相册宽度
delete	删除图片时触发	index: 被删除图片的索引
error	图片加载失败时触发	{rowIndex, colIndex, src}: 行索引、列索引和图片地址