FilePreview 文件预览

支持图片、视频、音频、PDF、文本等多种文件类型的预览组件。

基础用法

预览图片文件。

<template>
  <ExButton @click="visible = true">预览图片</ExButton>
  <ExFilePreview
    v-model:visible="visible"
    file="https://example.com/image.jpg"
    type="image"
    :zoomable="true"
    :rotatable="true"
  />
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)
</script>

预览视频

支持视频文件预览。

<template>
  <ExButton @click="visible = true">预览视频</ExButton>
  <ExFilePreview
    v-model:visible="visible"
    file="https://example.com/video.mp4"
    type="video"
  />
</template>

预览 PDF

支持 PDF 文件预览。

<template>
  <ExButton @click="visible = true">预览 PDF</ExButton>
  <ExFilePreview
    v-model:visible="visible"
    file="https://example.com/document.pdf"
    type="pdf"
  />
</template>

图片操作

图片预览支持缩放、旋转等操作。

<template>
  <ExFilePreview
    v-model:visible="visible"
    file="https://example.com/image.jpg"
    type="image"
    :zoomable="true"
    :rotatable="true"
    :show-toolbar="true"
  />
</template>

多文件预览

支持预览多个文件，可以切换查看。

<template>
  <ExFilePreview
    v-model:visible="visible"
    :files="imageList"
    type="image"
    :initial-index="0"
  />
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)
const imageList = ref([
  'https://example.com/image1.jpg',
  'https://example.com/image2.jpg',
  'https://example.com/image3.jpg',
])
</script>

自定义工具栏

可以自定义预览工具栏的内容。

<template>
  <ExFilePreview
    v-model:visible="visible"
    file="https://example.com/image.jpg"
    type="image"
  >
    <template #toolbar>
      <ExButton size="small" @click="handleDownload">下载</ExButton>
      <ExButton size="small" @click="handleShare">分享</ExButton>
    </template>
  </ExFilePreview>
</template>

API

Props

属性	说明	类型	默认值
visible / v-model:visible	是否显示预览	boolean	false
file	单个文件URL或对象	string | PreviewFile	-
files	多个文件列表	(string | PreviewFile)[]	-
type	文件类型	PreviewType	-
initial-index	初始显示的文件索引	number	0
zoomable	是否可缩放（图片）	boolean	true
rotatable	是否可旋转（图片）	boolean	true
show-toolbar	是否显示工具栏	boolean	true
mask-closable	点击遮罩是否关闭	boolean	true
keyboard	是否支持键盘操作	boolean	true

Events

事件名	说明	类型
update:visible	显示状态改变时触发	(visible: boolean) => void
close	关闭预览时触发	() => void
change	切换文件时触发	(index: number) => void
zoom	缩放时触发	(scale: number) => void
rotate	旋转时触发	(angle: number) => void

Slots

插槽名	说明
toolbar	自定义工具栏内容
footer	自定义底部内容

Methods

方法名	说明	类型
prev	上一个文件	() => void
next	下一个文件	() => void
zoomIn	放大	() => void
zoomOut	缩小	() => void
rotateLeft	逆时针旋转	() => void
rotateRight	顺时针旋转	() => void
reset	重置	() => void

类型定义

type PreviewType = 'image' | 'video' | 'audio' | 'pdf' | 'text' | 'unknown'

interface PreviewFile {
  url: string
  name?: string
  type?: PreviewType
  size?: number
}

无障碍支持

• 完整的键盘导航支持（方向键、ESC等）
• ARIA 属性标注
• 屏幕阅读器友好
• 焦点管理

主题定制

:root {
  --ex-preview-bg: rgba(0, 0, 0, 0.9);
  --ex-preview-toolbar-bg: rgba(0, 0, 0, 0.7);
  --ex-preview-toolbar-color: var(--ex-color-text-primary);
}