ImagePreview 图片预览

基于 Naive UI NImageGroup 的图片分组预览组件。在插槽内放置多个 n-image 组件，点击任意图片即可进入全屏预览模式，支持左右切换浏览。

• 基础用法
• 工作原理
• 在表格列中使用
• 注意事项

基础用法

<template>
  <ImagePreview>
    <n-image
      v-for="url in imageList"
      :key="url"
      :src="url"
      width="120"
      height="120"
      object-fit="cover"
      style="border-radius: 8px; cursor: pointer"
    />
  </ImagePreview>
</template>

<script setup>
import ImagePreview from '@/components/ImagePreview.vue'

const imageList = [
  'https://example.com/img1.jpg',
  'https://example.com/img2.jpg',
  'https://example.com/img3.jpg',
]
</script>

工作原理

ImagePreview 本质上是一个 <n-image-group> 容器。所有放置在默认插槽内的 <n-image> 会被归为一个预览组，点击任意图片弹出全屏预览器，支持键盘左右切换。

在表格列中使用

const columns = [
  {
    prop: 'images', label: '图片', width: 160,
    render: row => h(ImagePreview, null, () =>
      (row.images || []).map(url =>
        h('img', { src: url, width: 40, height: 40, style: { objectFit: 'cover', borderRadius: '4px', marginRight: '4px', cursor: 'pointer' } })
      )
    ),
  },
]

注意事项

• 插槽内必须放置 <n-image> 组件才能生效
• 不接收任何 Props 和 Events，仅作为 Naive UI NImageGroup 的封装