ImagePreview 图片预览

$ImagePreview(appContext)(datas, index, options) 打开图片、音视频或文件预览。先在 setup 获取应用上下文，再在用户点击时打开。

效果预览可直接操作下方示例

点击缩略图从对应索引打开，点击图片记录事件，点击右上角关闭。示例图片来自本站。

正在加载示例…

<template>
  <div class="image-preview-demo">
    <div class="image-preview-demo__images">
      <button v-for="(item, index) in images" :key="item.url" type="button"
              :aria-label="'预览' + item.name" :disabled="opened" @click="open(index)">
        <img :src="item.thumbUrl" :alt="item.name" />
      </button>
    </div>
    <p aria-live="polite">{{ message }}</p>
  </div>
</template>

<script setup>
import { getCurrentInstance, ref } from 'vue'
import { $ImagePreview } from '@smallwei/avue'
const { appContext } = getCurrentInstance()
const preview = $ImagePreview(appContext)
const opened = ref(false)
const message = ref('点击任意图片打开预览')
const images = [
  { name: 'Avue 标志', thumbUrl: '/images/logo.png', url: '/images/logo.png', type: 'img' },
  { name: '布局示意', thumbUrl: '/images/grid.png', url: '/images/grid.png', type: 'img' }
]
function open(index) {
  opened.value = true
  preview(images, index, {
    interval: 10000,
    closeOnClickModal: true,
    click: (item, current) => { message.value = '点击了第 ' + (current + 1) + ' 项：' + item.name },
    beforeClose: (items, current) => {
      opened.value = false
      message.value = '已关闭，最后查看：' + items[current].name
    }
  })
}
</script>

<style scoped>
.image-preview-demo__images { display: flex; flex-wrap: wrap; gap: 16px; }
.image-preview-demo__images button { cursor: pointer; padding: 12px; background: white; border: 1px solid var(--el-border-color); border-radius: 8px; }
.image-preview-demo__images img { display: block; width: 150px; height: 110px; object-fit: contain; }
</style>

参数	默认值	说明
datas	[]	非空文件数组，数据项包含 url，可提供 name/type；thumbUrl 用于业务侧缩略图
index	0	首次展示位置，从 0 开始
options.modal	true	是否显示背景遮罩
options.closeOnClickModal	false	控制轮播空白区域点击关闭；当前源码遮罩本身点击会关闭
options.appendTo	body	容器 CSS 选择器
options.interval	0	传给内部轮播的间隔
options.click(item, index)	未设置	当前媒体点击回调；文件默认操作是新窗口打开 URL
options.beforeClose(datas, currentIndex)	未设置	关闭时通知，无 done 参数，返回值不会阻止关闭

数据项通过 URL 扩展名或 type: 'img' / 'video' / 'audio' 判断预览类型。返回值没有公开的 close() 方法，不要套用 DialogForm 的实例 API。详见全局 API。