zhxy-desk/components/imgList.vue

<template>
	<view class='img-list'>
		<view @click="img(item,index)" v-for="(item,index) in imgData" :key="index" class="img-list-item">
			<view @click.stop="goList" v-if="list.length - 5 == index && list.length > 6 " class="img-list-item-bgc">
				+ {{list.length - 6}}
			</view>
			<image style="width: 100%;height: 100%; border-radius: 10rpx;" :src="item" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		name: "imgList",
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {

			};
		},
		methods: {
			img(item, index) {
				uni.previewImage({
					urls: this.list, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: index, // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			goList(){
				 this.$emit('click')
			}
		},
		computed: {
			imgData() {
				let arr = []
				if (this.list.length > 6) {
					arr = this.list.slice(0, 6)
					return arr
				} else {
					arr = this.list
					return arr
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.img-list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;


	}

	.img-list-item {
		margin-bottom: 20rpx;
		margin-right: 25rpx;
		position: relative;
		width: 192rpx;
		height: 192rpx;
		border-radius: 10rpx;
		overflow: hidden;
		.img-list-item-bgc {
			 width: 100%;
			 height: 100%;
			  position: absolute;
			  left: 0;
			  top: 0;
			  background-color: rgba(0, 0, 0, .5);
			  z-index: 111;
			  color: #fff;
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  font-size: 48rpx;
		}
	}

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