caimei-database-caimei/src/views/Database/components/image-content.vue

<template>
	<div class="img-content" v-if="type === '1'">
		<div class="item" v-for="(img, i) in props.waters" :key="i">
			<van-image
				fit="contain"
				width="100%"
				height="100%"
				:src="img"
				@click.native="shopImagePreviews(i)"
			/>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ChangeTabEmit } from '@/types/views/database.type';
import { showImagePreview } from "vant";
const props = defineProps<{
	waters: string[]
	type: ChangeTabEmit
}>()

const shopImagePreviews = (index: number) => {
  console.log(index);
  showImagePreview({
    images: props.waters,
    startPosition: index,
  });
};
</script>

<style scoped lang="scss">
.img-content {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 12px;
	.item {
		border: 1px solid #e1e1e1;
		width: 106px;
		height: 106px;
	}
}
</style>