uv-ui

# Album 相册

✈

组件名：uv-album

点击下载&安装 (opens new window)

本组件提供一个类似相册的功能，让开发者开发起来更加得心应手，功能齐全，灵活配置可以，开箱即用。减少重复的模板代码。

# 平台兼容性

App（vue） App（nvue） H5 小程序 VUE2 VUE3
√ √ √ √ √ √

# 基本使用

通过 urls 属性设置相册的图片地址

<template>
	<view>
		<uv-album :urls="urls"></uv-album>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				urls: ['https://via.placeholder.com/400x200.png/3c9cff/fff']
			}
		}
	}
</script>

# 多图模式

  • 通过 urls 传入更多的图片地址形成图片列表
  • 通过 multipleSize 属性可设置图片的宽高
  • 通过 space 属性可设置图片之间的间隙
<template>
	<view style="width: 400rpx;">
		<uv-album :urls="urls" multipleSize="128rpx" space="8rpx"></uv-album>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				urls: [
					'https://via.placeholder.com/100x200.png/3c9cff/fff',
					'https://via.placeholder.com/200x200.png/3c9cff/fff',
					'https://via.placeholder.com/300x200.png/3c9cff/fff',
					'https://via.placeholder.com/280x200.png/3c9cff/fff',
					'https://via.placeholder.com/240x200.png/3c9cff/fff',
					'https://via.placeholder.com/180x200.png/3c9cff/fff',
					'https://via.placeholder.com/140x200.png/3c9cff/fff',
					'https://via.placeholder.com/150x200.png/3c9cff/fff',
					'https://via.placeholder.com/90x200.png/3c9cff/fff',
					'https://via.placeholder.com/220x200.png/3c9cff/fff'
				]
			}
		}
	}
</script>

# 完整示例

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# API

# Album Props

参数 说明 类型 默认值 可选值
urls 图片地址列表 支持 Array<String> | Array<Object>形式 Array - -
keyName 指定从数组的对象元素中读取哪个属性作为图片地址 String - -
singleSize 单图时，图片长边的长度 String | Number 180 -
multipleSize 多图时，图片边长（宽高） String | Number 70 -
space 多图时，图片水平和垂直之间的间隔 String | Number 6 -
singleMode 单图时，图片缩放裁剪的模式 String scaleToFill -
multipleMode 多图时，图片缩放裁剪的模式 String aspectFill -
maxCount 最多展示的图片数量，超出时最后一个位置将会显示剩余图片数量 String | Number 9 -
previewFullImage 是否可以预览图片 Boolean true true | false
rowCount 每行展示图片数量，如设置，singleSize和multipleSize将会无效 String | Number 3 -
showMore 超出maxCount时是否显示查看更多的提示 Boolean true true | false

# Album Events

事件名 说明 回调参数
@albumWidth 某些特殊的情况下，需要让文字与相册的宽度相等，这里事件的形式对外发送 width

← Tabbar 底部导航栏 →