文件预览 FilePreviewer

基本用法

通过 type 明确指定文件预览器，默认使用图片预览。

视频、音频和 PDF

视频和音频默认使用 Video.js HTML 的预设 Web Components 预览器，PDF 使用 pdf.js 渲染为 canvas；默认都会在全屏弹层中展示。PDF 默认走 Worker 渲染：pdf.js worker 已打包进组件库，默认从本库按需加载（适用于内网/离线环境，无需 CDN）。如需改用 CDN 或自托管，用 pdfProps.workerSrc 指定地址（如 vite 下 import url from 'pdfjs-dist/build/pdf.worker.min.mjs?url'）；设置 pdfProps.worker: false 可退回主线程渲染（大文件可能卡顿，且为全局一次性切换）。

内嵌展示

设置 fullscreen="false" 后，图片、视频、音频和 PDF 都会直接在当前位置展示，不再打开全屏弹层。

自定义内容

使用 content 插槽可以完全接管预览区域，插槽参数会透出当前文件、类型、状态和关闭方法等上下文。

自定义 PDF 渲染

使用 pdf 插槽可以接管 PDF 渲染区域。插槽参数会透出 pdf.js 文档代理（doc）、当前页码（page）、总页数（numPages），以及 render / prev / next / goto 等方法，方便自定义画布与翻页工具条。同样地，image / video / audio 插槽分别透出对应预览器的配置与状态。

受控用法

通过 v-model:visible 控制预览器打开和关闭。

自定义标题

使用 title 插槽自定义文件预览器标题区域。

API

<file-previewer> Props

参数名	描述	类型	默认值
src	文件地址	string	-
type	预览类型，由参数决定使用哪个预览器	'image' | 'video' | 'audio' | 'pdf'	'image'
visible (v-model)	是否可见	boolean	-
default-visible	默认是否可见，非受控	boolean	false
fullscreen	是否使用全屏弹层展示	boolean	true
title	标题	string	-
mask-closable	点击遮罩是否关闭，仅全屏弹层下生效	boolean	true
closable	是否显示关闭按钮，仅全屏弹层下生效	boolean	true
esc-to-close	是否支持 ESC 键关闭，仅全屏弹层下生效	boolean	true
popup-container	设置弹出框挂载点，同 teleport 的 to	HTMLElement | string	-
render-to-body	是否渲染到 body，仅全屏弹层下生效	boolean	true
image-props	图片预览器参数，会透传给 Image 组件	Record<string, unknown>	-
media-props	视频和音频预览器参数。skin 可设置为 'default'、'minimal'、'native' 或 false，playerProps 透传给 video-player，skinProps 透传给 skin Web Component，其余字段透传给内部 video / audio 元素	Record<string, unknown>	-
pdf-props	PDF 预览器参数。worker 默认 true 走 Worker（默认使用打包进本库的 worker，离线可用），设为 false 退回主线程；workerSrc / workerPort 自定义 worker（如 CDN）；scale / rotation / page 控制渲染；documentParams / renderParams 透传给 pdf.js；onDocumentLoad 接收文档代理	Record<string, unknown>	-

<file-previewer> Events

事件名	描述	参数
close	关闭事件	-
visible-change	可见状态变化	visible: boolean

<file-previewer> Slots

插槽名	描述	参数
title	自定义标题	-
content	自定义预览内容，优先级最高	{ src, type, title, visible, fullscreen, status, loading, loaded, error, close, onLoad, onError }
image	自定义图片预览	{ src, status, loading, loaded, error, imageProps, close, onLoad, onError }
video	自定义视频预览	{ src, status, loading, loaded, error, skin, useVideoJs, playerProps, skinProps, close, onLoad, onError }
audio	自定义音频预览	{ src, status, loading, loaded, error, skin, useVideoJs, playerProps, skinProps, close, onLoad, onError }
pdf	自定义 PDF 预览	{ src, status, loading, loaded, error, doc, page, numPages, goto, prev, next, render, close, onLoad, onError }