aiot-app/pages/maintenance/check/components/PreviewPhoto.vue

<template>
	<view class="container">
		<!-- 图片列表 -->
		<view class="image-list">
			<view class="image-item" :style="{height:height || '180rpx'}" v-for="(item, index) in imageList"
				:key="index">
				<text class="imagedelete" @click="$emit('imagedelete',index)" v-if="type != 'view'">
					<uni-icons type="closeempty" size="18" color="#ccc"></uni-icons>
				</text>
				<image :src="item" mode="aspectFill" lazy-load @click="previewImage(index)"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: '180rpx'
			};
		},
		watch: {

		},
		props: {
			type: {
				type: String,
				default: 'edit'
			},
			imageList: {
				type: Array,
				default: () => []
			}
		},
		mounted() {
			this.getElementWidth();
		},
		methods: {
			// 预览图片
			previewImage(index) {
				uni.previewImage({
					current: index,
					urls: this.imageList.map(item => item)
				});
			},
			getElementWidth() {
				// 创建查询实例
				const query = uni.createSelectorQuery().in(this);

				// 选择要查询的元素
				query.select('.container')
					.boundingClientRect(data => {
						console.log(data.width,'data.width')
						let height = Math.floor(((data.width - 20) * 31) / 50);
						this.height = height > 160 ? height + 'rpx' : '180rpx'
					})
					.exec();
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		padding: 10px;
	}

	.imagedelete {
		position: absolute;
		z-index: 20;
		display: block;
		right: 4rpx;
		top: -2rpx;
		text-align: center;
		background: rgba(0, 0, 0, 0.5);
		color: #fff;
		border-radius: 50%;
		font-size: 30rpx;
		width: 44rpx;
		height: 44rpx;
		line-height: 27rpx;
		text-align: center;
	}

	.image-list {
		display: flex;
		flex-wrap: wrap;

		.image-item {
			position: relative;
			width: 31%;
			margin-bottom: 10px;
			margin-right: 3%;

			image {
				width: 100%;
				height: 100%;
				border-radius: 5px;
			}

			text {
				display: block;
				margin-top: 5px;
				font-size: 14px;
				text-align: center;
			}
		}

		.image-item:nth-child(3n) {
			margin-right: 0;
		}
	}
</style>