sl-sfy-safety/src/views/emergency/emergency-drill/components/ShowImages.vue

<template>
  <div class="show-box-container">
    <div v-for="(image, index) in imageList" :key="index" class="image-preview">
      <el-image
        :src="image.url"
        :zoom-rate="1.2"
        :max-scale="7"
        :min-scale="0.2"
        :preview-src-list="imageList.map((item) => item.url)"
        show-progress
        :initial-index="index"
        fit="contain"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  // import type { ImageItem } from '@/types/disaster-control';
  import { computed } from 'vue';

  const props = defineProps<{
    imageList?: string;
  }>();

  const imageList = computed(() => {
    if (!props.imageList) return [];
    return JSON.parse(props.imageList);
  });
</script>

<style scoped>
  .show-box-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    width: 100%;
  }

  .image-preview {
    width: 100px;
    height: 100px;
    border-radius: 4px;
  }
</style>