uview中 u-album相册显示样式支持自定义

优点：uview中u-album相册的预览功能还是可以的

缺点：u-album相册的展示效果却有点蠢，很难构建自己需要的样式，比如：头像使用、产品详情图片等。

以下将使用插槽的形式完美使用其预览功能，直接上代码：

<template>
	<view class="zq-album">
		<slot></slot>
		<u-album class="album-wrap" :style="getAlbumStyle" :urls="getUrls" :multipleSize="size" :singleSize="size"
			:maxCount="maxCount" :rowCount="rowCount"></u-album>
	</view>
</template>

<script>
export default {
	name: "ZqAlbum",
	props: {
		urls: String | Array,
		size: {
			type: String | Number,
			default: "158"
		},
		maxCount: {
			type: Number | String,
			default: 4
		},
		rowCount: {
			type: Number | String,
			default: 4
		},
		position: {
			type: String,
			default: "relative"
		}
	},
	computed: {
		getAlbumStyle() {
			return {
				position: this.position,
				opacity: this.position === "relative" ? 1 : 0

			}
		},
		getUrls() {
			if (!this.urls) {
				return []
			} else if (typeof this.urls == "string") {
				return this.urls.split(",")
			} else {
				return this.urls
			}
		}
	},
	data() {
		return {

		};
	}
}
</script>

<style lang="scss">
.zq-album {
	position: relative;

	.album-wrap {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
}
</style>

部分属性介绍：

urls（比传）: 图片的链接，可以是 数组，也可以是以“，”隔开的字符串；

position(非比传): 定位值有‘absolute’、‘relative’

有特殊的显示要求的时候，使用插槽进行显示，position值改为‘absolute’即可在页面上显示ui需要的样式，从而实现预览功能。

最后，单选picker组件这些组件有必要封装组件，使内部逻辑与业务层解耦，有必要吗？欢迎留言。